Understanding what makes the Apple TV interaction model so unique is essential to designing a great tvOS app. Learn the design principles of the new Apple TV UI and get tips for creating an intuitive user experience with the new Siri Remote.
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
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
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
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 ]
[ 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
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.
Looking for something specific? Enter a topic above and jump straight to the good stuff.
An error occurred when submitting your query. Please check your Internet connection and try again.