ViXi TV | Branded Smart TV apps for Samsung, LG, Android TV, ROKU, VEWD, Amazon Fire TV

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

Simple navigation

TV should provide the shortest possible path to content.

Place the fewest screens possible between the viewer and content. When screens are necessary, they are consistent and simple to operate with an input device.

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?
Supported controllers with various directional pads
Select buttonThe select button selects an item focused on-screen.

Home buttonThe home button takes the user to the system Home screen.

Back buttonThe back button gives viewers a way to return to the previous view.

Microphone buttonThe microphone button invokes a search event.

Transport buttonsTransport buttons may include: play/pause, fast-forward, rewind, next, previous, stop, and record. They should control your current activity, if the action selected is supported.

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.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published.