Change the way the world experiences television through apps that are designed to be immersive, intuitive and easy to use. Learn best practices and techniques to take advantage of the big screen and the Siri Remote.
[ Music ]
Hi. My name is Lauren Strehlow,
and I'm User Experience Evangelist at Apple.
I work directly with developers to improve the user experience
of their apps on Apple TV.
And I'm here today to talk to you about Designing for tvOS.
This is a really exciting time
because this is the Apple TV's first WWDC.
And your Apple TV apps have already started
to change the way we think of TV.
And Apple TV App Store is only 9 months old.
And this newness provides an incredible opportunity
for your apps.
So, today we will talk about tvOS,
because this is a unique platform that has its own set
of design considerations.
But, before we dive into all of that,
we need to first take a step back and talk about TV.
This is TV.
And we love TV.
We love TV because it's a way to be entertained.
It's a way to learn, to play, and to connect.
TV's are powerful.
And the TV is something that multiple people can experience
at the same time, which makes the experience
at Apple TV unique from the rest of our devices, because most
of our devices are close.
Their personal because they're in our hands
and we interact with them directly.
But, the TV is not in your hands, a remote is.
And that screen is far away from you.
So, if you want to make an awesome Apple TV app,
you must first acknowledge that distance
between you and the screen.
And you have to understand that when you interact
with that screen that's far away from you it's indirect,
because of that distance.
So, this makes the Apple TV different
from the rest of our devices.
So, you have to design differently for the TV.
So, today talking about designing for tvOS,
we will first go over some basics.
And that way we will all be on the same page.
And then we'll jump into the fundamental differences
of the TV.
And how to design your app for distance.
And how to design your app to work well with the remote.
We're going to touch on some great new features in tvOS,
and those will be the ones that impact your designs.
And I also want to share a few apps
that have designed differently for the Apple TV.
So, let's go ahead and start with some basics.
If you're coming over from iOS, note that on Apple TV,
app layouts don't automatically adjust
to the size of the screen.
Your interface is going to be the same size regardless
of the TV screen size.
So, you need to design with a screen resolution of 1920
by 1080 pixels, which implies a 16:9 wide screen aspect ratio.
And all of your assets will be at a 1x resolution.
And there's something else to keep in mind,
over scanning can occur on older TV's.
And this could cause unintentional cropping.
So, keep your apps main content away
from the edges of the screen.
And a good guide is to avoid 60 pixels from the top and bottom,
and 90 pixels from each side.
So, that's it.
Those are the basics.
So, now we can talk about the first key factor
that makes the TV unique and how it impacts your designs.
And that is our distance from the screen.
So, on average we are 10 feet away from the TV screen.
And that's significant, because you need to be aware
of that distance when you're considering your apps layout.
So, keep in mind that larger items are much easier
to see from far away.
Everything in your user interface should be larger.
And that's starting with graphics.
Both graphics and your user interface elements such as,
buttons or controls need to be larger
so they can be easily seen from across the room.
Now, I know it may feel unnatural
if you're used to designing for iOS.
But, on Apple TV you want to make sure that nobody has
to struggle to see what's on screen.
So, larger items are simply easier to see from a distance.
In addition to increasing your graphic size, it's important
to include plenty of spacing
between those elements on screen.
This will help people see each individual item.
And it makes them easier to navigate and select.
Now, grid layouts tend to work really well on the Apple TV.
And if you use a grid layout note that if all
of your content doesn't fit onto a single screen, you can elude
to those off-screen items.
This will let people know they can navigate there.
And only those partially off-screen items should appear
in this zone.
So, for Apple TV, if you want a jump start on your designs,
there's some templates available,
and they're all highly customizable.
You have control over the layout, size,
background, tinting, and more.
You can find these on the tvOS Interface Guidelines.
And I'll include a link to them at the end of this talk today.
So, now let's talk about text.
Let's just imagine we're in a really big room
and we're sitting away from a big screen.
So, let's just toss some text up on that screen.
And can anybody see this?
Okay. People in the front, I know you can.
But, people in the back, it might be a little bit harder.
So, what's my point?
Make your text much larger on the TV.
This will insure your titles, buttons, labels,
and descriptions will all be legible.
But, increasing the point size isn't the only thing
that you can do for text on screen.
You can also use a heavier font weight to increase legibility.
This weight is significantly easier to see than this one.
So, when you're evaluating a font for your Apple TV app,
font's with weights like regular, medium, semi-bold,
and bold are all great options.
And you typically want to avoid fonts that are light or thin.
So, if you have a brand font that is thin,
I highly recommend prioritizing legibility.
And then see where you can integrate a heavier font weight.
Even if it's just up to regular, because it will be
so much easier to see on the TV.
And I know that beautiful, thin font weight is a part
of your brand identity.
But, if people can't read the text in your app,
it's going to be a poor user experience.
And that's going to reflect poorly on your brand.
So, in the system, we use this great font
and it's called San Francisco.
There are two variants of this font.
Both of which were designed for high legibility on a big screen.
There's San Francisco text and San Francisco display.
So, let's take a look at them in the system.
This is San Francisco on Apple TV.
And when you use San Francisco in your apps,
tvOS automatically applies the most appropriate text style
based on point size.
And it's going to respect accessibility settings
such as bold type.
San Francisco will work great in most apps.
But, if you need to use a custom font,
make sure that it respects accessibility settings,
and it's legible from a distance.
So, for example, in Badland they use a custom font that fits well
within the style of the game.
It reads clearly across the room
because of its heavier font weight.
So, unless your app has a compelling reason
for a custom font, stick with San Francisco,
because above all text on screen must be legible.
So, I've only touched on a few pieces of what
to consider with text on screen.
If you want to learn more about type, I recommend checking
out the Typography and Font talk happening tomorrow morning
on this stage with my friend, Antonio.
So, we've already covered layout, graphics,
spacing, templates, and text.
All to accommodate for the distance
between us and the TV screen.
But, there's still one more thing to consider.
And that is your apps hierarchy.
Keep your app approachable on Apple TV.
Do you remember how you could just turn on TV
and just instantly be watching your favorite show?
Well, that ease and instant access should still hold true
to your apps on the Apple TV today.
So, in designing your apps hierarchy, keep it simple.
Let people jump immediately into your apps experience.
Too many choices or options can easily overwhelm,
which will add a psychological distance in addition
to the physical distance from the TV screen.
So, if you have a lot of content,
a great way to simplify your app is to use a tab bar.
This will instantly flatten your apps hierarchy
and it'll organize all of your content into different sections
that are quick and easy to access.
Each tab bar should provide value and easy navigation
from the top level of your app.
And if you use a tab bar all tabs should fit
on the screen at once.
And don't just use it as your apps junk drawer.
If you need to declutter your app,
I recommend placing your app settings in system settings.
People tend to only go to settings once and so
that you don't need to waste space for it in your tab bar
or in the main level of your app.
So, to recap, when designing for Apple TV,
remember on average there's a 10 foot distance
between you and the screen.
And to accommodate for that distance,
you want to use larger graphics and interface elements.
You want to provide adequate spacing between those elements
so they're easier to see, navigate, and select.
With text, legibility is essential.
Use large point sizes and heavier font weights.
So, don't be afraid to go big and bold with your text on TV.
And remember to keep your app approachable
with a very simple hierarchy.
Don't add to the distance with an overly complicated app.
And there's actually a really easy way
to check your designs before jumping into Xcode.
And that is to toss your wire frames or concept with AirPlay
and review your layout, spacing, graphics,
and text on an actual TV across the room.
And you can ask yourself,
can you see everything clearly from 10 feet away?
And is it easy to jump into your apps experience.
I know this may seem like a really obvious point,
but I've been in many UI reviews were the majority
of issues could have been caught
if the app had simply been checked
on an actual TV across the room.
I've seen some really great seasoned iOS developers get
tripped up on designing for the Apple TV,
because they have not designed with distance in mind.
If you don't have a TV to review your app on, get one.
And don't just, yeah, and don't just place it next
to you at your desk.
You need to place it across the room, because if you do all
of that, people will be able to see clearly what's on screen.
And they will love being able to jump immediately
into your apps experience.
So, that's designing for distance on tvOS.
And because of that distance, we interact with the TV
with the remote, which is the second key factor that you need
to consider when designing for tvOS.
So, as I mentioned, the rest of our devices, where you look
and where you interact is the same.
However, on the Apple TV, where you look
and where you interact is separate.
The Siri Remote allows us to connect
with the TV screen that's far away from us.
And people want to be immersed with what's on screen.
They expect interacting to be easy and intuitive.
So, if they have to look down at the remote and guess how
to go back, the connection with your app on screen is broken.
So, to avoid breaking
that connection you should implement your app
to work seamlessly with the Siri Remote.
And to do that, you need to know how the Siri Remote works.
First, there's a touch surface
on the Siri Remote where you can swipe.
And that's going to move focus up, down, left, and right.
And that's typically used for scrolling on screen.
You can also click on the touch surface
and that activates a control or selects an item.
You can also click and hold if you want
to enter into an edit state.
And this could also be great in a game if you want to select
and drag an item around on screen.
And finally you can tap, which navigates
through a collection one by one.
But, it's also a really easy gesture to repeat.
So, it could be great in a game if a quick response is needed
as long as that action is different from a click.
So, moving on to the buttons.
You have the menu button.
And pressing this should return you to the previous screen.
There's Play/Pause, which should do exactly
that during media playback.
And it's also a great secondary trigger in games.
And also remember that you can leverage the remotes
accelerometer, gyroscope, and use it in landscape mode.
Siri, home, and the volume buttons are all reserved
for the system.
But, I want to go back and give menu a little bit
of special attention, and give you some detail on how it works.
So, here's your app hierarchy.
If you click, that's going to take you deeper
into each level of your app.
And pressing menu will return you to the previous screen.
This is the correct and expected behavior of menu in most apps.
However, only in games on a pause menu,
there's a slight variation,
and I'll like to show that to you now.
So, for example in the game, Rayman Adventures,
if I press menu while playing the game,
I'm presented with a pause menu.
And because we're used to pressing the same button
to bring us out of a pause state,
pressing menu here would resume the game.
So, it's important to include a place on this menu
to exit out of the game.
So, in this case it's the map icon.
And if I navigate to that, that will take me
to the level selection screen.
And this is where menu resumes its expected behavior.
If you press menu, it brings you back to the game start screen.
And with one more press you're back
on the Apple TV home screen.
So, that's how the Siri Remote works.
And it should behave exactly like that in your app or game.
So, as you may have heard in a keynote, there is a fantastic,
new remote app that works just like a Siri Remote.
It has a great game controller layout.
And speaking of game controllers,
if your game has an advanced input mechanic
that can't be supported by the Siri Remote,
you can now require the use of the game controller.
And if your game is controller only,
or if you support game controllers in addition
to the Siri Remote, make sure that your app allows people
to navigate through the Apple TV UI in addition to play the game.
And you should always gracefully inform people
if a controller is required, or if one is not connected,
because your app can be launched at any time.
And even though your game may be enhanced with a controller,
remember that the Siri Remote comes
with every single Apple TV.
And a controller is an optional purchase.
So, if you go controller only, you could be missing
out on new players who want
to try your game first before purchasing a controller.
So, remember, with Apple TV, people's eyes are onscreen
and they don't want to look down, or think about how
to navigate, or interact.
So, use intuitive gestures and expected button behaviors.
And if your app works seamlessly with the Siri Remote,
new remote app, and game controllers,
people will stay connect to your apps experience.
So, what do all of these devices control on screen?
They control focus.
And focus needs to be obvious so people know what is actionable.
So, on Apple TV, focus is identified
when an object is elevated, and it responds with parallax
to subtle movements on the touch surface of the Siri Remote.
Did you all notice how your eyes were immediately drawn
to that movement?
Well, that's exactly what you want.
And that's why the system focus model is so great.
People expect to be able to tap, and also swipe to be able
to navigate around onscreen.
And they should always know where they are
and what's actionable.
So, now watch closely.
This will be a very slow and controlled swipe
to illustrate something unique about the system focus model.
Notice how it gently indicates
which direction you're navigating onscreen.
And this helps aid in navigation.
This focus model is used throughout the system.
And this consistent look
and feel helps maintain the connection that we have
with what's on screen.
So, use the system focus model.
Only in a few special cases, most common in games,
you may want to customize the focus appearance.
So, for example, back in Badland they use animation for focus.
And this fits well within the style of the game, and it works
because focus is obvious.
So, if you want to learn more about UI Kit and the focus API,
check out the Focus and Interaction
on tvOS session tomorrow at 4:00 in Mission.
So, with your app icon on Apple TV, you should design
with focus and parallax in mind.
You can create some pretty cool effects with image layering,
transparency, scaling, and motion.
And there's a great parallax preview tool that I'll
in include in the resources for this talk.
So, when you're designing your app for Apple TV,
you should use intuitive gestures
and expected button behaviors such as, menu, returning you
to the previous screen.
And implement your app to work seamlessly
with the Siri Remote's new remote app and game controllers.
You should use the system focus model
for clarity and consistency.
That way people will feel like they're interacting directly
with the screen even though it may be 10 feet away.
And if you make a custom focus appearance,
be sure to make focus obvious.
And focus should always move in the expected direction
to help aid in navigation.
And finally with the remote, it's most important
that you don't break people's connection with what's onscreen.
So, that's designing for the remote on tvOS.
Awesome. We've made it to features.
And there are a lot of great new features in tvOS 10.
For those of you who were in this room before, you heard all
about these directly from the engineering team.
And don't worry, if you missed it and came just for design,
first, thank you so much.
And secondly, you can catch up on
that session on your WWDC app.
So, I'm just going to be focusing
on the new appearance feature,
because that is what directly impacts your designs.
There is now light and dark appearance on the Apple TV.
And this is user specified in settings.
And it changes the look of the entire system.
Pretty much every single control has been adjusted
to some degree for dark appearance.
This include place holder images,
they're dark instead of light.
Shadows have different values.
And this is a great new feature on tvOS.
So, to support dark appearance, your app needs to opt in.
And I encourage you to do so, because you've seen
in this talk today how awesome it is.
So, opt in and your app will respect people's preferences
on how they wish to experience their TV
in their own environment.
Now, user preferences also apply to accessibility.
And Apple TV is packed full of accessibility features
that provide the best user experience for everyone.
Apps implementing custom fonts should match the accessibility
behavior of system fonts and respect settings like bold type.
Accessibility options also can change contrast,
reduce motion, and more.
So, if you have a UIKit based app
that could be made accessible for very little effort.
So, I encourage you to check out these sessions to learn more.
So, appearance and accessibility features are powerful
on tvOS 10.
And I'm looking forward to seeing your apps support them.
So, that's features.
Now, I would love to show you a few apps
that have not only designed for distance and the remote,
but they're also changing what we expect from the TV.
So, first this app is Zova.
And it's a lifestyle fitness app that turns your living room
into a yoga studio or place
where you could workout with a friend.
Not only is this significantly better than investing
in some workout DVD's, but it also works beautifully
on Apple TV, because it's so easy
to find a workout that you want to do.
It has a great well spaced layout.
It's very easy to navigate and find exactly what you're looking
for right from this main screen.
And with one click from the main screen,
you're instantly into a workout.
Main screen to workout.
It's that easy.
And it's not overwhelming, which is great,
because you don't want any additional barriers
between you and getting fit.
Zova does a great job with their layout,
because they use large graphics, and it keeps you focused
on the content of the app.
This app also does something that is really great.
If you put Zova in the top shelf of your Apple TV, you'll be able
to jump immediately into a workout,
because it uses dynamic content in the top shelf.
If you want to find out more about it,
I will link to the Apple TV Tech Talks and the resources today.
So, that is Zova.
This next app that I want to show you is called, Reuters TV.
And Reuters really reimagined what news could be
on the Apple TV.
If you think about traditional news, when you turn it
on you may be popping in five minutes late to a broadcast
and you've already missed all of the big news stories of the day.
And I know you can definitely get all your news
from the internet, but if you really wanted
to just watch a nice segment that had everything you needed
to know, well, wouldn't that be great?
Well, that's exactly what Reuters did.
When you open this app you only have one decision to make.
And that is, how much time do you have for the news today?
You make a single action.
You choose whether that's 10, 15, or 30 minutes.
And as soon as you select one,
you are immediately into the experience.
You're given a quick trailer of what videos are
in your playlist, and then you're watching the news.
If you wanted to swipe up to reveal that playlist,
you can jump to stories that you are more interested in.
And that's the beauty of next level on demand content.
Not only did I choose when I wanted to watch this,
but I was also easily able to skip
to what I wanted to watch with ease.
This app makes it possible to watch the news again.
Now, while there's an amazing team who's behind providing all
of this news content, the apps focused experience is what truly
makes it great.
So, that is Reuters TV.
Next up is a game.
And this game is called, Chameleon Run.
This is a colorful, fun, auto-runner game,
and you may be familiar with it,
because it is an ADA winner this year.
But, that's not why I'm including it.
I have it here for a completely different reason.
So, let's just say that I downloaded Chameleon Run
from the app store, and I've never launched this game before.
So, let's just see what happens when I click open.
Did you guys see that?
It was awesome.
We were instantly into the game.
We just started playing.
Right from launch you're in and you're playing the game.
And that is awesome.
So, now I just want to continue
through this first level a little bit more,
because there's something else special that is going on.
You are reading a text, and seeing the animation
on the Siri Remote, and watching your runner,
all at the same time.
The texting graphics are clear.
So, you're able to play and learn at the exact same time.
And that is fantastic.
So, let's just fast forward to the end of this level.
I assure you I landed every single jump
and I only had to cut this for time.
So, when you pass this first level,
which is your first experience in the game, you get this party.
And you feel great.
You feel accomplished.
And now you're just welcomed to play more.
Chameleon Run is so much fun on the Siri Remote.
It has great game play.
And they support game controllers too.
But, most of all I love that you're immediately able
to jump into the game.
Now, granted not every single app or game can do this.
But, you should still consider what you need to do
to make your apps experience easy, and as quick to jump
to as possible, because that's why people are there.
They just want to jump into your app.
And that's Chameleon Run.
This final app is unique.
And it is called, Late Shift.
This is a cinematic game
that lets you control the main character.
Decisions you make change what happens in the movie.
And if you want to watch and play with friends,
there's a companion app for the iPhone that you can download
and make decisions together.
So, potentially you could have a protagonist
that then turns into an antagonist.
This is a choose-your-own-adventure game
with a really easy navigation, navigational bottle
and a very simple level selection UI.
And the majority of your experience is inside this film.
And this game play is great on the big screen.
You control the movie's plot from your Siri Remote.
The onboarding is integrated
into the first level's voice over.
And it lets you know the important of choice.
Late Shift is an intriguing, entertainment hybrid
that I'm really excited to see emerging
in apps on the Apple TV.
So, we just took a look at a workout app, a news app,
an auto-runner, and an entertainment hybrid.
So, what do all these apps have in common?
Well, they all design for distance and the remote.
But, they also really thought
about what their app could do differently on the Apple TV.
While we've gone through a few examples today's,
remember that TV's are not just in your living room.
They're in classrooms, in offices,
conferences, airports, and more.
So, what do you want your apps TV experience to be?
You need to get into the mindset
of what you want to do on the TV.
And then how to elevate it with tvOS.
This is not a traditional device,
so why have a traditional experience?
We are on the precipice of change for the TV.
And the TV deserves your fresh prospective,
because you can create something powerful and new
that people will love.
So, if there's just one thing that you take away
from this talk today it is, design for TV.
For more information including related resources and the video
of this session, check out this link.
This is has been session 802.
And there are a lot of great related sessions,
including the Typography and Fonts, and Focus Interaction
on tvOS Talk that I mentioned.
And there's a great design talk that's happening on Friday
at 10 AM, here on this stage, called Iterative UI Design.
And if you have an idea for an app and you don't know how
to get started, that would be a great talk to attend.
This has been Designing for tvOS.
Have a great conference.
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.