Transcript
[ Music ]
[ Applause ]
>> 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.
[ Applause ]
>> 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?
[ Applause ]
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.
[ Applause ]
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.
[ Applause ]
>> 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.
[ Applause ]
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.
[ Applause ]
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 ]