tvOS로 TV 경험 개선하기

Good day. Welcome. Over the past year, my team and I have been reimagining the Apple TV experience. We've been testing ideas and exploring ways to bring the fun back into browsing.

Today, we're going to share with you our approach to mastering the living room and connecting people more thoughtfully to the content they love.

My name is Tommy Payne. My friends call me T. Payne, and I'm a designer here at Apple.

Growing up in Australia, the rest of the world felt very far away, and I was searching for ways to connect. I was interested and curious about other cultures, other people, different areas and environments. So I looked to TV and movies to bridge that connection.

And I would come home from school, plunk down on the couch, and turn on the tele. And I would start to channel surf, flicking up and down until something caught my attention. And when it did, I was captivated. I was engrossed. I was drawn into that story.

Picture in your mind a film or TV show that you connected with.

Think about how it made you feel and how time and space melted away when it's just you living that drama. Now, hold on to that feeling as we continue. I'm not going to be talking about code, but my friends will get to that. I'm going to talk about the joy of discovery.

How do we get people into what they want to watch quicker and remove barriers to entry? The current state of TV, well, it's kind of tedious. You're presented with rows and rows and rows of content to scroll through. Who here has spent five minutes, 10 minutes, 20 minutes just searching for something to watch? It's a common and frustrating experience. And in that, we've become paralyzed by choice and robbed by indecision.

So, that's the problem.

Now, let's talk about the solution.

Apple TV has purposefully migrated its designs towards a content first experience. And all that really means is something's on, something's playing. When you launch into the application, it's alive. So, I'm going to break down for you how to achieve a content first experience with some best practices, and I'm going to use examples from the redesign of Top Shelf and a couple from our own TV app.

First of all, we want to remove barriers to entry, get rid of any hurdles between the content and the viewer. This principle is why Top Shelf has become interactive and immersive. Let's take a look.

So we launch into Apple TV and we hold on a poster image for five seconds. After which, a trailer comes in. And it's important to note here that that trailer, we don't force sound on the viewer in this instance. Too much sound and video when you first launch into something, it can be destructive. However, we do allow people to invoke the audio later on in the experience. So, the content is taking up all the pixels. It's filling the screen. Next, we want to ensure that because people are now watching something that they can easily interact.

Every swipe or click on the remote, it adds to somebody's cognitive load. So we want to reduce the number of steps it takes for them to achieve their task.

In Top Shelf, we use a visual hint in the upper part of the screen, and this tells people swipe up to enter into full screen mode. Let's take a look at that in action. The user will place their thumb on the remote and swipe up, at which point the dock flies away and you're left with just the trailer playing in all its glory filling the screen.

So you're still actually in a browse mode but it feels like playback, it feels like you're inside the movie which is really cool.

Anywhere that we can streamline interactions, that's a good thing for our viewers. So we've borrowed this interaction from inside of TV app where we use it to invoke and hide menus in the playback experience. So by leveraging that knowledge that already exists in the viewer's mind, we're making it easier because they don't have to learn something from scratch in this new context. So now that people are interacting, you want the app and the experience to feel responsive. Speed and pacing are essential ingredients for minimizing cognitive load. Try and remove latency and lag anywhere you can in your app. That way, it will feel dynamic, it will feel fluid.

We also want to avoid overstimulating people. Closet, chaotic, and distracting interfaces, well, they derail somebody from their task. Imagine if you will you're standing in a room and 11 people are talking to you loudly all at once.

You can't hear what any one person is saying.

If TV app interfaces do this as well, people can't focus. By using too many animations, icons, images and text styles, it competes for somebody's attention. And we don't want somebody be-- to be in that competitive mindset. We want them to be focused and relaxed.

Now, that we've made them in this kind of relaxed state, we can think about diversifying the types of content in our UI. And just means playing with shapes and aspect ratios, breaking the grid from time to time.

In our own TV app, we've done this by interspersing a different kind of module in amongst the standard 16 by 9 rows. Now, this allows us to do a couple of things. First, it gives us, the provider, a place to highlight something that's of great importance, something that is really meaningful that we want you to notice. And for the viewer, it allows their eye a moment of pause. As they're scanning through these dense grids, creating something like this gives them a time to breathe. We want to reduce the canvas to simple noncompeting elements. And this means we create a hierarchy.

In the Top Shelf design, the content is of highest priority, so it fills the screen. Then we have the app dock and a picking row below that in the lower third, and they're of slightly less importance. And by prioritizing elements, you help people to navigate.

You help people by leading them through the experience.

Now, meta-data, it's useful but secondary in the content first experience of Top Shelf. Because initially we want to get people excited about what they're watching, and then we signal that there's more info available.

Let's take a look.

So the person was inside the full screen experience of Top Shelf, and they've rested their thumb on the remote or clicked and that invoked the meta-data. By giving control to the viewer over the how and when to access this extra information, the path to pressing play and watching the whole film becomes simplified. And what's more, meta-data can help someone change their mind from being in a browse mode to perhaps purchase, or from browsing to subscribe.

Now pagination dots, they communicate that you're viewing one item in a set. They also indicate the duration of the browsing experience.

In our design, they're kept small at the lower part of the screen and they kind of look like bread crumbs. And we've used Apple TV system materials to ensure that they contrast from any imagery that they sit on top of. We think they make great additions to your applications as well. Chevrons indicate swipe directions, up, down, left, right, but they do something else. They hint at content just off screen.

Together with pagination dots, they help give somebody a sense of place and ground them in the UI. And these little pieces of UI, they're important tools, because they help people avoid having to trip and stumble asking questions, like is this clickable, how do I navigate out of here, and, can I get back to this later? All these kinds of questions risk ruining somebody's experience. So with the redesigned Top Shelf, we've enhanced the best parts of browsing. We used edge-to-edge content, taking up the full real estate available to us. We have familiar navigational queues, helpful meta-data and simple gestures.

But the best part about it is that it feels familiar. It feels like when I was a kid channel surfing. I'm able to go back and forth until something captivates me.

So if you can use a few of these techniques and principles in your own designs, it will make for wonderfully thoughtful applications.

At Apple, we believe in the power of content first.

It's what's best for the viewer. And collectively as we design this vehicle that delivers great content, that can have huge impact. After all, TV, it has unique abilities.

It has the ability to alter our perspective. It has the ability to transport us to a different world. And it has the ability to open our eyes to big ideas. And that's the goal, isn't it? To connect people to stories that change them. So our job as developers or designers, it's not to make people wait in frustration, no, it's to throw open the doors, let them in, and let the content shine.

Because if we can do that, then people are more likely to stay and browse, watch something else and enjoy it.

And that, that will lead to a lasting emotional connection to your product.

Next up, Caleb will talk to you about how to take advantage of the content first experience in your own applications. Caleb.

Thanks, Tommy. My name is Caleb. I'm a software engineer on the Apple TV team.

Today, I'm really excited to share with you some great enhancements we've made to Top Shelf in tvOS 13.

Top Shelf is the first thing a person sees when they wake up an Apple TV. It gives them an easy way to browse content from your apps and offers a simple interaction where they can jump directly into playback.

This year, we wanted to update Top Shelf to take full advantage of the biggest screen in your house, and provide that captivating browse experience that Tommy mentioned earlier.

I'm happy to share with you that this year in tvOS 13, we're doing that with the Carousel. The Carousel had two important features to Top Shelf. First, it's immersive. Full screen image and video content from your apps plays right on the home screen of Apple TV.

When you swipe up to enter full screen mode, our UI gets out of the way, so you can lean back and see what's on.

The Carousel is also interactive. Swiping between apps and between items feels like channel surfing.

When you select an item, you can see this rich meta-data you see here at the bottom of the screen. We think this is the great way for you to showcase the awesome content you have inside your apps right on the home screen of Apple TV. Now, I know that not all content is the same and one UI style may not work equally well for everyone.

So we have two styles available for you in our API.

First is the Actions Carousel.

The Actions Carousel focuses primarily on that full screen image of video content provided by your apps, and offers only a small number of UI elements for you to customize.

Starting in the top-left corner, we have the title and context title.

These tell someone viewing your Top Shelf content what they're looking and why you're showing it to them. You can think of the context title like you would a section header. It adds a logical grouping between items in your Top Shelf. And next we have the Play and More Info buttons.

These buttons gives someone viewing your content an explicit way to jump directly to this item inside your application and either start playback right away or learn more about it.

The second style we have for you is called the Details Carousel. And it looks like this. You'll see some familiar UI elements, top-left corner, our title and context title, in the bottom-left are the Play and More Info buttons. But our API also allows you to provide this rich meta-data you see highlighted here. Fields like summary, genre, duration, or even a rich set of media options to tell someone what the content will look like when they play it back on their TV. It does support 4K HDR or maybe more importantly for someone who's hearing impaired, this does support close captions or audio descriptions. And on the far right, we have a list of named attributes. This is key value data that your application has full control over. In this example, we have a list of featured actors in the Starring section and the director of the movie in the Director section. And it's really important to remember that when you populate these fields, you localize and pluralize them for the amount of content you intend to display. So that's the new Carousel. And when you adopt it, we have some best practices we like you to keep in mind.

The Carousel is best used for content discovery. Some good examples of that might be a featured movie, a new season of a TV show, or personalized recommendations for the signed in user. It should also be updated regularly. This is an opportunity for you to showcase content in the Top Shelf to draw someone into your application. So it needs to be fresh and feel alive.

And like Tommy said, we don't want to overwhelm the user with too much choice. Too many items in the Top Shelf just adds noise and clutter. So we think a good number to keep in mind is somewhere between 5 and 10. Next, images.

Like I said, content in the Top Shelf Carousel is full screen. So your images should be 1920 by 1080 points and they should draw in the entire frame of that content. And our API allows you to specify images in both 1x resolution for 1080p devices and 2x resolution for 4K devices. This is a great way for you to help us optimize your content for the best user experience in Top Shelf. And now, safe areas.

The standard application safe area on tvOS looks like this. You have 90 points of padding on the leading and trailing edges of your screen and 60 points of padding on the top and bottom edges. And remember, it's OK for your content to go outside that Safe Area, but based on the device or TV settings, the user may not be able to see it or interact with it. We have a similar safe area for the Carousel. When you put your images in the Carousel, remember that they might show under system UI like the chevrons, the details UI in the bottom or even the app grid. So, if you have things like title art in your images, make sure they don't conflict with that system UI and make it hard to see or use. And last, videos. Like Tommy showed, you can play videos, trailers for your content in Top Shelf Carousel. Those video should be 1080p high definition. And if possible, you should deliver them to us using HTTP Live Streaming or HLS.

This is another way for you to help us optimize your content for the best user experience in Top Shelf. Those videos should be fast to load and we should be able to optimize them for the users' available bandwidth.

And like I mentioned earlier, the Carousel is a great place for you to preview your content. We don't want you offering a full-length viewing experience in the Carousel.

So we think an appropriate amount of time for your videos is around 2 to 5 minutes. And we encourage you to include audio in your videos. We will make sure the audio only plays at the appropriate time. That means on explicit user action.

So now, we have four UI styles available for you in Top Shelf, starting with Carousel Actions, the Details Carousel, and Sectioned, and Inset Content. And remember if your content doesn't work in the Carousel, if you don't have full screen art or video, that's OK. We still encourage you to use the Sectioned and Inset Content styles to provide that lightweight, easy to browse content experience in a Top Shelf.

So that's an overview of the UI and a little bit about how it works. Now, let's talk about how you build one of these. You'll do that with a Top Shelf Extension.

This year, we have an all new extension and API that makes adopting Top Shelf easier than ever. You'll start by adding a new Top Shelf Extension target to your application in Xcode. And that will grant you access to the Carousel as well as our new API.

So now I'm going go over in three major parts briefly, starting at the top with TVTopShelfContentProvider. This is the root object of your extension and responsible for responding to system requests for Top Shelf data. Our new API makes fetching your content and responding asynchronously really easy.

Next is TVTopShelfContent. This is a protocol you won't really interact with much directly. We provide three concrete classes for you, one for each of the three major UI styles, Carousel, Sectioned, and Inset.

And each of these classes has properties that are distinct for each UI style. And last, we have TVTopShelfItem.

Similar to the content classes, we have different classes for each content style that have varying properties for each UI style.

Carousel, Item Collection, and Sectioned Item for showing Sectioned Content, and Content Item has enough properties to show Inset Content. So now instead of going into any more code, I think it's more fun if we do a demo and see how this all works. So I invite my colleague, Felipe, to the stage and help me out. Felipe? So like I said the first step would be to add a new Top Shelf Extension target to our project in Xcode. So we'll start by adding a new target. And on the tvOS tab, we'll select TV Top Shelf Extension. We'll give it a name and make sure the Embed in Application pop-up is set to the correct value. In this case we already have an extension in our project with some supporting files, so we'll skip this for now and go right to our ContentProvider. This is what it will look like when you add a new Top Shelf Extension to your project.

In the ContentProvider class, the subclasses, TVTopShelfContentProvider and implements loadTopShelfContent, it takes the completionHandler. Right now we're calling that with nil, which just means we don't have anything to display at the moment. So, let's replace that with some real content.

Here, we're fetching a list of featured movies from MoviesClient, and it responds asynchronously with a result of either a movies response or an error. So let's fill out each of those cases with some real content starting with success. Here, we'll call completionHandler with a real model object. And in the case of an error, we still want to call the completionHandler with nil to tell the system we don't have any more work to do right now.

Great. Let's go add some extensions to our models that let us fill out that rich Top Shelf content. Here we have two extensions, one, on our Movie object that knows how to return a Top Shelf sectioned item. And one on our MoviesResponse that knows how to take all those items and bundle them into a sectioned content object. Here, it has a title called Featured Movies and a list of items. And our item class is kind of boring. We only have a title right now. So let's add some more properties starting with images. Our API, like I said, allows you to specify images for both 1x and 2x screen scales. So here we're doing that and we're also setting the image shape to HDTV, which means we want 16 by 9 tiles in our Sectioned Top Shelf. Now we need to handle user actions. What happened from the user interacts with our item in Top Shelf? Starting with displayAction. This is what happens when the user selects your item when it's focused in Top Shelf. And playAction is what happens when the user presses the play button on the Siri Remote again while the item is focused. This will be delivered to your application through its open URL handler and it's important that you take them directly to this content as soon as possible.

That's it. Let's run this and see how it looks.

Fantastic. If you have an extension today that uses Top Shelf, this is probably what it looks like. We have Sectioned title. When we focus around, we can see the title of each item shows underneath. But we really want to use that new immersive browse experience in Top Shelf. So let's go back to Xcode and see what changes we have to make.

The first thing we'll need is to change our makeTopShelfItem function to return a TV Top Shelf Carousel item instead.

And right away the compiler will help us and tell us the image shape isn't really valid anymore. So let's get rid of that line. Now we need only to add two more properties to fill out the rest of our Carousel content.

First is the Context Title, again, that Section Header that tells the user what we're looking at.

And the previewVideoURL, that's what plays after we transition away from your image content. And last, we need to update our makeTopShelfContent function to return a TVTopShelfCarouselContent to match our Carousel item. Here, we're requesting the Action Style Carousel.

Great. Let's run this again.

Awesome. Look how great that looks! We went from little Inset boxes of static content to this big full screen playing preview video of our content. When Felipe swipes up to enter full screen mode, our UI gets out of the way and he can swipe between items to see what else there is in our Top Shelf. When he presses menu, we'll go back to the up grid right where we left off.

Now, let's go back to our project and make one more change. We want to take advantage of that full rich meta-data that Top Shelf API offers. So we'll add a few more properties to our item class. Like I mentioned, these are fields like summary, genre, media options. This just describes more contexts about the item we're looking at to our viewers.

And last, let's update our content object to return a detail style Carousel. Let's run this one more time.

So you'll notice that we only changed a few classes and added a few properties to go all the way from Sectioned Content to this dynamic, immersive browse experience. When Felipe swiped up to enter full screen, you'll and notice that we don't show that meta-data UI right away. We don't want to overwhelm the user with too much information all at once. So it's available on demand when he taps or clicks the Siri Remote.

In here, you see all the information we filled out just a moment ago. That's it. That's all it takes to adopt Top Shelf in your apps. Thanks, Felipe. So you saw how easy that was to provide a great browse experience in Top Shelf on Apple TV.

And you saw the Carousel and how it lets you go from a static inset Top Shelf content to this big exciting captivating browse experience. And, you saw the new extension and API, which makes adopting all of this easier than ever. We can't wait to see what all of you do with Top Shelf in tvOS 13.

Now, I'd like to hand it over to Dale to talk about bringing that content first design principles inside your application. Dale. Thanks, Caleb.

My name is Dale Taylor and I'm an engineer on the tvOS team. I'm going to start off today by talking to you about User Profiles and how you can use them to show people the content that they really want to see.

In tvOS 13, we're bringing Control Center to the TV. It gives people quick access to common used actions, such as Sleep, Search, and Now Playing. Additionally, we've added user switching right up at the top. This gives people a lightweight way to quickly switch to their personalized content and recommendations all without losing context. We're opening up this functionality to developers so you too can take advantage of multiuser in your apps. Let me show you what this looks like. I'll start with an example.

How many of you had sat down to watch TV only to be presented with something that looks like this? Well, we want to make that a thing of the past. While we're glad that your apps are providing great personalized recommendations, ultimately, a screen like this isn't a content first experience. It can be especially frustrating because in tvOS 13, the Apple TV already knows who you are. So why is it asking again? Let's take a look at what we're doing to help you. We have new API and TV services in tvOS 13, TVUserManager to help your profile-based apps integrate with multiuser. We do a few things for you. We supply you an identifier that represents the current user on the TV, and we'll let you know when that identifier changes. This is important because with Control Center, that can happen even when your apps in the foreground. We even supply you some system UI to help people using your app map between our user identifiers and your app's profiles.

So what do you have to do to integrate with TVUserManager? Most importantly, you're responsible for mapping between a user identifier and a profile in your app. Generally, you would want to store this in your user defaults, mapping each user identifier to a profile. It's perfectly acceptable to have multiple user identifiers map to a single profile. What this means is that you can have multiple users on a TV and they can share the same profile in an app. And these user identifiers will be unique for every developer team. So if you have multiple apps or extensions in your suite, you can all share the same preferences.

You're also responsible for listening for changes in the current user identifier. I'll get into some best practices on how to handle that later. It's also up to your apps to call the methods you have to present system UI in a way that makes sense for your app's workflow. But everyone's app is a little different. So let's take a look at an example. Imagine your app puts up a profile picker just like the one I showed you before when it launches.

Well, here's what you do, before you even put up your profile picker, you check to see if your app has a profile associated with the current user identifier. If it does, you can provide people with the absolute best experience. You can just let them watch TV. You don't have to ask them any questions. You don't have to show them any selection screens. You can just bring them right to their content. If you don't have a profile saved for the current user identifier, now is when you put up your app's profile picker. But when someone makes a selection, you can ask them if this is the right profile for the current user with this dialogue. This is the UI that will put up asking the person using your app if they want to associate the current user identifier with the profile that was just selected. If they say yes and you save the result, they won't have to be asked the next time. So they can have the best experience when they launch the app the next time. So how do you put this UI on screen? It's easy. You can do that with shouldStorePreference ForCurrentUser.

And you can also let people modify these mappings after the fact with the Preference Panel. You can present that with presentProfilePreferencePanel. That UI looks like this. In this dialogue, you provide the current mapping between user identifiers and profiles, and we'll give you back the changes. For both this UI and the confirmation dialogue, you provide usernames and user identifiers and we'll supply the real user names in the UI. So, like I mentioned before, your app should be able to handle updates in the current user identifier. You listen for changes in the current user identifier with the currentUserIdentifier DidChangeNotification. And when this happens, you're responsible for letting us know the new mapping by setting user identifiers for current profile. Since there can be multiple user identifiers pointing to the same profile, you may set multiple values here. So that's one thing you should do when the user identifier changes. What else? Well, we have some best practices that we recommend for dealing with profiles in your apps. If you have to change the profile and the previous profile had ongoing activity, save it because no one wants to lose what they're doing. And you should also make sure that the change is meaningful. So if-- You should be showing things like personalized recommendations, and make the change clear. So have it have a smooth transition and that will make it clear to people that the change was successful.

So what do we learn about user profiles today on tvOS? We learned that if you have a profile-based app, you can take advantage of multiuser to get people better personalization. And you can use TVUserManager to launch your app to a content first experience, where people can skip unnecessary dialogues and go straight to watching TV.

So now that I've talked about your first launch experience, let's talk about what you'll see next in your app, the Tab Bar.

With the new TV app, we introduce a new Tab Bar. It makes navigation easy. And it really lets the content behind it shine.

Because it moves along vertically with the content rather than disappearing when it loses focus, it's a great way to reinforce hierarchy for people using an app. I'm pleased to announce in tvOS 13, everyone gets this new Tab Bar style.

So what do you have to do to adopt the new Tab Bar? In most cases nothing, but sometimes you'll want to modify the behavior and here's how. If you want the Tab Bar to scroll along with the content on your screen, you can set the tabBarObservedScrollView property on your view controller embedded within your Tab Bar controller. We generally recommend this style for collection views full of browsable content. In fact, UI Collection View Controller does this for you automatically. If you'd like the Tab Bar to stay fixed at the top of the screen, you can just leave this property nil. In either of these cases, you should be mindful of the safe area. For scroll views, you'll get the right behavior for free if you just set the contentInsetAdjustmentBehavior to automatic. If you're doing your own layout, you can use your view safeAreaLayoutGuide to help you. We're also adding some new API UITabBar so you can reflect your branding in your apps. We've added a new area to either side of the Tab Bar where you can place a logo. This will move along with the Tab Bar when it scrolls on and off screen. You can access these two new views within your properties in UITabBar, leadingAccessoryView and trailingAccessoryView. You shouldn't put buttons where there are focusable items in these accessory views. They're really just designed for static content. Additionally, if you need to do further customization on your Tab Bar to match your branding, you can do that with the new standardAppearance property. To hear more about standardAppearance, see Modernizing Your UI for iOS 13. So what do we learn about Tab Bars today on tvOS? Well, you get a new one in tvOS 13, and it's really easy to integrate into your app. We've also made the Tab Bar more flexible. So you can have all the convenience of using a standard control, but you don't have to sacrifice on your ability to show off your branding. So now that we've seen how UITabBar makes for great top level navigation in your app, let's talk about browsing.

We have some new tools that you can use to build a full screen browsing experience. Tommy mentioned earlier about the importance of creating a browse experience that feels lightweight and effortless, an experience that gets you immersed in a captivating story more quickly than ever before, all without the frustration of diving in and out of menus. We built an experience that makes the most of the television in its gigantic screen, an experience that's perfect for your living room. And using it is as simple as a horizontal swipe. In tvOs 13, we're introducing new API to help you build an experience just like the one you see here. We're doing that with the new TVCollectionView FullScreenLayout in TV UIKit.

It's designed to help you build a collection view that fills the screen edge to edge, taking advantage of the largest display in your house. By default, it will look familiar to people that used tvOS already but it's highly customizable. So you can easily adjust it to meet the goals of your engineering and design teams. In fact, it's so customizable that the Top Shelf that Caleb showed you earlier even uses this exact the same layout.

To go along with this layout, we're giving you when you a new cell subclass, TVCollectionView FullScreenCell.

It has two views that you need to be aware of, the Masked Background View and the Masked Content View. When you create a custom cell, these views are where you'll add your content. Generally, you'll add an opaque image to the Masked Background View and UI elements to the Masked Content View.

Since this new Collection View layout is designed to take advantage of the entire screen, the cell and its sub-use also occupy the bounds of the display in 1920 by 1080 points. Before I tell you more about how to customize a full screen layout, I'll invite Felipe back up on stage to show you how easy it is to build a full screen browse experience using TVCollectionView FullScreenLayout.

So we've started with an existing app that has some photos in a simple flow layout. This is a good start but this isn't really optimized for the TV. So now that we've seen all this of that TVCollectionView FullScreenLayout, let's go back to Xcode and try adopting it. We'll start by creating a new fullScreenLayout. And we can set that layout in our Collection View replacing the old one.

To go along with our layout, we'll need a cell. Luckily, we've already created one and we can register it with our Collection View. Then we'll return an instance of this cell in our cell for item indexPath. Now we've setup our View Controller, we can go to our cell and add some content to it. We already have an imageView and a titleLabel. We can start off by adding the imageView to the Masked Background View. And we can add our titleLabel to our Masked Content View.

Let's give it a really big font so it's easy to see on the screen. Now that we've got this all setup, we can go give it a try.

That's a lot better. This really fills the screen and when you browse around, you can see the images in much better detail. But what would be great is if when you click on the Siri Remote, it filled the screen. Luckily, that's easy to do. We can go back to our View Controller now and do that. If we add didSelectItem in indexPath, we can handle the select action. When that happens, we can set the Masked Amount to zero and will animate this to make it look smooth.

Now, we can go ahead and try it another time and see if that does it.

You can see that when Felipe clicks, it fills the screen edge to edge which is really what we're looking to do. But it looks like we forgot to hide the text. No problem, that's an easy fix. We can go back to our cell and fix that now.

If we override apply, we can get the layout attributes as they change. In this case, we want the titleLabel to have an alpha of zero when the Masked Amount is zero. So we can just set the opacity to the same as the Masked Amount. Let's give it one more try and see how it looks.

That's much better. Now, this is the type of experience we're trying to build on the TV. It's really easy to interact with and you can easily get lost in the content when it fills the screen like this. Thanks, Felipe. Now we can go back to the details. You remember TVCollectionViewFullScreenCell from before, and its two sub-use, Masked Background and Masked Content View. In order to understand how these two views work together, you'll need to understand two principles of the layout, masking and parallax. Let's start with masking.

The views and the cell are layered on top of one another and fill the whole screen. You can see the Masked Background View here and the Content View on top. When running edge to edge like this, the Masked Amount specified by the layout in cell would be zero.

But when we're browsing around in inset from the sides like this, the Masked Amount is one. You can control the amount of the masked inset with the Masked Inset Property in the layout.

The same information is reflected in the cell with the Content Bleed Property that it gets from the layout attributes. So that's masking. Let's talk about parallax. Parallax is just a way to create depth by moving layers at different rates. We do this all over tvOS already. Let me explain how that applies to our layout.

The layout has a Parallax Factor property. It specifies how much slower the Masked Background View most relative to the Masked Content View. The same information is passed down to the cell through the layout attributes and the parallax offset property. This specifies the distance between the center of the Masked Background and Masked Content View at any point in time. With different rates of motion and a partially transparent Masked Content View, you can see how we'd be able to simulate a sense of depth.

Finally, when combined together with the mask, we get the wipe effect that you saw on Felipe's demo. As a reminder, we do the heavy lifting for you in TVCollectionView FullScreenLayout, but this overview should have helped you understand some of the parameters that you can use to get exactly the effect you're looking for. Since there are a lot of pixels moving around in a full screen layout like this, we have some best practices that we recommend for getting the most out of TVCollectionView FullScreenLayout. You should avoid starting any animations or video until the cell reaches the center. Playing multiple videos at once will not only be distracting to people using your app, but it will probably cause you drop frames. You should watch how many offscreen passes you're using. This means avoiding excessive use of visual effects or group opacity animations. Really, most of the things that you'd use to help with scrolling in the rest of your app, you could apply here when swiping side to side. You should also be mindful of your memory usage. You'll probably be working with a lot of large images in a layout like this. So, you should make sure that their sized appropriately for the display and that you release them from memory when you're not using them anymore.

If you're a TVMLKit developer, don't think we forgot about you. You can access all of these for TVBrowserViewController. We'll even link to a sample app that shows you how easy it is to build a smooth transition from a shelf to a full screen browse and back.

Today, we've taken you on a journey, starting with people's first exposure to your app, the home screen and the Top Shelf. It's a great way to grab people's attention and draw them into your app.

Then we moved on to the first launch experience where you learned how you can integrate with multiuser to bring people to their personalized content right away without the need for additional dialogues.

And, finally, we learned how you can make browsing simple and effortless with our new Tab Bar and full screen layout.

Together, all these made for great usability in the living room. We hope you take the tools and principles that we've shown you here today and apply them in your own apps so that everyone using tvOS can have an enjoyable experience.

You can see more information about our talk here and come see us on our labs in Wednesday and Friday.

Thanks everybody. [ Applause ]