Designing for Apple TV

My name is Rachel Roth and I'm a User Experience Evangelist at Apple in Cupertino. And today, I'm going to be talking to you about how to design for Apple TV. Now, Apple TV is a really unique platform, so that means it has a whole unique set of design challenges that comes with it, things you want to consider. Apple TV is all about that living room experience. And unlike a Mac or an iPhone, people aren't going to be sitting close to the screen. They're probably on their couch all the way across the room. And most Apple products are built from the same concept and that's connecting people directly with what's on screen. So, whether that's browsing photos or sending messages, editing video, people expect a direct connection with the content. And the same idea still applies to Apple TV even though people are going to be sitting across the room and using a remote.

Now, Apple TV is our most communal device. You might have just one person using it in the morning, but then in the evening the entire family can be gathered around it. With such a large canvass, you've got an incredible opportunity to bring people together. Whether that's watching a movie or competing in games or looking at an app that provokes a conversation, this platform is really ideal for shared experiences. So that's what brought us to these three key principles for the new system UI. And those are connected, clear, and immersive. First, let's talk more about being connected.

We still want people to feel connected to the UI even though they're sitting far away from the screen and using a remote.

Now, even though they aren't touching the screen directly, the touch surface on the new Siri remote means people can still use gestures to affect the UI.

Just one swipe and you can see how you can move through a whole row of content. And the UI also responds to small movements on the remote's touch surface with this new parallax effect. Just a little bit of movement on the remote really brings the content to life.

And we put this effect into UI Kit so you can take advantage of it in your own apps.Not only does this delight people but it really helps them feel connected even though they're not touching the screen directly. So that's connected. Now, clear is all about keeping things intuitive.

People should instinctively know what to do. It's really important that people understand where they are in your application and how to easily move around the screen, in and out of content. It's easy to get overwhelmed by densely packed layouts or frustrated by hard to read type or overly tiny items.

So the new system UI has been optimized to address all of these things. Clicking on items takes you deeper into an app's hierarchy.

So when I click on the app store icon, I go into the app store app. And then if I find an app that I'm interested in and I want to drill in for more information, like "Shadowmatic", I can just click for more. And now I can see the details of the app and the screenshots.

And then by pressing menu button on the remote, it reverses that path, taking me back the way that I came. So from these details page, I go back to the app store main screen, and then ultimately back to the Apple TV home screen. Having the single path for going in and out of an application helps keep people oriented.It's impossible to get lost since the menu button always takes you back. Clear also applies to the content.

It has to be easy to read from across the room. So the system font is now San Francisco and typefase has been optimized for legibility at a distance.

And if you use the system type styles, you can be sure that your fonts will be large enough to be read clearly from the couch.

And the text in your application will also respond automatically to accessibility settings like bold type. As you're designing and developing your apps, you're probably sitting at a desk with a computer right in front of you. So that's why it's incredibly important that you check your designs on an actual TV from across the room, because thin fonts can be very difficult to read from the couch and you don't want people squinting to make up a label of the button or struggling to understand what some content is. You're going to have to go big in order to keep things legible from across the room, which is what inspired our new grid system and the focus model. Larger items are easier to see when you're sitting at a distance and the focused item is even larger and it makes it appear closer to you. Because these posters don't overlap, it's clear which one is currently active.And if you walked away from the TV and came back, it would be clear where you left off.

Translucency is used throughout the system to help you maintain a sense of place... like when you ask Siri a question.

The answer comes up on a translucent layer.It's the closest thing to you. And that helps make it obvious that any gestures you make on the remote are going to affect that panel. Using the new remote should be intuitive and effortless. The new grid layouts make it easy to move through a large amount of content while still targeting something precisely, and the focus treatment makes it clear what's about to be selected. All of these things work together to remove ambiguity. It's intuitive to interact with the UI even though you're not touching the screen directly. There are a lot of details about the system grid spacing and the type styles in the Human Interface Guidelines, so you can easily incorporate them into your own app. OK. So that's clear.

Immersive is all about taking advantage of this massive canvas and using it entirely for your content. Because TV is all about entertainment.

People expect big, beautiful imagery and gorgeous videos as soon as the screen turns on. Now, the new screensavers are a great example of this.

They're absolutely mesmerizing. There's no additional UI or embellishment. The entire screen is just dedicated to imagery.

And one way that you can achieve this in your own apps is by using edge-to-edge artwork. This really helps create a cinematic experience, because it feels like you're stepping into the world of "Moonrise Kingdom" even though we haven't started playing the movie yet.

This makes it all about the content. Now, throughout the Apple TV system UI, we removed chrome and UI elements whenever possible, and this helps make it all about the content. In the past, we used a selection ring to indicate focus. But the selection ring in some cases could distract from the content or contrast with the movie posters, so now the default focus state makes the content appear closer to you.

This helps keep things immersive because it's all about the content. So as you're designing your own apps, keep these things in mind.

Do whatever you can to keep people connected to the experience. Utilize gestures, take advantage of that parallax effect, and give people a clear path in and out of your application. And make sure everything is legible from across the room. And really make it an immersive experience.

Remove chrome wherever you can and take advantage of this big canvas make and make it all about your content. OK. So next I would like to talk more about interactions and the new remote, because this will have a huge impact on your design. The new remote has six buttons, plus the touch surface.

The home, volume, and Siri buttons are all reserved for the system. While the touch surface, the menu, and the Play/Pause button are all available for use inside of your app. The touch surface on the remote gives you access to all of the single-finger gestures that are available on iOS today.Now, this area is really too small for multi-finger gestures like pinching.

And people tend to hold the remote comfortably with one hand so you can accomplish quite a lot with one finger. You can use the swipes to move quickly through large amount of content or taps to move incrementally. And you'll see that here on the system keyboard, when you swipe, it goes through a lot of the letters and then tapping lets you move one by one. And you can also use the touch surface as the directional pad for game navigation.

In this game transistor, you move your character on the battleground as though the touch surface were a joystick or a D-pad on the game controller.

This isvery easy to do, with just one finger. Now, you also have access to the Play/Pause button and this can be a great shortcut to playing back content.

Let's take a look at Zova Fitness which is a fitness application. Now, if I click on one of these workouts, it takes me to a details page where I can see all the exercises included, how long the workout is.

But if I go back and I use that Play/Pause button instead-- "Next stop. Glute kick back, left..." -- that takes me right into the workout by passing the details page entirely. So that's how you can use that as a great shortcut to playing back content. Now, if you're making a game, this button can be used as a secondary control.

The game Transistor has two modes. There's the live action fighting and then there's a more strategic mode.

And so we use that Play/Pause button to toggle between those two modes. So, let's take a look.

If I'm in live action, and I'm taking a beating, you hit that button and that toggles me into the alternate game play mode.

So you can use that Play/Pause button as a shortcut for playing back content or an additional game control. Now, Menu is a super important one.

As I mentioned before, this is like a back button built into the remote. And this will enable you to make a more immersive experience because you're not going to need back buttons in your UI. People will instinctively go for that button on the remote. And if you use previous versions of Apple TV, this should feel really familiar because that's how it's worked in the past as well. So as I mentioned, clicking on something takes you deeper into an app hierarchy. Let's look at Zova Fitness again. I can browse these programs.

Click on one for more detail. Then I get a number of workouts, find what I'm interested in, click on one of those to drill in.

And now, here I am at that details page. And then by using the Menu button on the remote, I go back out the way that I came.

So from this details page, back to the workouts page, to the program page, and ultimately back to the Apple TV home screen.

This is super intuitive. Conceptually it works like this: clicking takes you deeper,menu takes you back.

Now, the same idea applies to games, but if someone is in the middle of the action, it might make more sense to first pause the game and then give people the option of backing out. So let's take a look at "Rayman Adventures". If I'm in the middle of this level and I hit the Menu button on the remote, the game pauses and presents a number of options. I can resume playing, restart the level or the third one over is actually backing out, that's the level choosing screen. So, if I go over and I click that menu button, I'm taken back. And then from here, Menu button backs me out to the start screen of the game and then back once more to the Apple TV home screen. Whether it's an app or a game, it's impossible to get lost as long as menu takes you back.

Now, the remote also has an accelerometer and a gyroscope built into it and you can use this data for a lot of different kinds of interactions.

This could be the primary way of interacting with something. So for the game, "Galaxy and Fire", you hold the remote like a flight stick and then you use the accelerometer and the gyro to guide your ship through space. But you can also use this as embellishment like the puzzle game, "Shadowmatic".

In here, the camera is making slight adjustments based on how I'm holding the remote in my hand.This isn't at all necessary for game play, it just helps people feel connected to the experience. Now, you can also consider using the remote in landscape orientation.

If you're creating a driving game, this can be really fun way to guide your vehicle. Breakneck is a futuristic raising game and it's a lot of fun to hold your remote like a steering wheel. So you just guide your ship that way. So, as you can see, you've got a lot of options when you're designing your interaction model for your Apple TV app. Now, the way most of these interactions work is by utilizing what we call The Focus Model. And this means that in most cases, you're moving the focus of the remote, not the object directly.

Now, at first, this could feel backwards because this is usually the opposite of how things work on iOS where you're putting your finger right on the touchscreen.

After a little bit of time of using Apple TV, however, this quickly becomes intuitive. So, regardless of whether you're making an app or game or whether or not you use UI Kit, people will expect to be able to swipe and have the focus of the remote move from one object to another. So in this case, when I swipe right on the remote, focus moves to the right. So, here in Music, if I want to move focus to the album on the far right, I just swipe right.

That's pretty straightforward. But sometimes, moving the focus also causes the content to move, usually in order to keep things on screen.

So here in this case, swiping right still moves focus to the right, but you'll see the content is going to simultaneously move to the left.

And that's how it works in the Airbnb app. If I want to learn more about the place to the right of Napa, I swipe right to move focus to the right.

And as the focus moves, the content moves to the left to keep it visible on screen. So if your layouts have rows of content like this or vertical lists of items or really any number of objects visible on screen, swiping should move the focus of the remote.

Now if you have only one item on screen, swiping works differently. So in this case, it's just one object, so swiping is going to move the object directly. So in this case, swiping right moves the object to the right. So here we are back in the Airbnb app and this is one giant image. So swiping right moves the image to the right. So in this case, it's direct manipulation just like on iOS.

Gestures are going to move the object. And you'll see this a lot in games.When you just have one character on screen, the gestures on the remote are going to move the character directly. OK. So if you have multiple objects on screen, gestures affect the focus of the remote. And if you have only object on the screen, gestures affect the objects.

Apple TV controls can have up to five different states. And for clarity, it's really important that each of these look visually distinct.

So all controls have their normal unselected state and then focused is unique to Apple TV. And this how a control appears when the focus of the remote is on that item. Now throughout the system, we often demonstrate this by moving the object closer to you.

We will add a secondary label if there isn't one already or make it a contrasting color. And the focused item typically responds to small movements on the remote with the parallax effects. Highlighted is a very temporary state on Apple TV and it's what shows when the remote is being clicked.

Now typically this is an animation or state change that makes the item look like it's being pushed, and selected is when a control was activated but not currently in focus. So throughout the system, we often use a semi-transparent shaded background to indicate this. And then the disabled state is for unusable items. And typically these look grayed out.

Now if you're using standard UI Kit controls, these states will be all handled for you. But if you have custom controls you're going need to do a little bit of work to insure the different states look distinct. So let me show some examples in context.

So here we are in iTunes Movies, looking at one of the movies here. The preview button is in the focused state.

And I can tell that because it's larger, it's closer to me. It has a contrasting color for its background and the label is also a contrasting color relative to the other buttons. So this indicates to me that clicking on the remote will start playback of this preview.

Now, the buy and the wish list buttons are both in their normal unselected state. So I except to able to swipe right on the remote and activate them. Now, available to rent is actually disabled because the labels are a gray color so now I know that I can't swipe over there to activate that one. Now, here on the Apple TV home screen, the appstore icon is in its focused state.

It's larger, closer to me, and has a label whereas the other icons don't. It also gets the parallax effect when I make small movements on the remote. And then when I click, that's when you can see that highlighted state.

The animation shows it pressing in and the shadows and the size of the button have changed. So that gives me the feedback that the click has been recognized by the system and I'm about to launch the app store app. Now, here in trailers, the selected state is very important because it helps communicate which movie listings we're viewing. So, in the list of theaters on the left, the AMC Cupertino Square Theater is selected. It has that semi-transparent shaded background whereas the other theaters don't.

But I can still tell that "Bridge of Spies" is what's in focus. The background is fully opaque, it appears closer to me.

And if someone were to walk into the room right now, they'd know that we were looking at the listings for the AMC Cupertino Square Theater because of that selected state. And without it it's just wouldn't be clear. So that's why the different control states need to look distinct. And the most important one to consider is the focused one. So I'd talk to about that one just a little bit more.

When people can see that one item is in focus, they will instinctively understand how to move through the UI.

Now a good test for this, when you're working on your design, is to look away from the screen for a moment and look back. Is it obvious which one of these things is in focus without scanning your eye cross the entire screen? So here, my eye is immediately drawn to that album on the left. It's larger, it has deeper shadows, and the label is a contrasting color. Now these visual changes work together to make it clear which one is in focus.

Now if you're using UI Kit, you're welcome to use the system default for showing focus, but there are many other ways to make it obvious.

The game "Badland" adds animations to the button that's in focus. Now this makes it really obvious but it also fits in better with the style of "Badland". There's no need to copy what we do for the system if something else is going to feel more immersive for your app or game. And this is the app "PlayKids". And they add a glow and exaggerate the animation for the item that's in focus. So first you'll see the drawing on the easel come to life followed by the elephants and the lion.

[ Music ] Hello. [ Music ] Now even though this is a really brightly-colored interface with a lot of animation, adding sound effects and even more dramatic animation helps make it obvious which one is in focus. Now, if you do intend to use the default focus appearance, be sure to keep those focusable items large and use ample padding between them. Because this space is necessary for helping those focused items stand out.

We spent a lot of time optimizing which sized objects and how much padding works best when interacting with the new remote and all those measurements are here for you in the Human Interface Guidelines. So please feel free to copy them. And I do strongly recommend enabling that parallax effect if you're using standard UI Kit controls. If you custom controls, it's also great if you want to respond to those small gestures on the remote.

But don't feel like you need to try and mimic the system effect. It would take a lot of time to try and replicate it exactly. And something that's similar but slightly off, not identical, is likely to distract people. So instead, choose something that would feel more immersive to the world of your game or the style of your app.

OK, one last point about the focus model. Now in most cases, you're going to want to use click instead of tap as the primary gesture for interactions.

On iOS we use tap. It's very easy to hold your iPhone or your iPad with one hand without accidentally hitting that touchscreen. But on Apple TV, people may naturally rest their finger on the remote like this, so it's very easy to accidentally tap when you're really just holding the remote or picking it up off the table or passing it to a friend. So in most cases, click is going to be better option for triggering those actions. It's a very intentional gesture and it's hard to do accidentally.

OK. So as you're designing how your app is going to work with the new remote, keep these things in mind. If you have multiple objects on screen, gestures move the focus of the remote. And if it's just one object, gestures move the object directly.

Make sure that your different control states look visually distinct especially focus, and use clicks instead of taps as the primary interaction.