Designing for TV - microsoft/TVHelpers GitHub Wiki

###10 Foot UI Users will be interacting with your app from farther away than they typically would be with a desktop app. Unlike on a desktop or mobile device, TV viewers are usually sitting a significant distance from the screen. Television UI is often referred to as "10-foot UI".

In order to design your UI for the 10-foot experience, you'll want to:

  • Use larger buttons
  • Use larger fonts
  • Provide more space between elements

Exercise your app and UI from a distance of 10 feet, paying special attention to readability, visibility, and spacing.

###Overscan Overscan is an area around the four edges of a TV image that is not reliably viewable on all sets, and may be cropped. Overscan is implemented by TV manufacturers and exists for historical and compatibility reasons. To account for overscan, important content in your app should be constrained to fit within the title-safe area. The area outside of the title-safe area can contain a background image or color that fully extends to the edge.


Figure 1. Title Safe Area, Full Screen View

One way to design your UI to handle overscan in fullscreen view is to style the outermost <div> element on your pages to have a left and right margin of at least 100 pixels, and a top and bottom margin of at least 40 pixels.

###Colors Some colors on a television can appear more brilliant than they do on a computer. For example, using a pure bright white is not recommended. When possible, view your proposed color scheme on a variety of television devices to test appearance and suitability.

In general, dark backgrounds with light foreground elements are preferable for TV screen.

###Input TV apps will receive input from a variety of additional sources not common to desktop apps:

  • Gesture
  • Remote Control

###Directional Navigation Your app will need to work well with controllers and remote controls. These devices use an UP, DOWN, LEFT, and RIGHT directional navigation model. Application UI and layout should be designed to support and embrace this navigation model.

When using the TVJS.DirectionalNavigation Library, will automatically handle moving focus between elements in your application. In the rare case that your app needs custom focus management, automatic focus handling can be customized or overridden. See DirectionalNavigation Overview for more information.

###Grid Layout Design your UI using grid-based layouts.

  • Grid tiles (cells) should be aligned, both horizontally and vertically.
  • If you have multiple tile sizes, heights and widths should be evenly divisible by other tiles in the layout (taking into account spacing between tiles), so that they remain aligned.

The following two images show examples of correct and incorrect grid layouts.


Figure 2. Correct Grid Layout. Tiles are aligned, and smaller tiles evenly divide larger tiles.


Figure 3. Incorrect Grid Layout. Tiles are not aligned. Smaller tiles don't evenly divide larger tiles.

The following two images show example tile sizes.


Figure 4. Examples Tile Sizes


Figure 5. Example Tile Sizes (as Images)

Avoid 3D Interfaces
A 3D interface often proves unintuitive.


Figure 6. Avoid 3D or Stacked Layouts

Control and UI Flow Input controls should be perpendicular to the flow of the UI itself. If the user is moving through the UI from top to bottom, for example, input controls encountered in that flow should be controlled by left and right movements. Otherwise, the user gets "stuck" on that control.

The following example shows a bad layout and the resulting problem. The slider controls have the same directional control as the UI flow of the page. When the user navigates down from the Kinect Tuner button, they will get stuck on the Brightness slider. The user would have to continually press down until the slider moved all the way to the bottom, before being able to finally navigate down to the Volume slider.


Figure 7. Poor Layout. Input controls are parallel to UI flow.

The following example shows a better layout, in which control input is perpendicular to the UI flow. The user need only press down once to move from the Brightness slider to the Volume slider. While the focus is on either slider, left and right change the value of the control without changing focus. The entire layout is easy to navigate and control.


Figure 8. Good Layout. Input controls are perpendicular to UI flow.

This same design consideration of perpendicular input controls applies to lists. Don't make the user scroll through an entire list to get to other controls on the page. (An exception might be a "more" action or similar mechanism.)

In the following example, the list scrolls in the same direction as the UI flow of the rest of the page. The user needs to scroll through every list item to navigate to the buttons at the bottom.


Figure 9. Poor List Layout.

The following example shows good list layout. The buttons are to the right of the list, so the user can navigate from the list to the buttons by pressing right.


Figure 10. Good List Layout.

Button Conventions TVs have established a consistent and expected mapping of controller input to app response. To provide the best user experience, your app should follow these conventions.

  • Left Thumbstick Directional navigation.
  • D-pad Directional navigation.
  • A button Select, continue, toggle, act on selection.
  • B button Cancel, go back, dismiss a flyout.
  • Right Thumbstick Typically unused. Avoid use for common functionality, as users don't expect the right thumbstick to perform an action.

Games have more flexibility in button assignment. However, for menu and navigation portions of a game, the above conventions still generally apply.