Best Practices for Designing tvOS Apps

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 has loaded.

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.

It's cheap. 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 dietary restrictions? 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 make sense.

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. All right? 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.

All right? 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.