Focus and Selection

On iOS devices, people interact with the user interface by tapping or swiping directly on the touchscreen. Apple TV doesn’t have a touchscreen. Instead, a remote is used to interact indirectly with elements onscreen from across the room. This interaction is based on a focus model. By pressing buttons and using gestures on the remote, people move focus from element to element, stop on a specific one, and click to access content or initiate action. As focus changes, subtle animations and the parallax effect produce a feeling of depth that clearly identifies the item that’s currently in focus.

Use standard interface elements to get motion effects. If your app uses UIKit and the focus API to implement its user interface, the motion and visual effects of the focus model apply to your interface elements. This makes your app feel native to the platform and helps reduce friction as people move through your interface. When people use the Siri Remote with your app, they’ll find transitioning between focusable elements fluid and intuitive.

Move focus in the expected direction. On Apple TV, almost everything uses indirect manipulation—gestures move focus between objects, and the system scrolls the interface to keep focused items visible. If your app implements indirect manipulation, make sure focus moves in the direction of the gesture. If someone taps or swipes right on the remote, for example, focus should move right, meaning content may move left. If someone taps or swipes up, focus should move up. Full-screen elements like photos should use direct manipulation instead—gestures move objects, rather than focus. Swiping right, for example, should move the photo from left to right.

Use the focus model when presenting a fixed number of options. The focus model is designed to make selection clear and easy. Use it for buttons, menus, media selection, and whenever clear choices are presented in your app.

Example of a focused item

Make the focused item obvious. Because people select and manipulate elements onscreen from afar, it’s crucial to make sure they always know which item is in focus. Generally, the system does this automatically if you’re using interface elements from UIKit. If you implement your own focus model, make sure the focused item stands out. In collections of image-based assets, for example, you can show a label or change the label's color to identify the focused item. In a game, you can animate the focused item and play a sound when focus changes.

Use parallax to make focused items even more responsive to user interaction. Small, circular motions on the remote produce gentle, real-time movement of the focused item. Feedback like this enhances the perception of connection to the content, and helps reinforce what’s in focus. The parallax effect that’s built into UIKit uses layered images to give focused items a sense of vitality. Use parallax to create an even more immersive and interactive experience. To learn more, see Focus and Parallax and Layered Images.

Create focusable elements that are comfortable sizes. Larger items with adequate spacing are easier to navigate and select than smaller ones, and are easier to identify for users with visual impairments.

Design interface elements that look great in focused and unfocused states. On Apple TV, focusing on an item often increases the scale of the item slightly. When designing your interface, think about the unfocused state as well as the focused state of an item. Supply assets for the larger, focused size to ensure they always look sharp. See image sizing guidelines in Icons and Images.

Maintain fluidity when focus changes. If an item changes color or has a subtle animation when it comes into focus, make it fade back naturally to the unfocused state when focus changes, without making the transition jarring.

Don't display a cursor. People expect to navigate fixed numbers of items by changing focus, not by trying to drag a tiny cursor around a huge screen. While free-form movement might make sense during gameplay, such as when looking for a hidden object or flying a plane, the focus model should be used when navigating menus and most other interface elements. If a cursor is required for your app, make sure it’s highly visible and feels like it's a part of your app. For example, a flight simulator might display crosshairs to aid with orientation.

Design for different focusable item states. On Apple TV, focusable items can have up to five different states, each of which should appear visually distinct.

State Description
Unfocused The user isn't currently interacting with the item, but can bring the item into focus. Unfocused items appear less prominent than focused items.
Focused The user is currently interacting with the item. The item visually stands out from the other content on screen through elevation to the foreground, illumination, and animation in response to subtle finger movements on the remote's touch surface.
Highlighted A quick change in appearance denoting that the focused item was clicked. As a user clicks a button that's in focus, for example, the button may briefly invert its colors and animate before returning to its original appearance.
Selected Indicates that the item—whether focused or unfocused—was selected or activated in some way. For example, an app might include a heart-shaped button for favoriting a photo. This button may appear blue when selected as a favorite, but gray when deselected.
Disabled The item visually appears inactive, and can’t be brought into focus or clicked.

To learn more about using focus in your app, see App Programming Guide for tvOS.