TV app layout guide

This article provides basic principles and guidelines for developing TV app UIs. Take these points into consideration when developing your TV app UX.

Legibility and readability

This section provides guidelines for the legibility and readibility of text and items in the TV app.

Average viewing distance

Although TV screens are larger than mobile devices, the average viewing distance between the user and the TV sreen is 10 feet (3 meters). Because of this, TV apps have a relatively small UI area available. When designing an app for TV, you must take legibility into account, especially for text and other actionable visual elements.

Figure 1. Average distance between the TV and users

Use Sans Serif typeface as the default font to avoid excess visual noise, distraction, and eyestrain when viewing small font sizes.
For the minumum font size, use the following recommendations for different resolutions:
- 42 pixels for UHD 4K (3840 x 2160 pixels)
- 20 pixels for 1920x1080 resolution
- 14 pixels for 1280x720 resolution

Clickable elements

For users to easily recongnize and navigate clickable elements (such as buttons, menus, or tabs), specify the minimum size using the following recommendations for different resolutions:

150x150 pixels for UHD 4K (3840 x 2160 pixels)
75x75 pixels for 1920x1080 resolution
50x50 pixels for 1280x720 resolution

Overscan

Overscan is when only some of the available content is present on the viewing screen. When designing the layout for TV apps, include a 5% margin in every direction to keep the objects visually stable on the screen and avoid cropping.

Figure 2. Take overscan as consideration

Hints and feedback

This section covers guidelines for hints and feedback, both visual and audio.

Visual feedback for clickable elements on the screen

To keep users focusing on a selectable item, you can highlight the selected state and indicate the on-screen location for users. Design a consistent focus style across all screens in an app, with available variants to enabling differentiation between the various selectable items. This ensures that the focus state is visible and clear for users.
When a clickable element is hovered over or pressed, an obvious transition can help the user to quickly identify the actionable item.
When users need to wait for a period of loading time, display a loading animation (e.g. a spinner) to provide a visual confirmation that there will be a screen transition shortly.

Audio feedback

In addition to visual feedback, provide sound effects to enforce the feedback when users need immediate confirmation. For instance, playing a clicked sound effect can help users to confirm that tapping the "OK" button on the remote control is successful.

App UX guidelines

This section provides some general guidelines when designing TV apps.

Simplicity

The simpler the design, the better. Design TV apps that are easy to navigate and explore for people who are probably relaxing and lying on their sofas.

Focus on the content itself and only provide information and functionality that is totally necessary. Too many functions and details can be distracting.
Make it as easy as possible for people to start watching or entertaining. When an app loads, show recommendations rather than asking users to register and choose preferences.
Design flat rather than deep. Build an app with as few levels as possible. Users may feel lost after several clicks. If it's necessary to delve into deeper levels in an app, ensure that users can easily go back to the index page.

To navigate TV apps, most people use a standard TV remote that has D-pad keys (Up, Right, Down, Left, and Back), a TV remote app on a smartphone, or a game controller.

Ensure all selectable items in the app are accessible using a standard TV remote.
For the content, use a grid-like layout with easily identifiable clickable items.

Privacy

A single TV can be used by different people for differnet reasons. For example, a child can watch cartoons in the morning, a grandfather can watch the news in the afternoon, and the entire family can watch talk shows or films together.

The TV may also be installed in a public place such as a restaurant or bar.

For general use, the user should not need to register or log in.
If the user does log in, the UI should show the current login account.
For advanced features like deleting an account or purchasing items, the app should reconfirm the account owner's password before proceeding.

Notification

Notifications are useful but can be distracting in some situations. Make sure that notifications are meaningful and display them at the right time.

Users should be able to easily dismiss notifications.
Ask users if they want to turn notifications on or off.
If users decide to open a notification, lead them to the correct screen.
Limit how often to display the notification.
Do not show private information in the notification.

Text Inputs

Because standard TV remotes do not have keyboards, text entry can be painful on TV screens.

Avoid the need for the user to input text as much as possible. Provide users with recommendations, lists, and shortcuts to help them find what they want.
Enable autocomplete and search history features to shorten the time to input text.
Defer the need to input text to advanced app features. Allow users to use basic features without any text input.
Keep “Stay logged in” checkboxes selected by default so users do not have to log in every time unless they want to.