TV Apps Design for Android TV
The Android TV user interface provides the launch pad for your app’s big screen experience.
This page provides a quick overview of how your app appears and how users can interact with it on Android TV. For more information about how to design for Android TV, see the Android TV design guidelines.
Note: Your app must meet specific design requirements to appear as an Android TV app on Google Play. For information about how to publish your TV apps in Google Play, see Distributing to Android TV.
A large screen UX
Due to the viewing distance of the TV, users may not be able to process as much information on TV as they would on a computer or mobile device. Limit the amount of text and reading on TV screens.
Home Screen
The home screen is the start of the user experience. It provides a rich and cinematic overview of apps and content, including search, recommendations, and access to settings.
See the Material Design Guidlines for more about designing the home screen.
Navigation, Focus and Selection
Users typically navigate TV devices using a directional pad (D-Pad). This type of controller limits movement to up, down, left, and right. As you design your app for TV, make sure your user interface has clear paths for two-axis navigation by aligning objects in lists and grids.
A key aspect of making your application work well with a D-pad controller is to make sure that there is always an object that is obviously in focus. Your app must clearly indicate what object is focused, so users can easily see what action they can take. Use scale, shadow brightness, opacity, animation or a combination of these attributes to help users see a focused object.
Designing for TV
TV appropriate apps
Apps best suited for TV offer immersive entertainment experiences. Apps that provide learning, playing, communicating, and content consumption are good examples, but this isn’t a comprehensive list.
TV apps should:
- Involve easy setup
- Use limited screens
- Share social context
- Do a few key things really well
TV apps should not:
- Be text-heavy
- Emphasize administrative tasks
Information density
Due to the viewing distance of the TV, users may not be able to process as much information on TV as they would on a computer or mobile device. Limit the amount of text and reading on TV screens.
Do.
Show the most important and necessary information by default. Use scrolling or progressive disclosure to reveal more.
Don’t.
Avoid content overload. Don’t present all the information at once.
Navigation
Navigating Android TV should be easy. Designing apps for Android TV requires rethinking user input methods, as users navigate an app using a remote controller instead of a touchscreen.
Controllers
Android TV controllers can vary, many controllers include the directional pad (D-pad), select, play/pause home, back and microphone buttons.
Directional pad
The primary navigation method on Android TV is through the directional pad (called a D-pad). This pad limits movement to up, down, left, and right directional hardware buttons. The D-pad transfers focus from one object to the nearest object in the direction of the button pressed.
D-Pad navigation is less intuitive than a touch screen, so testing is important to providing a good user experience:
- Can users easily navigate to all objects in each screen?
- Is movement between objects straightforward and predictable?
Focus
Always have an object in focus. Text, buttons, cards, and some other elements can be focused. Clearly indicate which control is in focus or selected.
Visibility
Indicate which element is in focus using appropriate visual cues. The default Android TV focus uses scale, shadow, brightness, and opacity to draw attention to itself against elements not in focus.
Do.
Use contrast to differentiate the item in focus from other items.
Don’t.
Don’t make the focus difficult to recognize.
Feedback
Give user visual feedback on focus changes by displaying a transition between focused and non-focused states.
Android TV sounds provide audio feedback when focus is changed, and an action is selected.
Structure
Paths
Users should be able to navigate your UI with clear direction. If there isn’t a straight path to get to a control, consider relocating it.
Do.
Place controls, like the search action, in locations that don’t overlap with other clickable elements.
Don’t.
Avoid layouts that contain controls in hard-to-reach places. Reaching the search action is not easy to manage with the D-pad.
Axes
Design your layout so it takes advantage of both horizontal and vertical axes. Give each direction a specific function, making it fast to navigate large hierarchies.
Do.
Categories can be traversed on the vertical axis, and items within each category can be browsed on the horizontal axis.
Don’t.
Avoid complex and nested layout hierarchy.
Leave a Reply
Want to join the discussion?Feel free to contribute!