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.

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. 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. 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. 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, 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. 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. 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. 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 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.