DirectionalNavigation Overview

Keyboard navigation in desktop app UI is often a one-dimensional, linear experience. Users tab from one control to the next, with a tab order defined explicitly by the UI designer. Additionally, especially for touch and mouse-based apps, directional navigation is sometimes an afterthought and not a good experience for the user.

In contrast, for TV apps directional navigation is very important. It is two-dimensional (up, down, left, right) and is often dynamic. Users will be navigating around your UI with controllers and remote controls. You want to make that experience as smooth and intuitive as possible.

The richness of modern UI and the two-dimensional nature of the TV can make it difficult and tedious to determine and specify all of the directional navigation targets for each UI element in your app. A page with only 15 elements would require you to determine, specify, and track 60 different navigation targets for that page alone. And when content is dynamic or moves to different locations on the screen at runtime, determining and specifying proper focus navigation can become extremely difficult.

Automatic Focus Handling

Directional navigation is a feature that provides automatic two-dimensional navigation within the pages of your TV app. Apps won't need to trap and handle navigation within their pages, or to explicitly specify all of the valid focus targets for each element in the UI. With automatic focus handling, users can navigate around your pages in an intuitive and robust way.

When users enter directional input to move from one element to another, the automatic focus algorithm looks at the set of potential focus targets, determines the next element to move to, and then automatically sets the focus to that element. To determine the element to move to, the algorithm combines directional input, past focus history, and the physical layout of UI elements on the page.

Automatic focus is designed for and works best with grid-based layouts that are aligned and do not overlap. For best results, create UI that follows the recommendations in Designing for TV. Automatic focus does not work well for layouts that have overlapping focusable elements (for example, overlapping buttons).