People tend to be unaware of an app’s navigation until it doesn’t meet their expectations. Your job is to implement navigation that supports the structure and purpose of your app without calling attention to itself. Navigation should feel natural and familiar, without dominating the user interface or diverting attention from content.
On Apple TV, the user typically navigates by moving through stacked screens of content. Each screen may present entry points to other screens, and provides a way—through the remote—to return to the previous screen or main menu. Generally, users move between screens by using standard interface elements such as tab bars, table views, collection views, and split views.
Make it fast and easy to get to content. People want to access content quickly, using minimal taps, clicks, and swipes. Simplify your information structure, and organize it in a way that requires the fewest screens.
Use touch gestures to create fluidity. Make it easy to move through focusable items with minimum friction and as few gestures as possible.
Take focus into consideration. Navigation on Apple TV isn’t always a single tap away. Because of the TV’s focus-based selection model, the user must move the remote’s focus to an interface element before interacting with it. Users may get frustrated if your navigation scheme requires too many gestures to achieve their goal. Follow guidelines in Focus and Selection.
Implement backward navigation through the Menu button. To create an easy and predictable navigation experience, let users navigate backward with the remote’s Menu button. During gameplay, pressing Menu should return to the game main menu or toggle an in-game menu that lets you return to the game main menu. Pressing Menu at the top level of an app or game should always exit to the Apple TV Home screen.
Don’t display a back button. People know that pressing Menu takes them back, so don’t waste space in your app with an extra control that duplicates this behavior.
If necessary, display a Cancel button. If the only visible button purchases or deletes something, it's good practice to include a Cancel button that returns to the previous screen.
Show a collection of content on a single screen, rather than splitting it up. Gestures on the remote make it easy to move quickly through a screen with lots of content. If you have a collection of focusable elements, consider showing it on a single screen to keep navigation simple.
Use standard navigation components. If your app uses UIKit to implement its user interface, use standard navigation controls such as page controls, tab bars, segmented controls, table views, collection views, and split views. People are already familiar with these controls, and will intuitively know how to get around your app. Learn about these navigation components in Interface Elements.
Favor horizontal navigation of content. Swiping to the side is easier and more natural than swiping up and down. Consider this when choosing or designing layouts for your content.
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.
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.
|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.
First Launch Experience
Launch time is your first opportunity to onboard new users and reconnect with returning ones. Design a launch experience that’s educational and fun, but doesn't get in the way.
Stick to the essentials in tutorials. It’s fine to provide guidance for beginners, but education isn’t a substitute for great app design. First and foremost, make your app intuitive. If too much guidance is needed, revisit the design of your app.
Get to the action quickly. People look to Apple TV for entertainment. Avoid showing a splash screen, menus, and instructions that make it take longer to reach content. Instead, let people jump right to the action. If your app needs tutorials or intro sequences, provide a way to skip them and don't show them to returning users.
Make learning fun and discoverable. Learning by doing is a lot more fun and effective than reading a list of instructions. Use animation and interactivity to teach gradually and in context.
Anticipate the need for help. Proactively look for times when people might be stuck. A game, for example, could casually show useful tips when paused or when a character isn’t advancing. If you do implement tutorials, let people replay them in case they miss something the first time.
Provide instructions when controls vary from the norm. If your app uses nonstandard controls, such as holding the remote in landscape mode, orient people quickly. Whenever possible, use animation or graphics to educate instead of lengthy screens of text.
Use relevant and consistent language and imagery. Always make sure guidance is appropriate for the current context. If someone’s using the Siri Remote, for example, don’t show game controller tips or graphics. Use language that’s consistent with the platform. You tap, click, and swipe the touch surface of the remote. You press buttons on the remote or game controller.
A blank or static screen displayed while content loads can make it seem like your app is frozen, resulting in confusion and frustration, and potentially causing people to leave your app.
Make it clear when loading is occurring. At a minimum, show an activity spinner that denotes something is happening. Even better, display explicit progress so users can gauge how long they’ll be waiting.
Educate or entertain to mask loading time. Consider showing hints about gameplay, entertaining video sequences, or interesting placeholder graphics.
Customize loading screens. Although standard progress indicators are usually OK, they can sometimes feel out of context. Consider designing a more immersive experience through custom animations and elements that match the style of your app or game.
Show screens of content as soon as possible. Don’t make people wait for content to load before seeing the screen they're expecting. Show the screen immediately, and use placeholder text, graphics, or animations to identify where content isn't available yet. Replace these placeholder elements as the content loads. Whenever possible, preload upcoming content in the background, such as while an animation is playing or the user is navigating a level or menu.
See also Progress Indicators.
Apple TV is designed for entertainment, not data entry. Ask people to authenticate only in exchange for value, such as personalizing the experience, accessing additional features, purchasing content, or synchronizing data. If your app requires authentication, keep the sign-in process quick, easy, and unobtrusive, so it doesn’t detract from the enjoyment of your app.
Delay sign-in as long as possible. People often abandon apps when they are forced to sign in before doing anything useful. Give them a chance to fall in love with your app before making a commitment to it. In a shopping app, let users browse your merchandise immediately upon launch and require sign-in only when they're ready to make a purchase. In a media streaming app, let them explore your content and see what you have to offer before signing in to play something.
Minimize data entry. Most people interact with Apple TV using a remote, not a keyboard. Don't make data entry feel like a chore; collect the minimum amount of information necessary. If you need to gather lots of information, tell users to visit a website from another device. When asking for an email address, show the email keyboard screen, which includes a list of recently entered addresses.
Explain the benefits of authentication and how to sign up for your service. If your app requires authentication, display a brief, friendly explanation on the login screen that describes the reasons for the requirement and its benefits. Also, remember that not everyone using your app has an account from the start. Make sure you explain how to get one, or provide a simple in-app way to sign up.
Keep multiple profile support intuitive. Because Apple TV is a communal device, your app won’t always know who’s holding the remote. Default to the most recently used profile at launch, but clearly identify who's logged in and make it easy to switch to a different account.
Apple TV is packed with accessibility features for users with vision loss, hearing loss, and other disabilities. Most UIKit-based apps can be made accessible with very little effort, allowing an equally engaging experience for all.
Provide alternative text labels for images, icons, and interface elements. Alternative text labels describe what's onscreen but aren’t actually visible onscreen. VoiceOver speaks this text, making navigation easier for people with visual impairments.
Respond to accessibility preferences. If your app uses UIKit to implement its user interface, text and interface elements automatically adapt to certain accessibility preferences, such as bold text. Your app should also check and respond to accessibility preferences when appropriate, such as if the option to reduce motion is enabled. Apps implementing custom fonts should attempt to match the accessibility behavior of the system fonts.
Test your app with accessibility features. In addition to text and motion changes, accessibility options can change contrast and reduce transparency. Enable these settings and observe how your app will look and behave for people who enable these features.
Include closed captions and audio descriptions. Closed captions allow the deaf and hard-of-hearing to perceive spoken dialogue and other audible content in videos. Audio descriptions provide spoken narration of important video content for the visually impaired.
Apple TV delivers a cinematic living room experience that’s shared by family members of all ages.
Respect parental controls. Keep in mind that many families use parental controls to restrict explicit content and content based on specific rating levels. Adhere to these restrictions when appropriate. For developer guidance, see the Respecting Restrictions section of App Programming Guide for iOS.
Apps can display a small red oval containing a white number on their app icon to indicate when new and important information is available.
Make badging intuitive. People should know why your app icon is badged and how to find the related information when they open your app.
Minimize badging. Don’t overwhelm users by connecting badging with a huge amount of information that changes frequently. Instead, use badging for focused, essential information that requires attention and atypical content changes that are highly likely to be of interest.
Draw attention to important information inside your app too. If you rely solely on app icon badging to highlight information, you run the risk of people missing it. Make sure critical information is also clearly presented inside your app.
Avoid using alerts in conjunction with badging. Even when new or important information is available, users don't want to see an alert the moment they open your app. Instead, focus on making the information discoverable.
Keep badges up to date. Update your app’s badge as soon as the corresponding information is read. You don’t want people to think new or important information is available, only to find that they’ve already seen it.
TV App Integration
The TV app provides global access to favorite, recently played, and recommended movies and television shows from across the system. Use this guidance to offer users a highly convenient and consistent entertainment experience.
Beginning and Resuming Playback
The TV app automatically opens your app and sends it a notification when the user initiates content playback within your app.
Ensure a smooth transition to your app. The TV app fades to black when transitioning to your app and doesn’t show your app’s launch screen. Your app should maintain visual continuity with this transition by immediately presenting its own black screen before starting to play or resume content.
Show the expected content immediately. The user expects the chosen content to begin playing as soon as the transition to your app is complete. Jump right from your app’s black screen into content. Avoid presenting splash screens, detail screens, intro animations, or any other barriers that make it take longer to reach content. This is especially important when resuming playback.
Don’t ask whether the user wants to resume playback. If playback can be resumed, it should automatically do so without prompting for confirmation.
Make sure content plays for the correct user. If your app supports multiple user profiles, the TV app can specify a profile when issuing a playback request. Your app should automatically switch to this profile before starting playback. If a playback request doesn’t specify a profile, ask the user to choose one before playback begins so this information can be provided in the future.
If loading takes more than two seconds, consider showing a single, black loading screen with a centered activity spinner and no surrounding content.
Avoid loading screens whenever possible. A loading screen is unnecessary if your content loads quickly.
Start playback as soon as possible. If a loading screen is needed, it should be visible only until enough content has loaded for playback to begin. Continue loading remaining content in the background.
Design black loading screens. Loading screens may appear during the transition to playing content. They should appear black so they blend with the fade-to-black functionality of the TV app.
Minimize content on loading screens. If you must include branding or imagery on a loading screen, do so minimally and in a way that maintains the black background and moves seamlessly to playback.
Pressing Menu on the remote exits playback, but the user remains in your app rather than immediately returning to the TV app. This experience shouldn’t cause the user to become disoriented.
Show a contextually relevant screen. When exiting playback, display a detail screen for the content the user was just watching and include an option to resume playback. If a detail screen isn’t available, show a menu that includes the content the user was just watching or your app’s main menu.
Be prepared for an immediate exit. Prepare an exit screen as soon as possible after receiving a playback notification so the user sees it even if they exit immediately after playback begins.
Offer a streamlined path back to the TV app. The user should never need to press the Menu button on the remote more than three times to return to the TV app. The first Menu button press should exit playback and display a contextually relevant screen. The second Menu button press should display your app’s main menu or exit your app. The third Menu button press, if needed, should exit your app. Once your app exits, the system automatically returns the user to the TV app.
Many popular TV providers allow users to sign in to their accounts at the system level, eliminating the need to authenticate on an app-by-app basis. If your app requires TV provider authentication, use this capability to provide the most efficient onboarding experience.
Avoid displaying a sign-out option when the user is signed in at the system level. If your app must include a sign out option, invoking it should direct the user to Settings > Accounts > TV Provider to sign out of their account.
Never instruct users to sign out by adjusting privacy controls. The TV provider controls in Settings > General > Privacy aren’t a sign-out mechanism. These settings let users manage the apps that can access their TV provider account.