Focus and Selection

On Apple TV, people use the remote to interact indirectly with onscreen elements 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.

Provide a great focus experience. On Apple TV, focus is the element that unites the remote and viewing experiences. When you use focus correctly, you give people a tightly integrated experience that feels immediate and immersive.

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.

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.

Watch Aquaman Aquaman is available on the Apple TV app. Aquaman © 2018 Warner Bros. Entertainment Inc. AQUAMAN and all related characters and elements are trademarks of DC Comics. All rights reserved.

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 people with visual disabilities.

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 pointer. People expect to navigate fixed numbers of items by changing focus, not by trying to drag a tiny pointer 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 pointer 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.

Image of a button. Because the button is unfocused, it displays a white background and black content and it appears very close to the surface of the background. Image of a button. Because the button is focused, it appears larger and farther away from the surface of the background. Image of a button. Because the button is highlighted, it appears a little farther away from the surface of the background, but retains its original size. Image of a button. Because the button is selected, it appears very close the surface of the background, and retains its original size, but displays a dark background and white content. Image of a button. Because the button is disabled, it appears to be on the surface of the background, and retains its original size, but displays a light gray background and darker gray content.

State Description
Unfocused The viewer isn't currently interacting with the item, but can bring the item into focus. Unfocused items appear less prominent than focused items.
Focused The viewer 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 viewer 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.