Tab Bars

In many Apple TV apps, a tab bar across the top of the screen is the primary means of navigation. Below the tab bar is a content area that shows content related to the active tab. A tab bar tells people where they are in an app and makes it easy to navigate elsewhere or initiate an action, such as a search.

When in focus, a tab bar covers the top 140 pixels of your content area. It’s translucent by default, allowing any content beneath to peek through. A tab bar is always positioned at the top of the screen, but quickly slides away when not in focus, providing an unobstructed view of your content.

Apple TV home screen showing Tab Bar navigation

In general, use a tab bar to organize information at the app level. A tab bar is a good way to flatten your information hierarchy and provide access to several peer information categories or modes at once.

Use badging to communicate unobtrusively. You can display a badge—a red oval containing a white number or exclamation point—on a tab to indicate that new information is associated with that view or mode.

Use badging judiciously. Don’t overwhelm people by presenting huge amounts of new or important information.

Avoid having too many tabs. Each additional tab increases the complexity of your app, making it harder to locate information. Aim for tabs with short titles to avoid crowding and causing tabs to fall off the screen when the tab bar is in focus.

Don’t remove or disable a tab when its function is unavailable. If tabs are available in some cases but not in others, your app’s interface becomes unstable and unpredictable. Ensure that all tabs are always enabled, and explain why a tab’s content is unavailable. For example, the Music tab in iTunes shows a screen explaining how to download songs if there are no songs to list.

Match tab bars to your app’s visual style. Apply a tint or adjust opacity to match a tab bar to your app’s color scheme and style.

For developer guidance, see UITabBarController and View Controller Programming Guide for iOS.

Tabs

Stick with short, text-based tab titles. In general, a concisely written title is cleaner and more straightforward than an icon, which can easily be misinterpreted. Give tabs short titles to avoid crowding and pushing them offscreen.

Use meaningful nouns or verbs as tab titles. A title clearly identifies the type of content to expect when a tab is selected. In general, titles should be nouns (such as Music, Movies, and Genres), but in some cases, verbs may be more appropriate (such as Play and Search).


Tables and Collections

Apple TV includes some standard views for organizing and presenting collections of content in a way that’s easy to digest and navigate.

Tables

A table presents data as a scrolling, single-column list of rows that can be divided into sections or groups. Use a table to display large or small amounts of information cleanly and efficiently in the form of a list. Generally speaking, tables are ideal for text-based content, and often appear as a means of navigation on one side of a split view, with related content shown on the opposite side. See Split Views.

Apple TV Table layout

Scale tables for readability. Narrow tables can cause truncation and wrapping, making them hard to read and scan quickly at a distance. Wide tables can also be difficult to read and scan, and can take away space from content.

Begin showing table content quickly. Don’t wait for extensive table content to load before showing something. Fill onscreen rows with textual data immediately and show more complex data—such as images—as it becomes available. This technique gives people useful information right away and increases the perceived responsiveness of your app. In some cases, showing stale, older data may make sense until fresh, new data arrives.

Communicate progress as content loads. If a table’s data takes time to load, show a progress bar or spinning activity indicator to reassure people that your app is still running.

For developer guidance, see UITableViewController.

Table Cells

You can use standard table cell styles to define how content appears in table rows.

Default. An optional image on the left side of the row, followed by a left-aligned title. It’s a good option for displaying items that don’t require supplementary information. For developer guidance, see UITableViewCellStyleDefault.

Subtitle. A left-aligned title on one line and a left-aligned subtitle on the next. This style works well in a table where rows are visually similar. The additional subtitle helps distinguish rows from one another. For developer guidance, see UITableViewCellStyleSubtitle.

Value 1. A left-aligned title with a right-aligned subtitle in a lighter font on the same line. For developer guidance, see UITableViewCellStyleValue1.

Value 2. A right-aligned title, followed by a left-aligned subtitle in a lighter font on the same line. For developer guidance, see UITableViewCellStyleValue2.

All standard table cell styles also allow graphical elements, such as a checkmark or disclosure indicator. Of course, adding these elements decreases the space available for titles and subtitles.

Keep text succinct to avoid clipping. Truncated words and phrases are hard to scan and decipher. Text truncation is automatic in all table cell styles, but it can present more or less of a problem depending on which cell style you use and where truncation occurs.

Test the appearance of rows in a focused state. A table row becomes highlighted and enlarged when in focus. A row’s corners also become rounded, which can affect the appearance of images appearing on the left or right side of the row. Account for this effect appropriately when preparing images, and don’t add your own rounded corner masks.

Consider whether your table really needs to be editable. Deleting and reordering table rows takes longer on Apple TV than it does on iOS, so consider whether it’s worth providing this feature.

Design a custom table cell style for nonstandard table rows. Standard styles are great for use in a variety of common scenarios, but your content may require greater control. It’s better to create a custom table cell style than to significantly alter a standard one. To learn how to create your own cells, see Customizing Cells in Table View Programming Guide for iOS.

For developer guidance, see UITableViewCell.

Collections

A collection manages an ordered set of content, such as a set of photos, and presents it in a customizable and highly visual layout. Because a collection doesn’t enforce a strictly linear format, it’s particularly well-suited to displaying items that vary in size. Generally speaking, collections are ideal for showing off image-based content.

Apple TV screen showing a Collection

Avoid creating radical new designs when a standard row or grid layout is sufficient. A collection should enhance the user experience, not become the center of attention.

Make it easy to focus on an item. If it’s too difficult to get to an item in your collection, people will get frustrated and lose interest before reaching the content they want. Use adequate padding around images to keep focus clear and prevent overlapping of content.

Consider using a table view instead of a collection for text. On a TV screen, it’s generally simpler and more efficient to view and digest textual information when it’s displayed in a scrollable list.

If your app is content-rich and requires a standard grid layout to present collections of content, consider using a template. See Layout Templates and Apple TV Markup Language Reference.

For developer guidance, see UICollectionViewController.

Split Views

A split view manages the presentation of two side-by-side panes of content, each of which can contain any variety of elements, including tables, collections, images, and custom views. Use a split view to show persistent, focusable content in the primary pane, and related information in the secondary pane. Split views are often used with filterable content; a list of filter categories appears in the primary pane, and the filtered results for the selected category are shown in the secondary pane.

Apple TV screen showing Split View layout

Choose a split-view layout that works well with your content. By default, a split view devotes a third of the screen to the primary pane and two-thirds to the secondary pane. The screen can also be split into halves. Choose an appropriate split based on your content, and make sure the panes don’t look unbalanced.

Persistently highlight the active selection in the primary pane. Although the secondary pane’s content can change, it should always correspond to a clearly identifiable selection in the primary pane. This helps people understand the relationship between the panes.

Show a single title per split view. Multiple titles onscreen make it hard to figure out the current context. Instead, show a single title that provides a frame of reference for both sides of the view.

When the secondary view displays a collection of content, consider using a centered title. When the secondary view contains important content, consider placing the title above the primary view so the content has more room.

For developer guidance, see UISplitViewController.


If necessary, your app can request text-based information in order to perform searches, log into services, and more. Just be mindful that, unless a physical keyboard is connected, text entry can be a tedious task on Apple TV.

Text Fields

A text field is a fixed-height, single-line field with rounded corners that automatically brings up a keyboard screen when the user clicks in it. Use a text field to request a small amount of information, such as an email address.

Apple TV screen showing a Text Field and Keyboard Screen

Minimize text entry in your app. Entering long passages of text or filling out numerous text fields is time-consuming on an Apple TV. Minimize text input and consider gathering information more efficiently, such as with buttons.

Show a hint in the text field to help communicate purpose. A text field can contain placeholder text—such as "Email" or "Password"—when there’s no other text in the field. Don’t use a separate label to describe a text field when placeholder text is sufficient. When dictation is enabled, a text field on a modal keyboard screen contains a dictation prompt and the field’s placeholder text appears at the top of the screen instead.

Show the email address keyboard when appropriate. If your app asks for an email address, always display the email address keyboard to ease entry and provide access to recently entered addresses. See UIKeyboardTypeEmailAddress in UITextInputTraits.

Use secure text fields when appropriate. Always use a secure text field when your app asks for sensitive data, such as a password.

For developer guidance, see UITextField.

Keyboards

A linear keyboard screen appears automatically whenever the user clicks a text field with the Siri Remote. This screen is optimized for the touch experience, letting people enter text with quick, fluid motions.

Apple TV screen showing a Linear Keyboard screen

A grid keyboard screen appears with devices other than the Siri Remote, and the layout of content automatically adapts to it.

Specify an appropriate keyboard type for the kind of content being collected. Apple TV provides several different keyboard types, each designed to facilitate a specific kind of input. Certain ones make it easier to enter a name, email address, or number. For a list of available keyboard types, see UIKeyboardType in UITextInputTraits. To learn about managing the keyboard in your app, see Managing the Keyboard in Text Programming Guide for iOS.

Use the optional accessory view when appropriate. Keyboard screens include an optional accessory view. Use this area to provide context and additional information about the data you’re collecting. For example, you might add your app logo and a label such as "Please enter your email address to log in to your MyApp account." For developer guidance, see Custom Views for Data Input in Text Programming Guide for iOS.

Search

A search screen is a specialized keyboard screen for inputting search text. On this screen, search results appear beneath the keyboard in a fully customizable view.

Customizable search screen on Apple TV

Allow for recent searches. People frequently repeat searches on Apple TV. Minimize text reentry by listing popular or recent searches in the results area under the keyboard before the user starts typing.

Simplify and limit search results. Don’t provide a lengthy list of search results that requires lots of scrolling. Make the information easy to navigate by, for example, splitting it into columns, or by presenting a smaller subset of results that most closely match the search performed.

Consider letting people filter search results. If appropriate, implement a scope bar in the search results content area to help people quickly and easily filter search results.

For developer guidance, see UISearchController.


Buttons

Buttons initiate app-specific actions, and may contain text or an icon.

Apple TV screen showing Sign In button

In general, use either text or an icon to convey a button’s action. There’s limited space on a button. To prevent crowding and visual complexity, try not to combine text and an icon.

Clearly label and confirm destructive actions. If clicking a button results in a destructive action, such as deleting something, make sure its purpose is crystal clear. Use a descriptive label, such as Delete, or an appropriate icon. It’s also good practice to display an alert asking for confirmation before performing a destructive action.

Don’t include back buttons. People know that pressing Menu on the remote takes them back to the previous screen or the main menu. Unless your app has a legitimate reason to reproduce this functionality with a back button, don’t clutter your interface with one.

Use a Cancel button for confirmation and guidance only. A Cancel button is worth including if it provides clarity, such as instilling confidence a purchase will be canceled or exiting out of a modal dialog without saving any changes that may have been made. In most cases, pressing Menu on the remote should produce the same result as clicking the Cancel button.

For developer guidance, see UIButton.

Button Icons

Use simple, recognizable images as button icons. Icons with too much detail are difficult to interpret on a TV screen. Keep icons simple enough to communicate meaning. When possible, use icons that are commonly associated with an action, such as a magnifying glass for performing a search.

Use accessibility labels to allow audible descriptions of button icons. Accessibility labels allow VoiceOver to describe icons to the visually impaired. To learn about VoiceOver, see tvOS Accessibility and Accessibility Programming Guide for iOS.

Button Text

If appropriate, show descriptive text beneath an icon button. An icon should generally be sufficient for conveying meaning. However, if additional text provides useful information or context, put it below the button.

Use a verb or a verb phrase to describe a button’s action. An action-specific title denotes interactivity and clearly defines what happens when the button is clicked.

Use title-style capitalization. Capitalize every word of a button title except articles, coordinating conjunctions, and prepositions of four letters or less.

Keep button text short and to the point. Lengthy text may be truncated, making it difficult to read.


You can add a navigation bar to the top of a view to display a title, navigation buttons, and other interface elements. The Settings app uses a navigation bar to show a title that provides context, letting you know where you are in the app at all times.

Apple TV screen showing Navigation Bar

Be aware of transparency. A navigation bar is transparent by default, so any content scrolling beneath is clearly visible. Make sure interface elements on the bar don’t appear to collide with the content below. Consider fading the content as it scrolls under the bar to visually separate it from the elements above.

For developer guidance, see UINavigationBar.


Page Controls

A page control shows the position of the current page in a flat list of pages. It appears as a series of small indicator dots, representing the available pages in the order they were opened. A solid dot denotes the current page. Visually, these dots are always equidistant, and are clipped if too many appear onscreen.

A page control itself is a noninteractive element intended for informational purposes only. It doesn’t actually serve as a means of navigation—for example, you can’t click a dot to go to a specific page.

Apple TV Photos apps with paging controls

Use page controls on collections of full-screen pages. A page control is designed to operate in a full-screen environment where multiple content-rich pages are peers in the page hierarchy. Inclusion of additional controls makes it difficult to maintain focus while moving between pages.

Don’t display too many pages. More than about 10 dots are hard to count at a glance, and more than about 20 open pages are time-consuming to visit in sequence. If your app needs to display more than 20 pages as peers, consider using a different arrangement—such as a grid—that enables nonsequential navigation.

For developer guidance, see UIPageControl.


Progress Indicators

Don’t make people sit around staring at a static screen waiting for your app to load content or perform lengthy data processing operations. Use activity indicators and progress bars to let people know your app isn’t stalled and to give them some idea of how long they’ll be waiting.

See also Loading Content.

Activity Indicators

An activity indicator spins while an unquantifiable task, such as loading or synchronizing complex data, is performed. It disappears when the task completes.

Apple TV screen showing an Activity Indicator

Favor progress bars over activity indicators. If activity is quantifiable, use a progress bar instead of an activity indicator so the user can better gauge what’s happening and how long it will take.

Keep activity indicators moving. People associate a stationary activity indicator with a stalled process. Keep it spinning so they know something’s happening.

If it’s helpful, provide useful information while waiting for a task to complete. Include a text label above an activity indicator to give extra context. Avoid vague terms like Loading or Authenticating because they don’t usually add any value.

For developer guidance, see UIActivityIndicatorView.

Progress Bars

A progress bar includes a track that fills from left to right to show the progression of a task with a known duration.

Always report progress accurately. Don’t display inaccurate progress information just to make your app appear busy. Only use progress bars for tasks that are quantifiable. Otherwise, use an activity indicator.

Use progress bars for tasks with a well-defined duration. Progress bars are great for showing the status of a task, especially when it helps convey how much longer the task needs to complete.

For developer guidance, see UIProgressView.


Segmented Controls

A segmented control is a linear set of segments, each of which functions as a button for displaying a different view. A segmented control contains two or more proportionally sized segments containing titles or icons. Use a segmented control to offer choices that are closely related but mutually exclusive, such as playlists and albums.

Don’t put other focusable elements next to segmented controls. Segments become selected when focus moves to them, not when they’re clicked. Carefully consider where you position a segmented control relative to other interface elements. If other focusable elements are too close, people might accidentally focus on them when attempting to switch between segments.

Consider split views on screens that perform content filtering. It’s easy to navigate back and forth between content and filtering options on a split view. Depending on its placement, a segmented control may not be as easy to access.

Use no more than seven segments. More than about seven segments are hard to parse at a glance and are time-consuming to navigate.

Try to keep segment content size consistent. Because all segments have equal width, it doesn’t look great if content fills some segments but not others.

Avoid mixing text and images in a segmented control. Although individual segments can contain text or images, mixing the two in a single control can lead to a disconnected and confusing interface.

Position content gracefully in customized segmented controls. If you change the background appearance of a segmented control, make sure content still looks good and doesn’t appear misaligned.

For developer guidance, see UISegmentedControl.

Segment Icons

Use simple, recognizable images for segment icons. Icons with too much detail are difficult to interpret on a TV screen. Keep icons simple enough to convey meaning. When possible, use common icons that are easily recognizable and intuitive.

Segment Text

Use short, meaningful nouns as segment titles. A segment’s title clearly identifies the type of content to expect when the segment is selected. In general, titles should be nouns (such as Library or Playlists).

Use title-style capitalization. Capitalize every word of a segment’s text except articles, coordinating conjunctions, and prepositions of four or fewer letters.

Keep text short and focused. Overly long text gets truncated, making it difficult to understand.


Alerts

Alert screens convey important information related to the state of your app or the device, and often request feedback. An alert screen consists of a required title, an optional message, and one or more buttons. Aside from these configurable elements, the visual appearance of an alert is static and can’t be customized.

Apple TV screen showing an Alert

Minimize alerts. Alerts disrupt the user experience and should only be used in important situations like confirming purchases and destructive actions (such as deletions), or notifying people about problems. The infrequency of alerts helps ensure that people take them seriously. Ensure that each alert offers critical information and useful choices.

Avoid showing an alert at launch time. People don't expect to see a jarring alert message the moment they open your app. If you need to inform people about new or important information, design your interface so the information is discoverable. If there's a problem, such as no network connection, consider alternatives. For example, you could show cached or placeholder data and a noninvasive label denoting the problem.

For developer guidance, see UIAlertController.

Alert Titles and Messages

Write short, descriptive, multiword alert titles. The less text people have to read onscreen, the better. Try to craft a title that avoids adding extra text as a message. Because single-word titles, such as Watch or Rent, rarely provide useful information, consider asking a question or using short sentences. Whenever possible, keep titles to a single line. Use sentence-style capitalization and appropriate punctuation for complete sentences. Don’t use ending punctuation for sentence fragments.

If you must provide a message, write short, complete sentences. Try to keep messages short enough to fit on one or two lines to prevent scrolling. Use sentence-style capitalization and appropriate punctuation.

Avoid sounding accusatory, judgmental, or insulting. People know that alerts notify them about problems and dangerous situations. As long as you use a friendly tone, it’s better to be negative and direct than positive and oblique. Avoid pronouns such as you, your, me, and my, which are sometimes interpreted as insulting or patronizing.

Avoid explaining the alert buttons. If your alert text and button titles are clear, there should be no need to explain what the buttons do.

Alert Buttons

Generally, use two-button alerts. Two-buttons provide an easy choice between two alternatives. Single-button alerts inform, but give no control over the situation. Alerts with three or more buttons create complexity.

Give alert buttons succinct, logical titles. The best button titles consist of one or two words that describe the result of selecting the button. As with all button titles, use title-style capitalization and no ending punctuation. To the extent possible, use verbs and verb phrases that relate directly to the alert title and message—for example, View All, Reply, or Ignore. Use OK for simple acceptance. Avoid using Yes or No.

Label cancel buttons appropriately. A button that cancels an alert’s action should always be labeled Cancel.

Identify destructive buttons. If an alert button results in a destructive action, such as deleting content, set the button’s style to Destructive so that it gets appropriate formatting by the system. For developer guidance, see the UIAlertActionStyleDestructive constant in UIAlertAction. Additionally, provide a Cancel button so people can safely opt out of the destructive action. Make the Cancel button bold by marking it as the default button.

Allow the remote to cancel alerts. Pressing Menu on the remote while an alert is visible should produce the same effect as clicking the cancellation button—that is, the alert is dismissed without performing any action. If your alert doesn’t have a cancellation button, consider implementing a cancel action in your code so that Menu can still be used to exit.