Designing for the Apple TV
We find ourselves in an interesting period of UI design for the big screen. With the launch of the 4th generation Apple TV late 2015, most of the major players have now fired their first shot at how a modern TV experience is supposed to look. The smoke has cleared and the results have been mixed for more reasons than you can imagine. It’s a brave new world though and in this article I’ll share some of the experiences we’ve made building apps for the largest content providers in Denmark, what we’ve learned so far and some resources to get you started.
The state of the union
Major players like Netflix, Youtube, HBO, Hulu and Plex all have v1’s in the tvOS App Store. Most of these however, already had a presence on previous versions of the system or on other platforms like FireTV, Samsung SmartTV and other HbbTV solutions. Therefore, more times than not, the tvOS apps we’re getting right now is a weird combination of legacy design and Apple’s new guidelines. In many ways we’re currently in a preliminary phase where everyone is trying to figure out how to do this right. Decision makers are currently balancing what they used to do, keeping it consistent with other platforms and trying to push the envelope of what Apple allows them to do with tvOS. You can easily see this gamut of decisions shining through the solutions currently available on your TV.
But a much larger group of content creators are right now deciding wether or not they should get involved with the platform and if so, how they should do it. Many of them doesn’t have a lineup of apps already cemented by executions on other platforms and could view this platform as a way to experiment with interesting ways to serve their content. This article is very much for those people and for the developers who are going to built solutions for them. If you are someone who are considering building something for the Apple TV, read on.
Getting started is easy
Coming from the multitude of other devices and resolutions in the mobile space, designing and developing for the Apple TV is a breeze. It is one resolution and one device. The fact that you’re designing for a single resolution, 1920 x 1080 pixels, and debugging on a single piece of hardware is a luxury we had all but forgotten. I literally just open a single canvas in Photoshop and export interface elements as is. @1x, baby. No Retina. No 9-patch. On an external monitor I can easily view the entire screen at a 100%.
Meet your new friend, the focus engine
One of the main navigation paradigms you need to get comfortable with when designing a great experience on the Apple TV is the focus engine and how something is ‘always in focus’. Unlike iOS or the desktop where you manipulate content by tapping, clicking and scrolling, on the TV you swipe through content and controls with one object always selected. The fact that you’re not swiping around the UI and directly manipulating what you’re seeing but rather going through a series of predefined areas of focus makes a huge difference in what types of layout and controls work well. Most of the learnings in this article is directly or indirectly linked to understanding the strengths and limits of the focus engine.
Tease offscreen content
Rows and columns of content that go off-screen needs to be aligned in a way that shows at least 10–20% of that content, making it clear to the user that there’s more to be navigated.
Horizontal is easy, vertical is expensive
Horizontal scrolling feels smoother than vertical scrolling, both in terms of the actual gesture on the hardware itself but also because sliding in more content from the side versus moving the entire screen feels less jarring. The sideways motion is easy on your thumb and the result in your interface should be equally subtle. Moving your thumb up and down is harder and (potentially) moves all objects on the screen and is therefore a more expensive interface action. Use this knowledge to your advantage and save vertical scrolling for meaningful things like changing categories
Clearly separate buttons and content
It’s very important that content and controls that you can navigate to is clearly marked in a way that communicates so. You don’t want the user to be “surprised” at what is selected next, so make sure that buttons look like buttons and content looks like content.
Place controls mindfully
Placement of controls and content is very important in the quest to make your users feel comfortable. Long vertical spaces of content that you can’t select, say like a long block of text, doesn’t work well. Consider how you might not be able to ’scroll’ through it and how putting a selectable element at the bottom of it will make the navigation jumpy. In a sense, on tvOS, the user is Tarzan — swinging from tree to tree; from one focusable item to another. Make it so that Tarzan can clearly see the next tree and anticipate every swing. Don’t hide it. No one wants to see Tarzan fall.
Grids are great in the way that you’re never in doubt which way the focus is going to move when swiping up, down left or right on the remote. When you break grids or misalign elements, make sure it’s for a good reason as it comes at a cost and potential swearing when navigation jumps to somewhere the user didn’t feel he or she wanted it to go.
Be obvious
Make sure that things in focus look like they’re in focus. Don’t be subtle here. Make that thing grow, glow and/or change color. Exaggeration works great on the big screen and anything you’d do on most other platforms needs to be turned up a notch.
Design for distance
The interface you’re building for your TV will be enjoyed (or loathed) from several meters away. This is in stark contrast to mobile and desktop where we practically have our faces in the screen. The intimacy of the mobile or desktop interface needs to be unlearned when designing for the TV. Not only is it further away from us physically, but with a remote (even a touch based one) our control also feels diminished. So make sure that content and controls can be operated from across the room. This basically means bigger fonts and bigger clearly defined controls, but it also means meaningful layout grids and animations that are less subtle and more guiding.
Minimise text inputs
Entering text on the TV still sucks so try to limit the times when the user has to do so. Consider alternatives like logging in with a code from a device.
Make it come alive
We’re currently seeing a lot of standard UI elements in Apple TV apps, which is to be expected at this point in time. But I want to strike a blow for developers playing around with the execution more, adding their own touches. There are many things that can be done to ‘liven up’ the experience of using an app. Little animations, subtle moving of images and obviously parallaxing content. Here’s some tricks we’ve had success with.
Data that breathes
Opening a screen for the first time, progress bars fill up until they reach their value. It adds another layer of animation and makes data, that could otherwise be dull, come alive.
Images that move
Ken burns background images, especially accompanying focused elements (like the play button above), to liven up the screen and pull the user in. Making a static screen slowly move is a great way to add immersion.
Content that shows
Stream content inside controls on focus (in this case from live-tv channels) to empower users to make informed choices. Try to enhance transparency to bridge expectations wherever it’s possible.
Resources
To make it easier to design interfaces for the Apple TV I have made a new template available on applypixels.com. With the tvOS UI Template PSD, you’ll easily be able to build off existing standard assets when putting together your new interface for the platform. The template includes dark and light variant recreations of the most common assets and sizes found in tvOS along with a 1920 x 1080px artboard canvas.
You obviously also want to check out Apple’s official HIG which cover a lot more ground in terms of specific layouts, interface schemes and values.
Building a better living room experience…
To get the future living room we want, we’re going to have to work for it. Designing a great experience for the TV isn’t easy– designing a mediocre one, is. Most of us are just taking the first steps in learning what can and should be done on the screen across the room. We need to unlearn the intimacy of both mobile and desktop and adapt new patterns. We need to experiment and challenge what a TV can be used for. It’s exciting. We get to open what has been a closed box for so many years and help shape the experience of consuming content for the next generation. We shouldn’t take that task lightly. We’re shepherding our cultural heritage and reinventing a medium that hasn’t moved much in the past decades. Let’s see if we can’t shake things up.
At Northplay we’ve built several Apple TV apps. If you’re looking for a team to help you build one, we’d love to talk.
