Designing for tvOS vs other devices with interaction in mind
Last year I got the chance to work for a Norwegian streaming company, where I quickly became lead designer for their tvOS app. This was a really fun and illuminating experience where I worked closely with the developers and learned all about designing for a TV platform.
Here is a little guide on what to have in mind when designing for tvOS
Designing for tvOS, the basics
Human Interface Guidelines
Apple’s HIG is a great guide to get you started and to learn the basics. This guide was my little Bible while designing for the streaming company. It contains recommendations and best practices for designing and developing beautiful, consistent experiences. By using the platform-provided standards your app will feel native, but remember it’s only a guide. It’s important to find the balance between the brand of the app you’re making and the platform guidelines. Apple also provides a lot of great inspiration through many of their tvOS apps, such as Apple Music, Apple TV App and Movies iTunes.
Screen size and Margins
When designing for tvOS you only need to think about one screen size! 1920 x 1080 (16:9). This is a thrill compared to desktop and mobile where you need to consider many different screen sizes. Unintended cropping may occur though, due to overscanning on older TVs, so keep primary content away from the edges. A good guide is to avoid 60 px from the top and the bottom, and 90 px from the sides. The Apple TV displays standard-resolution images on HD TVs and high-resolution images on 4K TVs. Your app should provide images in both formats. For this all assets should be @1x resolution (HD) and @2x (4K).
Distance
Mind the gap! The interface on a TV is viewed from several meters away. A big contrast to mobile and desktop devices, where you almost have your face in the screen. Make sure your user doesn’t have to struggle to see what’s on the screen. Don’t be afraid to make interface elements (text, buttons, controls, etc) larger. It is also important to include plenty of space between the elements. This will make it easier to navigate and select, but also help people see each individual item.
Typography and text
San Francicso (SF) is a great system font for tvOS. There are two variants: San Francisco Display and San Francisco Text. When designing use SF Text for text 19 points or smaller, and SF Display for text 20 points or larger, and adjust the spacing between the letters appropriately. If you are using this font, tvOS automatically applies the most appropriate text style based on point size. If you want to use a custom font make sure it is legible at a distance and respects accessbility settings.
Show, don’t tell. Reading a lot of text on a TV screen from across the room isn’t much fun and strains the eyes. So try to limit the text amount and use images, illustrations or animation to communicate instead.
Templates & Grid layouts
Apple tvOS provides many beautiful and consistent layouts that make content the center of attention. If your app is content centric it could be wise to consider using some of these templates. Layout templates are highly customizable, just be careful to make it tasteful and understand the template’s purpose before using it. We used templates for content like alert and search.
I really loved using the grid layout displayed in Apple’s HIG. There is a grid from three to nine columns. It showcases content well, is easy to browse at a distance, and is quick to navigate through with the remote. I truly recommend to use this grid to make your design consistent and user friendly.
Hint offscreen content
Rows and columns which have content that goes beyond the screen must be aligned in a manner that shows at least 10–20% of that content. This allows the user to understand that it’s possible to navigate further. If you follow the grid layout displayed in Apple’s HIG the content will be aligned as it should.
Interaction
Shared vs personal / mobile vs stationary
The Apple TV is the most stationary and shared device. We use the TV in communal environments such as the living room, shared office spaces, sports bars and other public spaces. It’s a device that multiple people can enjoy at the same time, which makes the experience unique from the rest of Apple’s devices. So when designing for tvOS have this shared experience in mind. The other devices are more personal, private and mobile. Even though the MacBook allows you to have multiple users it still feels much more private compared to an Apple TV.
Loose vs precise interaction
On a MacBook you have a keyboard and a mouse, which allows you to be really precise. The same goes for an iPad (even more when you use the pencil). On the other hand an Apple Watch, with its small screen makes it harder to be precise. Also, most of the devices are closer to you. We have them on our hands and we interact with them directly. But, a TV is not in your hand, a remote is. The touch based remote makes our control feel diminished compared to the other devices.
Remote interactions
Get to know the remote, your new best friend. It has a touch based surface, an accelerometer, and a gyroscope. This gives you a variety of possibilities to help the user feel connected to your app even though they’re sitting at a distance. tvOS uses three main gestures: Swipe, Click, and Tap.
When it comes to games, people may also buy game controllers for their Apple TV, but this is just an option. So if you want to support game controllers in your app, you should definitely consider making the remote usable as a game controller as well.
https://developer.apple.com/tvos/human-interface-guidelines/remote-and-controllers/remote/
Focus-based interactions
On Apple TV we use a remote to interact indirectly with elements onscreen. The navigation is based on a focus model. You swipe through content and controls, with one object always selected. As focus changes, subtle animations and the parallax effect produce a feeling of depth that clearly identifies the item that’s currently in focus. This way of navigation is a huge difference from all the other devices. To deliver a compelling experience it is crucial to understand the focus engine and consider how elements should look when they are focused.
On Apple TV, focusable items can have up to five different states, each of which should appear visually distinct.
Horizontal vs vertical scroll
Horizontal scroll is easier and smoother than vertical scroll. This goes for the gesture itself on the remote, sliding your thumb from side to side feels simpler than moving it up and down. Also when it comes to the content itself on the screen. It‘s smoother to slide in content for the side than moving all the objects (which usually happens for vertical scroll). Since vertical scroll is a heavier interaction the interface should reflect this and be used for essential things like changing categories.
Key summary
- Get to know Apple’s Human Interface Guidelines for tvOS. Use the platform guidelines on spacing, typography, layout templates, grid parameters and interface component sizes, to make the interface on your app feel natural and intuitive. Keep in mind that this is only guidelines and don’t forget to make your brand shine as well and be creative.
- Apps for tvOS is mostly for shared environments. The users are enjoying the app from across the room with a remote. This is a huge difference compared to other devices. The experience for your app should reflect this shared user experience.
- Make people feel connected to your content by using the remote’s touch surface, accelerometer, and gyroscope. It’s crucial that the interface facilitates focus-based interactions. Always consider how elements should look when they are focused and make it completely obvious where the next focusable control is.
