Get essential design guidance for creating tvOS apps and games that are engaging and perfectly tuned for the Apple TV user experience. Learn best practices for designing your loading experience, making authentication quick and easy, providing a valuable and gradual on boarding experience, and optimizing for the Apple TV focus model.
Hello again everybody.
So now that you guys have gotten really good primer on all
of the fundamentals of designing and developing for Apple TV,
I'd like to switch gears a little bit and talk
about best practices for designing
for your Apple TV apps or games.
Now the first one that I want to cover is really super important,
so I need everyone to pay close attention as we get into it.
So I'm just going to jump right into that.
Now you're probably wondering what's happening right now,
which is why it's really, really important
that you consider your loading experience
with your Apple TV apps or games.
You really need to avoid having blank screens at any point
in the loading process.
This is going to be inevitable that loading is going
to be an issue that you have to design for, so you guys want
to take this into account.
If you can, use placeholder graphics
so that you could take people to screens while you're waiting
for content to actually load so that they know what's coming.
So for example when you go into My Photo Stream,
you'll see that we have a bunch of placeholder graphics but
yet we still can get value and see how many photos are in here
for overall in the photo stream as well as this week
and then they'll continue to page in when they're ready.
Now, if you have a full screen experience, you're going to need
to indicate that activity is occurring.
Typically with apps we have the activity indicator, or spinner,
which comes from UIkit.
And that's going to show that something is happening.
Again, if they weren't animated, people would start to wonder
if the app is froze or if there was a problem
with their Apple TV.
But this is actually a little generic.It's meant to be kind
of a standard generic thing but it can be boring and out
of place in a lot of contexts.
So, in the game Rayman Adventures, for example,
you'll see Rayman running
with this little creature flying behind him
and this does exactly the same thing as showing
that activity indicator but it's much more appropriate
for the style of the game.
So by all means consider ways to customize the loading indicator
so that you continue to keep people immersed
in the experience.
But of course it's even better
if you can show explicit progress
about how much content is loaded to set expectations
for how long it's going to take for people to wait
for the next screen or to load fully.
So, Does not Commute handles this really beautifully.
It's this retro style game - driving game -
and we can see here when we launched the game,
we could check out the dashboard and on there the radio
on the console is filling in, to show its progress.And
when it's done loading the game content, it smoothly animates
in to the main screen of the game.
So it sets the tone for the style
of the game.It's completely appropriate to--
again, to that visual style.
And it's also really performant, so you're now waiting
for a really long time.
It's really something to take inspiration from.
Now, of course if you're using on demand resources
as you heard earlier, there's definitely going
to be some loading time that's involved in that.
So you want to let your audience know how much content
So for example on the touchpress app, we can check
out these different symphonies
and have these great visualizations for them.
So I'm going to go over here and check
out the Beethoven symphony.
And as it launches, when I hit play,
[Background Music] we'll see a progress bar,
a percentage loading, some text labels explaining what's going
on and then it loads.
Now if I had a slow connection
or this is maybe a really long symphony, I would--
and it was going more slowly, maybe it would give me time
to get up off the couch go, you know, grab a glass of wine
or water or something while it's loading.
So anyway, it's really great to take inspiration from that.
But, you know, all of these-- in all of these cases,
the loading time was actually really fast.
And again, sometimes that's not really the case.
So you really want to consider using this time if it is going
to take little while to educate
and entertain people as much as possible.
So whether that's learning how to master game play
for a new level of the game or just giving some instructions
about or information about what an app does,
what functions it provides.
So let's take a look at an example of this.
This is the game Galaxy on Fire, and when you launch the game,
you get this really nicely narrated story
about the characters and their back story
and there's a little bit of music.
And this really sets the tone for the game.
But you know, maybe you're seeing this
and you actually saw it at a friend's house before
or you're just really eager to get into game play
and you decide to skip ahead.
Well, there's still more content to load so they can't take you
yet to the game and instead they're using now here these
instructions to tell you how to use the remote
to manipulate game play.
So it's giving some information about how you use the gyro
and the accelerometer.
So this is very educational.
And again, just to be clear, loading is going to be much--
perceived to be much shorter by the people
who are using your app or playing your game
if they're learning something
or being entertained in the process.
And, you know, the thing about showing these screens
up front is that people sometimes don't realize
that the game is still loading in the background,
and which is exactly what was occurring with Galaxy on Fire.
This is a common technique to mask some
of that loading time is by presenting screens like that
in the flow of launching or going to the next level.
So, earlier Allan talked a lot about how to handle
on demand resources loading,
ways to optimize that loading time.
Now, you really want to make sure
that you're taking every opportunity possible to load
in the background and mask that loading from the people
who are using your app.
So for example, let's say you have an intro video before you
get to the main menu of your game.
And then after that, to get to level one, some assets need
to be loaded in order to correctly draw
that game environment or level one.
So there's no reason to make people wait
until they have actually said they want
to play level one before you start to load those assets.
It's highly predictable that they're going
to go proceed on to level one.
So you want to try to move that loading process
to when the game first launches and continue
to load it while they're looking at the menu screen.
OK, so loading is again going to be inevitable on Apple TV,
so you want to really spend time thinking through how to design
for that loading process.
You want to make sure that you never leave people waiting
or confused about what they're waiting for and thinking
about your app or game has frozen
or that there's something wrong with their Apple TV.
And whenever possible, try to minimize that loading time
and use it for educating people.
OK, so now, that's enough about loading,
let's switch gears a bit.
We worked with a lot of developers
in their Apple TV apps in the initial bring up,
and one of the most common questions that we received was
about how to handle authentication.
Now, people are going to have very limited patience
for doing data entry on their TV.
So if having an account is not absolutely necessary for people
to get enjoyment or value out of your app or game,
then do not require people to sign
in before they can actually use it.
But of course, if you're selling physical products, you're going
to need to get payment information,
and a shipping address, so some amount
of data entry is going to be required.
And similarly, if you allow the content of your app or game
to be personalized by having bookmarks or wish lists
or social media integration, then of course you're going
to need to know who someone is.
And since Apple TV is a communal device,
meaning multiple people maybe using an app
or game throughout the course of the day, you're going to need
to allow people to switch to different accounts
and handle that appropriately.
So let's look at some common ways of doing this correctly.
Now, the first bit of advice, and this is true on iOS and--
is as true on iOS as it is in Apple TV,
is that I recommend delaying requiring people to sign
in as long as possible.
If people have a chance to learn more about what it is
that your app does or how fun your game is, they're going
to be much more likely to authenticate
because they see the value that you're proving to them.
If you try to get them to force them to sign in,
before they realize that,
you risk them walking away and never returning.
Now Gilt of course sells really great designer clothing
and other household products and they let you browse all
of their products without ever having to sign
in right from the app launch.
They only ask you to sign
in once you're ready to buy something.
So let's take a look at that.
Now I have to buy a housewarming present for a friend of mine.
She has really particular taste in clothing and furniture.
Glam furniture, this looks pretty good.
Yeah. This is super tasteful.
I think this is going to match her style well.
Oh yeah, I think we have a winner.
And then select that.
Great. I'm going to go ahead and buy this.
It's a little spendy, but I think it's worth it.
So, only after I've made a decision
to actually buy a product am I asked to enter
in my email and password.
And it completely makes sense to me why I'm being asked
for this information, right?
They put this off until the point
when it's absolutely necessary, OK.
So, again, if you don't need the people to sign in,
don't make them do it.
Try to avoid making them sign in on first launch.
Now, filling out forms, of course, isn't fun on any device.
So, you also want to minimize the amount of information
that you're expecting people to provide to your app.
Zumper is an app for finding apartments
to rent in San Francisco.
So, let's take a look at what's available here.
And we navigate around, see a couple photos.
This one looks OK, right?
I want to get in contact
with the real estate agent, the listing agent.
And so I say request more info.
Again, at this point in time, all I'm asked for is my name
and my email because this is the minimum amount
of information that's necessary from Zumper in order for someone
to get in contact with me.
They could have asked me about all sorts of other information,
what's my phone number, when do I plan on moving.
Do I have any pets, do those pets have any
All sorts of really important information, right?
But they didn't ask that because they want
to reduce the likelihood that I'm going to bail
out at this stage in the process.
It's really important to not overload this
with too many questions.
So keep it light and keep people immersed in your content instead
of being distracted by forms.
Now, if you need to keep-- collect an email address,
you really want to use the email field.
This is going to automatically give you the email keyboard,
which includes a Recent tab.
And when you select it, you can pick from email addresses
that have been entered on this Apple TV,
whether it was you app or another app.
So it's a really fast way for people to enter
in their email information.
OK. Now, if your app relies on frameworks
that are not available on Apple TV, you might need to get people
to another device in order to complete the sign-in process.
If you refer people to the web, then they can use their iPhone,
iPad, Mac, some other device if they have one,
to sign in to your app.
So, for example HBO GO requires a subscription
from a cable provider.
Their activation process sends you to the web
where you can sign in to your cable provider service
and input this code to link your account to your Apple TV app.
Now, in some cases, you might also--
you might need to collect lot of information, which isn't really
that practical via the onscreen keyboard.
So, another way to accomplish that is to make a companion app
or use your current iOS app if you already have one.
Not On The High Street is a way--
sells gifts that you can customize or personalize
with people's names or other messages.
And since the checkout process here involves crafting the
inscription, as well as adding a shipping address
and inputting credit card details,
they have you complete the process
over on their companion app.
This means that anyone can browse their storefront here
on the TV and then complete the checkout process
where it may be easier on their iPhone or their iPad.
So, let's how that works.
Now I'm looking for a birthday present for my nephew here.
This robe is interesting.
I like the little ears on the hood.
You might need to see if they have adult sizes for this one.
I'm going to navigate over to the buy button and when I do
that I'm prompted to continue the process on my iPhone,
because I actually have it installed
on my iPhone, all right?
So, when I click buy, right, I'm redirected over here
where it's going to be a lot easier for me
to complete the transaction.
So, let's see how that looks.
I get my iPhone, launch it and then through Bonjour--
They're using Bonjour to discover local iOS devices
and they can set up their own app on the iOS device
to put the item into the shopping cart
and get me prepared for the next stage of entering
in all of this information.
So, companion app is really good if you have this kind
of complex transactions.
Now, if you have multiple people using your app or game
in a single household, you're also going to need
to include a way to quickly switch between profiles.
Airbnb is a way to rent vacation houses or apartments
but you don't need an account of course
to browse what's available.
But if you sign in, you can save the places
that you find to your wish list.
And they need to and are successful
in making it really obvious who is currently signed in.
So let's see how that looks.
We're going to launch the app
and immediately I see this really strong label it says,
we're looking at my wish list.
Down on the bottom of the screen-- and I apologize,
this might be a little hard to see--
is my avatar which is selected here.
So I know that I'm signed in with my account.
To the left is a way for me to add a new account
and to the right is my wife's profile which--
and she's here because she's signed
in previously on Apple TV app.
And I can easily switch to her profile by moving focus
over there and selecting and prompted to get confirmation
about whether we want to switch accounts.
And when I do so, it's now very clear that we're signed
in with her account and to reinforce that we're looking
at her wish list and not mine.
This text-- Very large text is overlaid on the key image
to let us know that we're looking at her wish list.
So it's very easy to switch accounts
and it's very clear whose account we're looking at.
OK. Now, just one last tip related to authentication
and that is it's crucial that you make it really easy
and obvious for people to be able to restore purchases.
Because this is a new platform, it's highly likely
that the people who are using your app on Apple TV,
if you already have one on iOS, are going to want to be able
to access the content that they've already paid
for over on your iOS app.
OK, so those are all of my tips related to authentication.
Again, just a recap, if you have a strong need for people
to sign in, make it as painless as possible.
Delay sign in until it's absolutely necessary.
Only request the minimum amount of information that you need
and try to make the process easy by using the email field
or an alternative device.
OK, so switching gears again.
I'd like to cover some good practices for onboarding
with your Apple TV app.
Onboarding, just so we're on the same page,
is essentially your app's first impression with the people
who use it, whether it's the players of your game
or the people who use your app.
Onboarding is crucial in helping people
to understand how you use an app,
so sometimes it can be really necessary.
Or sometimes it can be a complete and total annoyance.
So, the first thing that you need to do is ask yourself
if there's anything that people need
to know before they get started,
or will they just instinctively know how
to use your app or play your game.
Now, if they will just know how to use it instinctively,
then resist the temptation to explain every feature
or possible interaction upfront.
More than any other kind of device that we use,
we look to the TV for entertainment.
So we don't want to sit through screen after screen
of instructions or go through a million different menu screens
before we're actually able to receive enjoyment out of a game
or utility from an app.
Allow people to get in to the action as quickly as possible.
So here's how it works in the game Badland.
There's a short animation sequence upfront.
You see it kind of rumble and then you see some junk come
out of this contraption and I'm not even sure what it is.
And then there's this little character at the bottom,
and it's just blinking.
I'm not really sure what to do, so I just start to interact
with the remote, maybe click on the touch surface
and we see him respond and he starts flapping his wings,
flying in the air and off we go.
We're in to playing the game.
There's no other instruction provided up front with diagrams
about the remote and how you use that to control game play.
You just get right into it.
It's really simple and it's much more fun
to just jump into the game.
Now, onboarding should never be a crutch for bad design.
If your UI is not intuitive, then you need
to revisit the design rather than trying to remedy it
by providing onboarding instructions up front.
Now if you've done a really great job with the design
of your app's UI, then don't get in between people
and the content that you offer.
Let them jump right into the experience.
Now, of course for games that have more varied
or extended game controls, you may need
to show what the controls are for the remote
or a game controller if you support them.
Now this is especially true if you need people
to hold the remote in landscape orientation.
So this is the game Breakneck again.
I showed it earlier.
And they allow you to drive the ship
as though you were holding a steering wheel like this.
Now, it's vital that people understand that because
if you're holding the remote like this you're going
to crash instantly, right?
So right when the game starts, they're flying
and then they pause the game play and show you this screen,
which very clearly signals to people how they're supposed
to be holding the remote.
And there's not a whole lot of text here.
It's highly visual, so it's very easy.to just quickly get what
the instruction is.
And in order to proceed, you have to click the touch surface.
And this basically pretty much ensures that people are going
to change orientation of the remote and then click
and be ready to play so they don't crash the second the
screen goes away.
And it's also really important to use the appropriate language,
and-- There's sort of two aspects of this.
Firstly, you want to use language that's appropriate
for the type of game controller people are using.
So in the game Transistor,
one of the instructions you'll see is onscreen it says "click".
And this is shown to people who are using the Siri Remote.
But if you're using a game controller,
the instructions are different.
You see what the A, B, X and Y buttons do
or do not do in some cases here.
Now, this would be completely inappropriate to show to someone
who has a Siri remote because of course it doesn't have these
buttons and conversely showing an instruction that says click
to someone with the game controller also wouldn't
OK. So it's also really clear--
important to be clear on what the right terms are.
You click the touch surface, you press the Menu button
and you press the Play/Pause button.
And of course with the game controller you press the A,
B, X and Y buttons.
It's good to be consistent with that terminology just
to make sure that you're speaking as clearly
as possible OK, so when you're explaining how to play,
you also want to make sure
that you're teaching people gradually and in context.
You don't want to overload them
with too many instructions right off the bat.
So let's take a look at a really great example of this.
This is from Alto's Adventure.
So first we just press start.
We get a little bit of explanation what purpose
of the game is, which is to catch these llamas
in order to save them.
And we can do pretty much nothing else
but save them right off the bat, and we see what happens
and we get the feedback that we're successful in that task.
Now there's a rock, we're told to jump over it by clicking.
Awesome, we did it.
We didn't crash, here's some coins.
We just run through them.
We don't have to target them.
We see that they show up in the top left corner where we kind
of get an explanation of what points do.
Next we're in the air, we're told to hold click--
click and hold to back flip and we're told
that that gives us more speed and also as--
and then next we see this ramp and a bunting line
and we are instructed about combos and how
that gives us a multiplier for our points.
And then we get confirmation that we successfully did it.
And it just goes on and on and on like that.
Now, alternatively, they could have started the game
by showing you something like this, right?
But this would obviously be horrible.
Yet this is all the stuff that we learned in that first minute
of game play but we learned it by doing it.
So it's much more fun to learn how to jump by actually jumping,
and it's way more effective, OK.
So resist the temptation to start the experience
with a long list of instructions.
Teach people gradually and in context.
It's super important.
And also keep in mind that people learn in different ways
and at different rates.
So you want to keep an eye out for people
who might be having trouble using your app
or playing your game.
Now, and when you see that,
give them a little bit more instruction.
Help them along.
One really important sign I think to recognize
that people are having trouble playing your game is
when they actually choose to exit the game play
by pressing the menu button and going back to the pause screen.
They might be exiting the game because they don't know how
to play and therefore they're not doing very well
and so they're kind of getting bored or frustrated.
So in Galaxy on Fire, for example, we're flying our ship
and maybe we're having a hard time.
We're not really sure how to control it so we go
to the pause menu because we're thinking about exiting the game
but here in the pause menu we're provided
with some additional instructions about what swiping
up and down and clicking and swiping side to side will do.
And because these things might not have been immediately
obvious to people, they could have easily gotten
into playing the game without having learned this stuff.
This is a really great way
to remind people how they can control game play
in a very seamless fashion.
And you also may want to give people the opportunity
to replay tutorial modes.
Again, if they kind of got
into the deep end a little bit playing the game
and weren't really capable of advancing
to more advanced levels.
So again in Alto's Adventure we saw
that tutorial mode right off the bat.
We're playing it.
You can always go back to it
by pressing the replay tutorial button
in the pause menu under settings.
So when you design your onboarding experience,
just to recap here.
Make sure that you're not getting in the way
of people enjoying your app or game.
Show controls on the remote clearly.
Teach people gradually and in context.
And anticipate when people might need help
by proactively reminding them about how to play your game.
Now, there's a really great talk I want to refer you to.
It was given by my colleague Rachel Roth in 2014 at WWDC.
And it's all about onboarding and it was really about iOS
but all of the principles and techniques
that she explained completely apply to Apple TV.
And I'll have a link to that at the end.
OK. So finally, let's talk about cursors.
So some people think that cursors are necessary
to precisely target items on screen.
Those people are wrong.
You've heard a lot today about the focus model,
of being the standard interaction for the platform.
And here's why.
People don't come home from a long day at work and plop
down on the couch and turn on the TV
because they want to do a lot of work.
The focus model is very forgiving.
You can be lazy with your interactions
and still easily make your way through the interface.
Cursors are harder to use precisely
and they break the illusion
of being immersed in a different world.
They very rapidly start to feel like work.
So let me show you what I mean.
Using the focus model, I can easily switch
between these two items by swiping from left to right.
Or I can just tap on the right side
of the touch surface and also shift focus.
And that takes very little effort.
But aiming that precisely with a cursor is not as easy.
It's much more likely that I'll swipe from left to right
and miss the target, shooting above or below.
Or I'll swipe from left to right
and just completely overshoot the target.
Or-- And this is by far the most common case.
I swipe from left to right and I swipe and I swipe and I swipe
and eventually I get to my destination.
In all of these cases, it would take multiple gestures from--
to move focus from one item to another.
And this quickly starts to feel like a lot of work
and will rapidly become frustrating for people.
OK. Now, in Galaxy on Fire, I fly my ship freely
through space I'm exploring.
And so this feels really natural.
This isn't exactly like a cursor but bear with me for a second.
But when it comes to their pause menu, I have this fixed number
of items on screen and they use the focus model
to switch between them.
It'd be very frustrating for me if I had to fly the ship
to those buttons in order to select them.
So if you have a fixed number of very obvious choices
such as a menu like this, you want to use the focus model
to make it really easy to navigate
between the various options.
And the same goes for game play.
This is a memory game in the app PlayKids.
And as you might have expected,
they make apps for kids, like me.
This would be very tough for people to play if you had
to move a cursor around the screen.
But since they use the focus model,
it's really easy and it's fun.
Our attention is on the colorful illustrations
and the nice sound effects
and remembering what the matching card is.
It's super challenging at this level.
I'm not distracted or frustrated by having to drag a cursor
around the screen here.
This is especially important for children
who don't have the same kind of dexterity
or motor skills as adults do.
So, resist the temptation to use cursor in your game.
People will expect to be able to use the focus model
and are going to be disappointed with anything else.
So, quick recap.
Be sure that your loading experience is great
by giving feedback about progress.
Use loading as an opportunity to educate and entertain
and minimize loading time as much possible.
Delay the need to authenticate as long as possible
and require minimal information.
Onboard people gradually and in context
and make learning fun and entertaining.
And use the focus model instead of cursors.
I hope this has given you some ideas about how
to make really great app or game for Apple TV.
And I want to wrap this up by just saying--
and this relates to cursors a little bit that--
just bear with me for a second
but this is an entirely new platform
and it has a very different interaction model.
It's not the same as iPhone or Mac or anything else, right?
You need to design specifically for this platform.
Even if you have a really awesome game or app on iOS,
you need to make sure that you're adapting it to the--
and the way people interact with an Apple TV
or else it's really not going to be that successful.
So, I hope all of these tips help you go
down a really good path.
I really-- I'm looking forward to seeing what you produce.
And for more information, I encourage you to go
to the tvOS landing page.
It's at developer.apple.com.
Definitely check out the human interface guidelines and check
out the onboarding video that I had mentioned earlier.
And if you don't have quite enough time to write this
down while I'm talking, you can search for it
and pretty easily find it.
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.