Getting Started with Apple TV Human Interface Guidelines

Apple recently introduced the new tvOS for Apple TV along the Human Interface Guidelines (HIG) for producing great applications on this platform. HIGs contain recommendations and best practices for designing and developing beautiful, consistent experiences for users.

To help you get started with developing apps for tvOS, we’ve pulled out and summarized the most important principles in this HIG following the same order outlined by Apple. You should still read the complete Apple TV HIG to truly understand how to approach this new and exciting platform, though.

Overview

Primary Tenets

• Think carefully about user interaction. There’s an additional layer between users and the content on screen.
• Consider the user’s distance from the screen and make focus obvious. Read up on the principles of 10-foot user interface design.
• Create a shared experience. TVs are communal, so think about a group of people using your app.

Additional Considerations

• Apple TV uses a focus model for navigation. The remote is used to move between interface elements, and a click is used to select it.
• Use parallax and shadows for focused items because of the distance between the user and the TV.Big shadows are easier to see when focused at a distance. Apple released a utility called Parallax Previewer to preview layered app icons or layered images as they would appear on Apple TV.
• Design your apps around a grid layout with horizontal navigation and subtle animations. Make sure to check out our Apple TV UI Kit for Sketch.

Remote and Interaction

• tvOS uses three main gestures: Swipe, Click, and Tap.
• Click and Tap are different. Click activates a control or selects an item, and Tap helps you navigate around.
• A tap at the top of the remote seems to scroll all the way to the top like in iOS with a tap on its status bar.
• Don’t try to reinvent the wheel with custom gestures, except for games or “when it makes sense.” Make sure your app can be used by an MFi game controller so users don’t have to use different remotes.
• Don’t change button behaviors. Be sure to assign functionality to all of them. The HOME button takes you home. The MENU button takes you back to the previous screen and to the Apple TV home screen when at the top level of an application or game.
• Play/Pause should be used to immediately start media playback or skip cutscenes and tutorials in the app. If there’s no media to play in the app, Play/Pause acts as a Click.

Navigation and Focus

• Design your apps with the fewest gestures possible and with horizontal navigation of content.
• Don’t display a back button in the UI. Instead, use the MENU on the remote to go back.
• Use standard UI elements for familiarity and expected behaviors.
• Make the focused item obvious.
• Never display a cursor, and make sure that focused and unfocused states are clear.

Icons and Images

App Icon

• Icons consist of two to five layers to create a sense of depth using parallax effects. Rounded corners are applied by the system.
• See the downloadable app icon safe zone template here.

Top Shelf Images

The top shelf is a content showcase above the top row of apps on the Apple TV home screen. When an app in the top row is in focus, the top shelf displays featured content for that app.

There are two types of top shelf images, Dynamic Content Layouts and Scrolling Inset Banner:

• Dynamic Content Layouts (Poster 2:3, Square 1:1, and HDTV 16:9 images). These can appear as a row of focusable content or as scrolling banners. Commonly used to highlight recently viewed, new, or favorite content.
• Scrolling Inset Banner (Extra Wide image). Text can be added to the image directly because there’s no label under it.

Additional guidelines for Top Shelf Images:

• A minimum of one static top shelf image is required.
• Try making it dynamic if possible and avoid using it for advertisements. Showing purchasable content is fine, however never display prices.

Game Center Images

• Achievement Icons are cropped into a circle by the system. They’re not focusable.
• Dashboard Artwork is optional and not focusable.
• Leaderboard Artwork must be 16:9 and provided between one and three single-layer or multilayer images for each leaderboard.

Layered Images

• Layered images are mandatory for app icons. Keep layering simple.
• Leave a safe zone around the content because of the scaling and movement.

Launch Images

• Launch images are not unlike the launch images in iOS.
• Stay away from branding, text, or advertising.

Visual Design

Animation

• Don’t use animation just for the sake of using animation.
• Consider the size of the screen you’re designing for. What looks good on your computer may be excessive on a big TV screen

Branding

• Avoid showing logos in the app; instead focus on the use of colors for branding.

Color

• Use the sRGB color space and always test your designs on one or more TVs.
• Avoid using heavily saturated colors. Instead favor muted colors.
• Preview colors at different display settings on TV.

Layout

• App layouts don’t automatically adapt to the size of the screen like they do in iOS.
• Assets should be @1x resolution.
• We’re thinking @2x once 4K rolls around.
• Watch for cropping on the top, bottom, and sides, due to overscanning on older TVs.

Typography

• Use the San Francisco UI Text font for text 39 pt or smaller, and the San Francisco Display font for text 40 pt or larger. Dynamic Type can be used with the system font.
• If you use custom fonts, make sure that they are legible and support accessibility features.

Video

• Don’t use a custom video player unless it’s necessary. It’s OK to show a small logo as long as it’s unobtrusive.

TV Transformation

When the new Apple TV ships this October, Apple will redefine the living room experience. But it all starts with launching inventive applications. We hope you’re as excited as we are to be part of the future of television.

Follow Black Pixel on Twitter and Instagram.