10 UX design tips for Apple TV apps
Want to design your first app for Apple TV? Take a look at these TV UX design tips before you start!
Television has changed so fundamentally over the last decade, it can be difficult to remember how things used to be. Whether we were struggling with our TV’s built-in operating system or with the frankly diabolical UIs included in cable boxes, television’s user experience design was bad enough to make anyone want to throw their TV off a balcony and into a swimming pool. And we haven’t even mentioned WebTV.
The arrival of services like Netflix and new operating systems like the Apple TV’s tvOS has revolutionized television UI and brought huge improvements to user experience. Well, most of the time. Yeah, we’re looking at you, Hulu. And with 60% of young adults preferring streaming for their TV consumption, there’s no question that the market has already shifted. But designing for the biggest screen in the home can be surprisingly challenging, especially if you’re making the leap from mobile and tablet apps.
In this article, we’ll take a look at some of the main challenges in designing apps for TV, and some of the UI elements that Apple’s tvOS includes to make your life easier.
Designing apps for Apple TV? Here’s what you need to know.
The trouble with designing apps for TV is that it can all look so familiar, but in reality the differences from mobile are huge. Yes, tvOS is based on iOS, but the two operating systems aren’t interchangeable, and while design principles might change slowly, many best practices on mobile no longer apply on TV. UX design for TV apps might even feel like a step backwards in some cases. But that’s the beauty of any great design challenge, right?
Start designing apps for free with Justinmind. Download now.
Get your focus engine running
Apple TV’s UX is all about focus. In fact, the ‘focus engine’ is the name given to the system which manages focus inside tvOS. Rather than tapping or clicking on the area of the screen that interests them, Apple TV users use the remote control to shift focus around the screen. Focusing on a piece of content displays some extra information, like in the iTunes Movies view, where focusing on a movie will display its name below the movie image.
The most important thing to remember about focus is that your user should always know, at a glance, which element is currently in focus. Get this right and you’re halfway home.
Design with distance in mind
TV screens tend to be 9 ft or more away from the user. For this reason, large blocks of text, or the presence of any font size below about 18 pt is out the question. This increased distance means that UI elements should be larger and have more appropriate spacing between them. Designers need to take care to use typography that users can read comfortably at a distance. Which brings us neatly on to…
The importance of Typography
It will come as no surprise that an Apple user interface design includes an emphasis on typography. The system font, San Francisco, is an attractive sans-serif font which is inspired by Helvetica, and is also used in iOS and macOS. Apple recommends using its system font in third party apps, and touts some advantages of doing so – most notably, that the Apple TV will automatically choose the most appropriate font variant based on the point size and in accessibility contexts.
Of course, designers are allowed to use their own fonts. And while this works fine much of the time – Netflix is a good example – in our experience, custom fonts are the number one reason why some 3rd party apps look bad on Apple TV. If you’re not sure what we’re talking about, take a look at the GSE IPTV app. Horrendous.
Stay safe out there!
Back in the day, TVs had serious issues with image consistency, particularly on the edges of the screen. For this reason, TV manufacturers invented overscan, a fudge which allowed them to enlarge the image and then trim a bit off each edge, thus giving the illusion of a more consistent image. As a rule of thumb, up to 5% of the picture is lost thanks to overscan.
Unfortunately, even modern TVs persist with overscan, which adds another challenge for an app designer. Apple defines a safe zone for TV apps as excluding the 60 pixels from the top and bottom of the screen, and 90 pixels on either side. Keeping primary content and navigation away from the edges of the screen and inside the safe zone improves usability and helps to avoid trouble with overscan.
Design and prototype apps free with Justinmind
Let TV users lean back
This might be the most important and yet most intangible factor of UX design for TV. On the whole, your user is leaning back on the couch to relax with a movie, TV show, song or game. If keeping things simple is a cardinal rule in all UX design, it’s absolutely fundamental for TV. The last thing you want is to have your user forced to sit up and pay attention because of a confusing user experience.
Even if your TV app isn’t for video streaming, approach the UX design with an eye to relaxation and peace. Apple’s own UI elements, including animations, color and textures all promote a light and airy design language. Try to keep it that way.
Say no to text inputs
TV app designers should aim to reduce text input to an absolute minimum. Even the most elegant text input elements, like the Digit UI element in tvOS, are a nuisance to use to enter more than a few characters. Two factor identification with a code to input on the screen is preferable to a full login dialog.
If you absolutely must use a text input field, make sure you choose the appropriate keyboard type. tvOS includes 13 keyboard types in its UI, designed for specific uses ranging from numbers and punctuation, to URLs and email addresses.
Parallax and animations FTW
As the user moves the focus area around the screen, small animations, color changes and a parallax effect are used to clearly indicate exactly which UI element is in focus. In the home screen, app icons zoom by about 23% when focused and 3rd party developers are encouraged to use similar graphical cues in their apps. Netflix, for example, uses a less pronounced zoom and doesn’t display extra information until the user clicks the item and moves to a new screen.
Animations, parallax and color are all excellent ways of indicating focus to the user. Combined, they can create original and attractive experiences, but you should be wary of going overboard and avoid anything that the user will find to be abrupt or confusing.
In the lockup
tvOS includes several UI elements not found on mobile or desktop. One of the most notable is Lockups, which combines several different views into a single interactive element. Lockups – the name comes from setting type in a printing press – include a header, a footer and an area for the main content. All three parts of the lockup zoom in and out as they come into and out of focus. Lockups make it easier for UX designers to handle focus on content items, by maintaining separate sub-elements that are then grouped in a single interactive element.
Take care of the Tab Bar
The Tab Bar is the main way of navigating within Apple TV apps. It provides a way to move between top-level categories or views, changing which content is shown below. Unobtrusive in design, the tab bar sits at the top of the screen and only displays fully when in focus. Its default style is translucent, a nice effect that lets a hint of the content below ‘peek’ through, maintaining consistency while avoiding the jarring effect of solid block menus. Design your app with this primary means of navigation in mind: you should be thinking about how the tab bar helps to categorize or group your content from the very beginning.
Textures! Beautiful, fluffy textures!
One of the most beautiful aspects of the user interface in tvOS is the use of soft, semi-translucent textures throughout. The tvOS UI kit’s textures come in six different flavors, each used in specific contexts. Once again, Apple recommends that designers use the system textures when applicable, which can help to ease the user’s experience when switching from one app to another.
The wrap up: TV app design is familiar but different. But there’s so much room for activities.
Designing a beautiful TV app will involve rethinking some core aspects of your UX. The TV is a huge canvas which offers enormous possibilities for designers. It looks increasingly certain that Tim Cook is right, and apps are the future of TV. Maybe TV is the future of apps as well.
- Banking app design: 10 great patterns and examplesThe growing importance of mobile banking app design brings with it the need for more engaging UIs so that financial institutions can stay competitive. If you’re wondering what constitutes a great banking app UI design, check out these 10 great examples.