ViXi TV | Branded Smart TV apps for Samsung, LG, Android TV, ROKU, VEWD, Amazon Fire TV

tvOS Design Themes

Source: https://developer.apple.com/design/human-interface-guidelines/tvos/overview/home-screen/

tvOS Design Themes

Apple products are known for connecting people with content. This feeling of connection is expected from Apple TV, even though it isn’t a device that you hold or touch directly. In many households, Apple TV sits in the living room, bringing people together for entertainment and conversation.

Apple TV is a unique platform with unique design requirements. Whether you’re building a game, a streaming media app, or a utility for the home, keep the following principles in mind as you imagine your app’s identity.

Connected

The Siri Remote lets people interact with content across the room through fluid, familiar gestures—a flick of the wrist, tapping, swiping, and clicking. Leverage the remote’s touch surface, accelerometer, and gyroscope to connect people with your content in a delightful and engaging manner.

Clear

Apple TV apps should feel natural and intuitive. Users should instinctively know what to do and where they are at all times. Use the provided layout grids, keep text legible at a distance, and avoid cluttering your interface with unnecessary visual adornments.

Apple TV uses a focus model for navigation. People use the remote to move through interface elements such as movie posters, apps, or buttons, highlighting each item as they come to it. An element is considered focused or in focus when the user highlights the item, but has not clicked it. Make it clear at a distance when something is in focus. Implement expected button behavior so it’s impossible to get lost during navigation—clicking an item with the remote takes you deeper into an app’s hierarchy, pressing Menu always takes you back.

Immersive

Beautiful, edge-to-edge artwork engulfs people in a rich, cinematic experience. Focusing on a piece of content elevates it, and the touch surface of the remote makes you feel like you’re touching the screen, as on an iOS device. Sound is used throughout the system to enhance the visual experience. Strive for a sense of immersion through engaging content, subtle and fluid animations, awe-inspiring imagery, and captivating audio.

Apps

tvOS provides development frameworks for building riveting games, utilities, and other apps that run natively on Apple TV. If you’re familiar with iOS app design, you already know much of what you need to know. Most of the same interface elements and development frameworks exist in tvOS. However, creating a stunning cinematic experience that works well on a television screen and with a remote has its own unique design considerations.

Full screen app

Help people feel connected to your app through the remote. In iOS, the user sees and touches the same device. On Apple TV, the user sees the screen across the room while touching the remote in their hand. Look for opportunities to connect people with your app through the device they touch—the remote.

Consider the user’s distance from the screen. Design interface elements appropriately, so they’re legible, easy to find, and aren’t overwhelmed by background images or adjacent items. Make sure it’s always clear what’s in focus and what happens as a result of actions taken on the remote.

Create a shared experience. People often enjoy TV in a communal environment. Consider how your app can appeal to a group, as well as what happens if the user is a different person each time your app is launched.

For information about developing apps, see App Programming Guide for tvOS.

Focus and Parallax

On Apple TV, an icon, image, button, or other interface element is considered to be in focus when it’s the currently highlighted element. As an element comes into focus, it’s gently elevated to the foreground and sways playfully in response to subtle movements of a finger on the touch surface of the remote. As this occurs, illumination is applied to the item, making its surface appear to shine. After a period of inactivity, out-of-focus content dims while the focused element grows even larger. These effects work together to maintain a connection with people sitting on the couch. They provide a sense of clarity and context, reinforcing what’s in focus.

Parallax is a subtle visual effect used throughout the system to convey depth and dynamism when an element is in focus. Through image layering, transparency, scaling, and motion, parallax produces a 3D effect with a sense of realism and vitality. Image layering to support the parallax effect is a requirement for your app icon and is supported for dynamic top shelf content on the Home screen. Image layering is strongly encouraged anywhere that focusable, image-based content resides in your app.

For more information on focus, see Focus and Selection. Learn how to design images for parallax in Layered Images. For developer guidance on focus and parallax, see App Programming Guide for tvOS.

 

Home Screen

The Apple TV Home screen shows the installed apps. The user navigates through a grid of app icons, selects one, and clicks to launch it.

Apple TV home screen showing Top Movies and App Icon Grid

Your app’s icon on the Home Screen is a chance to tell your app’s story and build an emotional connection. Your app’s icon should make a great first impression, so design one that’s unique, affecting, and memorable.

For design guidelines, see App Icon.

Top Shelf

The top shelf is a content showcase area above the top row of apps on the Apple TV Home screen. The user can decide which apps are in the top row. When one of these apps is brought into focus, the top shelf displays featured content specific to that app.

App Store showing a Scrolling Inset Banner

The top shelf is a unique opportunity for your app to highlight new, featured, or useful content and let the user jump directly to it. For example, when the App Store is in focus, banners highlight notable new apps. When the iTunes TV Shows app is in focus, people see a row of featured shows. Focusing on and clicking a TV show goes right to the related product page in the app. Pressing the Play/Pause button on the remote while a show is in focus begins media playback for the show.

For featured content design guidelines, see Top Shelf Images.

 

Remote

The primary input method for Apple TV is the remote, which brings the touch experience to the TV from across the living room.

Implement expected button behavior. In most apps, people expect that clicking content using the touch surface navigates deeper into an app’s hierarchy and pressing Menu returns to the previous screen.

Use movement to clarify and delight. Movement, such as the parallax effect, is used throughout the system to engage people and clarify what’s in focus. Your app can deliver a compelling, fun, and intuitive experience by leveraging the remote’s touch surface, accelerometer, and gyroscope for control, navigation, and embellishment.

Apple TV Remote

Gestures

The remote’s touch surface detects a variety of intuitive, single-finger gestures. Use them to build a physical sense of connection with your content.

Swipe. Moves focus up, down, left, or right between items. Swiping lets the user scroll effortlessly through large volumes of content with movement that starts fast and then slows down, based on the strength of the swipe.

Click. Activates a control or selects an item. Clicking is the primary way of triggering actions. Clicking and holding is sometimes used to trigger context-specific actions. For example, clicking and holding an interface element may enter an edit mode.

Tap. Navigates through a collection of items one-by-one. In apps with standard interfaces based on UIKit, tapping different regions navigates directionally. For example, tapping the top of the touch surface navigates up. Some apps use tap gestures to display hidden controls.

Differentiate between click and tap, and avoid triggering actions on inadvertent taps.Clicking is a very intentional action, and is generally well-suited for pressing a button, confirming a selection, and initiating an action during gameplay. Tap gestures are fine for navigation or showing additional information, but keep in mind that the user may naturally rest a thumb on the remote, pick it up, move it around, or hand it to someone.

Avoid using standard gestures to perform nonstandard actions. Unless your app is a game in active gameplay, redefining the meaning of standard gestures leads to confusion and complexity.

Define new gestures only when it makes sense in your app. People are familiar with the standard gestures and don’t appreciate being forced to learn different ways to do the same thing. In games and other immersive apps, custom gestures can be a fun part of the experience. In other apps, it’s best to use standard gestures so extra effort isn’t needed to discover or remember them.

Where appropriate, use the tap gesture position to aid with navigation or gameplay.The remote can differentiate between up, down, left, and right tap gestures on the touch surface. Respond to positional taps only if it makes sense in the context of your app and if such behavior is intuitive and discoverable.

Buttons

In addition to the touch surface, which also operates as a clickable button, the Play/Pause button on the Siri Remote is accessible to your app or game. Buttons should behave consistently and predictably in the context of your app or game.

Apple TV Remote

ButtonExpected behavior in an appExpected behavior in a game
Touch surface (tap/swipe)Navigates.
Changes focus.
Tap behavior varies.
Swiping performs directional pad behavior.
Touch surface (click)Activates a control or an item.
Navigates deeper.
Performs primary button behavior.
MenuReturns to previous screen.
Exits to Apple TV Home screen.
Pauses/resumes gameplay.
Returns to previous screen, exits to main game menu, and/or exits to Apple TV Home screen.
Play/PauseActivates media playback.
Pauses/resumes media playback.
Performs secondary button behavior.
Skip intro video.

Provide a way back to the previous screen and out of your app or game. Users expect to press the Menu button on the remote and return to a previous screen or the main Apple TV Home screen. Pressing Menu at the top level of an app or game should always exit to the Apple TV Home screen. During gameplay, pressing Menu should show or hide an in-game pause menu that includes an option to navigate back to the game’s main menu.

Enable the Play/Pause button during media playback. When playing music or video, pressing the Play/Pause button should perform the expected behavior—play, pause, or resume.

Game Controllers

Game controllers can enhance gameplay and increase the sense of immersion in a game. A game controller can also navigate the Apple TV focus-based interface, eliminating the need to switch input devices.

Third Party Game Controller

Consider supporting both a game controller and the remote. Game controllers are optional purchases people may or may not make. But every Apple TV has a remote. If you support game controllers in your app, consider making the remote usable as a game controller too. Think about the kinds of interactions you can enable using the remote. In a driving game, for example, you can let people rotate and operate the remote in landscape mode.

Determine game controller requirements.
If your game has advanced game mechanics that can’t be supported by the remote, you can require the use of a game controller. The App Store displays a “Game Controller Required” badge for apps restricted in such a manner, and may warn people if a compatible game controller hasn’t been paired with their Apple TV.

Confirm required game controller connections at launch. Your game can be opened anytime, even when there’s no controller connected. If your app requires a controller, check for the presence of a controller at launch and gracefully prompt for one if necessary.

Communicate game controller advantages. If your app supports both the remote and game controllers, inform people about the capabilities a game controller offers beyond those of the remote.

Test all supported input devices. Make sure menus and essential navigation work with any input devices your app supports so people don’t need to keep switching devices as they use your app.

For information about implementing game controller support, see Working with Game Controllers in App Programming Guide for tvOS and Game Controller Programming Guide. To find out about developing games, see GameplayKit Programming Guide.

Buttons

Buttons should behave consistently and predictably in the context of your app or game.

Third Party Game Controller

ButtonExpected behavior in an appExpected behavior in a game
Directional PadNavigates.
Changes focus.
Varies.
AActivates a control or an item.Performs primary button behavior, such as accelerating.
Confirms affirmative actions.
BReturns to previous screen.
Exits to Apple TV Home screen.
Performs secondary button behavior, such as braking.
Returns to previous screen.
XActivates media playback.
Pauses/resumes media playback.
Varies.
YN/AVaries.
MenuReturns to previous screen.
Exits to Apple TV Home screen.
Pauses/resumes gameplay.
Returns to previous screen, exits to main game menu, and/or exits to Apple TV Home screen.
Left ShoulderNavigates left.Varies.
Right ShoulderNavigates right.Varies.
Left TriggerNavigates left.Varies.
Right TriggerNavigates right.Varies.
Left ThumbstickNavigates.
Changes focus.
Varies.
Right ThumbstickN/AVaries.

Provide a way back to the previous screen and out of your app or game. Apps that use the Game Controller framework can be notified when the Menu button is pressed, so they can take appropriate action. Users expect to press the Menu button and return to a previous screen or the main Apple TV Home screen. Pressing Menu at the top level of an app or game should always exit to the Apple TV Home screen. During gameplay, pressing Menu should show or hide an in-game pause menu that includes an option to navigate back to the game’s main menu.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published.