Transcript
[ Music ]
[ Applause ]
>> 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.
Yeah. Right.
[ Applause ]
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
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
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
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.
All right.
So, let's just toss some
text up on that screen.
And can anybody see this?
Well? Somewhat.
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.
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.
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,
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
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.
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.
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.
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
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.
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.
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?
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.
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,
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.
All right.
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,
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.
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
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.
That's it.
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.
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,
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.
All right.
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
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,
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.
[ Applause ]