Tip:
Highlight text to annotate it
X
OSSAMA ALAMI: Hello, everybody, and welcome to
Bring Your App to the Big Screen.
This session is all about designing TV applications,
designing for Google TV.
Before we get started, my name's Ossama Alami.
I manage the Developer Relations team for Google TV,
and I'm co-presenting here today with Michael
Sundermeyer, who leads our UX team.
[SCATTERED APPLAUSE]
OSSAMA ALAMI: Big fans of Michael.
So by show of hands, can I see how many of you are Android
developers or have built an Android app?
Great.
I think that's about half.
And how many of you have built an app for Google TV, either
Android or a web app?
A smattering.
So this session is going to be a great for those of you that
have built apps and great for those of you that haven't.
The biggest thing to building a TV application is probably
design, because it's very different from mobile or
tablets or even PC or web design.
Designing for TV is designing for a different user
experience.
So as a refresher, I'll go over what Google TV is for
those of you that don't know.
Google TV is Android optimized for TV.
It comes with Google Chrome, and it comes with Google
services like search, a discovery experience called TV
and Movies, photos, YouTube, and other applications.
And it comes with live TV integration.
So Google TV is really about integrating the live TV with
the web, bringing the best of TV and the best of the web and
trying to make it the best experience possible, bring as
much content as possible to the user where they're looking
to be entertained when they're on the couch in
front of their TV.
So last October, we launched a major update to Google TV.
We vastly simplified the UI, the user experience.
We improved search and discovery.
We released a new YouTube experience for Google TV.
And critically, for most of you guys, we launched Android
Market, now Google Play, and the ability for you to build
applications and reach users on their TVs and distribute
those applications through Google Play.
So a lot of what we learned in simplifying the UI and making
a better user experience in our second-generation software
we're going to teach you about today.
They're very exciting in the session next door.
[CHEERS AND APPLAUSE]
OSSAMA ALAMI: There we go.
Yeah!
[CHEERS AND APPLAUSE CONTINUE]
OSSAMA ALAMI: Thank you for that.
I'm sure you're all very excited about our new devices.
We have new devices that launched this week and over
the last couple weeks.
They're out in the sandbox.
On this level, I encourage you guys to check them out.
I'm very excited about these things.
They all have the ARM processor.
They're shipping in the US, and the Sony devices are going
to be available internationally.
So Sony has released a buddy box, and they have a Blu-ray
player that they're demoing.
Vizio released a buddy box earlier this week.
And LG has a series of TVs with Google TV built in.
And I'm happy to announce that later this summer we'll be
releasing an updated Google Play store for Google TV.
This will add some the features you heard about
yesterday, subscription billing support, partial
updates, as well as the ability for users to purchase
music, videos, and now TV shows directly from their TV.
This is the first year we're doing a full track for Google
TV at IO, and I'm really excited about this session and
the other sessions.
I'm going to quickly tell you about the other
two sessions we have.
If you're interested about DRM, streaming video, and the
enhancements that we made to Google TV there, if you're
interested about getting your content on TV, I encourage you
to check out this session after lunch.
And today a lot of TV users are distracted users.
They're sitting on their couch with a mobile phone or a
tablet or a PC, a laptop.
And part of the time they're watching TV, they're also on
those devices.
So if you want to learn how to build a unique experience that
connects the user on their second screen device, on their
mobile phone or tablet, as well as on the TV that they're
watching, build a cohesive experience around your
application, go to this session, and we'll teach you a
little about the technologies we have to make that possible.
So why do you care?
Why do you care about building for TV?
TVs have been around for a long time, and it turns out
there are a whole lot of them.
In the US, there are more TVs than people.
On average, 2 and 1/2 people in a home and 2.93 TV sets.
This stat is actually going up, even though the rise of
smartphones and tablets.
People continue to watch TV.
People continue to buy TVs.
This is really about meeting the user in the
living room, right?
Meeting the user where they're looking to be entertained.
And they still want to be entertained on their
televisions.
And they watch a whole lot of television.
In the US, on average, five hours of TV per day.
So this is an opportunity for you guys as developers to
finally meet the users with the five hours of TV watching
they're doing per day as well as the other amount of time
that the TV sits off.
Think about an experience that is uniquely
appropriate for the TV.
And it continues to grow.
So this stat's by DisplaySearch.
By 2015, over 500 million connected
TVs will have shipped.
Connected TVs or smart TVs.
And that year, 47% of flat panels shipped that year will
be smart TVs.
So Google TV really aims to be an open app platform for you
guys as developers to build applications and for
manufacturers to build a smart TV.
Users are become accustomed having access on the content
that they love on all of their devices.
That includes the TV now.
If you have an application that is meant to entertain or
maybe inform the user, it's a great TV application.
And users, as they get more and more familiar with
connected TVs and smart TVs, are really going to
want that app there.
So reach and delight your users where they're looking to
be entertained.
And how you do this?
Well, there are two ways right now to build for Google TV.
It is an Android device, so you can build an Android app.
And it does ship with a full desktop version of Google
Chrome, so you can build a web app.
When I say build an Android app, it's really just that.
The Google TV SDK is the Android SDK.
What we're going to teach you about in this session is how
to design that app for TV.
But if you already have experience building Android
applications, that's great.
You already know most of what you need to know
to build a TV app.
And you get the advantage of distributing and monetizing
that app and discoverability options through Google
Play on Google TV.
Or build a web app.
Your site's already accessible on Chrome in Google TV, but
what we're going to teach you here today is how to optimize
that experience for TV viewers, how to make it really
great on the web browser that we ship with.
Those are the two options for building for Google TV.
We're not going to go into the depths of how to build an
Android app or how to build a web app.
There's lots of sessions here at I/O that'll teach you how
to do that.
What we're really going to do is we're going to teach you
how to design a great TV app.
And since I'm not the expert on that, I'm
going to call up Michael.
[APPLAUSE]
MICHAEL SUNDER MEYER: Thank you.
Thank you, Ossama.
Hello, everybody.
I'm Michael.
I head up the design of Google TV.
And I haven't been with the team very long, but I've been
designing for TV and mobile devices for many years.
So I know enough to be a little bit dangerous.
So this session is all about the experience you can create
with the technology, not about the technology itself.
So unlike most sessions, I'm not going to show a single
line of code.
So please don't go run screaming from the room yet.
Hopefully we'll show a few things that are interesting,
and you'll learn something new.
TV is really evolving.
Google TV is not your grandfather's TV.
TV has not fundamentally changed in the last 30 years
since cable television came around until just recently.
And now a few things have started to move around that
are really changing the landscape of TV.
First, the TV screens that we have in our
homes are getting big.
They're getting really big, huge.
They're flat.
They're thin.
They're beautiful.
And they can go anywhere in your home.
They're appearing in places that we wouldn't have expected
before like kitchens and family rooms and bathrooms.
They're appearing in our workplaces.
So they're appearing everywhere.
They're more like big screens that are just omnipresent
present in our lives.
Second, they are smart.
Right now, more than 30% of all the TVs that ship in the
United States are smart TVs.
And that number is growing, as Ossama said.
Pretty soon, pretty much all of them will be smart TVs.
They'll have a CPU and GPU in the device itself, which
enables web and applications and a huge amount of new
content and new capabilities that we can take advantage of.
And then third, they're interactive.
There are new ways of interacting.
The controllers that we have have cursors on
them and track pads.
We're starting to see voice.
We're seeing gesture.
We're interacting with them, just starting to be able to
interact with them with our mobile phones and with our
tablets and our computers.
So there's a whole bunch of new opportunities around
interaction.
So I'm here to talk to you about how some of these
disruptive changes to the landscape of, really, the
living room present new opportunities for creating
great experiences for the home that
really connect us together.
But here's the thing.
So I think we're only just beginning to figure out how to
create great experiences on any device.
We're right at the beginning.
We're in our infancy.
I've been doing this for 15 years, and I still learn
something new every single day.
So I don't have all the answers here, but I'm going to
present some of the things that we've learned so far and
leave it in your good hands to take it from there.
I'll start by talking about the big screen, what it's good
for what and what it's not so good for.
You may not be aware of some of the differences there.
Then I'll show you a few applications and how their
developers used different strategies to bring Android
applications, web applications from mobile devices and the
web to the television.
Then I'll spend a little time talking about designing,
giving you some design tips for designing for TV around
interaction and design and layout.
And then finally, I'm going to share with you a few inside
trade secrets for how to actually make a great
application, not just usable.
But I hope to inspire you to go beyond thinking about just
the basics to creating an application that's beautiful
and compelling and cinematic and that people
really love to use.
All right.
So let's start with the big screen.
So what's different about the big screen?
Well, it's really big.
And it's great for video and images and simple
interactivity, anything that's really visual and cinematic.
The 10-foot experience has been designed for consumption,
so people are used to leaning back a little more.
And I'll talk about that.
And they're connected to big sound systems.
So it's great for music and video.
But what you may not know is there's a few things--
a lot of people think, well, I just take my tablet
application, and I'll bring it to the TV,
and will work great.
The TV is not a big tablet, actually.
There's a few things that tablets are great for that TV
is not so good for.
For example, reading a lot of text is not great on a TV.
Because you're 10 feet away, the information density needs
to be less than you might think on a tablet.
And because it's really a lean-back experience-- there's
something that happens when we sit down in the cushions, we
sink back, we grab a beer and our controller, we dim the
lights, and we go to watch something.
We relax, and we're really in a different mode.
And that may change over time as these
devices become more capable.
But for now people really get into a certain mode, and
they're not used to doing certain kind of activities on
a TV that they might do on a tablet or computer.
So really, we've found that it's actually better to think
of a TV more like a phone in terms of design than a tablet.
If you hold a phone about this far away, that's about the
size in your field of vision that a TV is 10 feet away.
The amount of screen density, the amount of text, the amount
of interactivity is about the same on a little device like
this than it is on a big TV.
So it's a little surprising that it's
different than a tablet.
TVs are also really social.
Just all the same qualities that make a TV fantastic for
watching movies, playing games together make it great for
shared experiences, but one thing that's different is that
people are used to using a TV for entertainment and not so
much for work.
So it's great for games, for education, for apps around
exploration like maps and travel and food and things
that connect to us personally.
But people aren't so used to doing their email on a big TV.
Some of you may do it.
Many of you may do it.
But we're unusual.
We're a little different than the average consumer, who
still uses the living room as kind of a different
space than an office.
You also have to think about privacy, especially around
social networks and financial websites and things like that.
And you really need to think about the multi-user and how
different users may use the space and the applications
differently in the shared space, how they use it
separately and together.
So not all applications that are successful on a phone,
like I said, move over to the TV successfully.
But it's pretty straightforward to move an
Android application.
If you've got an Android application, as Ossama said,
you're already soaking in the technology.
And then it's really just about understanding what are
the main differences between the two in terms of the design
and the ***.
Applications take different paths to get to the TV.
And I want to show you three different paths in the form of
application developers that have done it already.
Pandora is a simple and elegant music app.
You probably mostly use it.
I love it.
It's really designed on the phone.
It's already designed really well.
It's big.
It's visual.
It's sort of lean back.
It taps into the sound system.
So moving that to TV was really pretty easy.
This is the phone app on the upper right and the TV app on
the lower left.
They really didn't have to change a lot for this
application.
One of the main things they did is just enable the
transport controls, the Play-Pause controls on the
remote control.
So there's a couple extra things they had to do there.
So this one is where they really used a similar design
for both mobile and TV.
CNBC took a different route.
They tapped into the strengths of each device and did
something slightly different.
So on the phone, it's really good for interacting with your
stock portfolio.
On the tablet, it's great for reading in-depth articles.
So there's a lot of text in articles.
And then on the TV, which is great for video, they brought
their video window to the foreground and
made it really big.
So there are common elements among all three of the
platforms for this application, but they've
highlighted different ones in different platforms.
So they've really taken advantage of the
strengths of each.
Flixster radically simplified their tablet
application for the TV.
So where their tablet application has a lot of text,
they removed almost all the text.
They made big images, big fonts, dark backgrounds and
gradients, made it more simple both in terms of navigation
and in terms of visually.
So in this case, they just took their tablet application,
and they really simplified it and pulled some things out
until it was right for the TV.
So those are three really common strategies
for moving to TV--
mapping it over pretty directly if your app is right,
using the strengths of each application, of each device
and they're just simplifying what you've
got on another platform.
So now I'm going to dive into some of the basic design
considerations for television in three areas.
The first is interaction.
So the almighty D-Pad has been around for 30 years, and it
just won't die.
It's still around.
And even in Google TV, you need to develop your
applications so that they're navigable by D-Pad.
In this case, we've got two different kinds.
I'm sorry.
These are all three.
So Vizio, Sony, and LG all have D-Pad.
They're slightly different.
For example, the LG has a scroll wheel, which is really
nice for scrolling.
But the D-Pad is--
it's surprising, actually.
There's a reason why it's stood the test of time.
It's really a lean-back device.
If you think about it, you don't have to look down.
You can just put your arm at your side.
You can really focus on what's on your screen.
You can use it in the dark.
It doesn't feel like work.
You don't have to think about it at all.
So there's a reason why it's actually successful even
though it's so simple, and that's part of the reason it
is successful is it is so simple.
But it's surprisingly different.
So we're designing applications for both TV and
for tablet and phones.
It's surprisingly difficult to make them the same sometimes
depending on the app.
The interaction models are just oh so subtly different
that you kind of have to decide in your application to
go one way or the other, really make it the same and
kind of designed to the lowest common denominator of the
interaction model or really make them different and take
advantage of the strengths of touch versus D-Pad and cursor.
These devices all have cursors as well.
All Google TV remote controls are required to have a cursor
of some sort.
But they have different kinds.
So the Vizio and the Sony on the left have track pads, and
they have an integrated select button.
You just push on the track pad wherever you are.
And then the LG has an integrated wand very much like
a Wii remote but a little higher fidelity.
And so this means that you do have the
ability to use cursor.
And it's tempting to use that to emulate touch.
But cursor doesn't quite equal touch.
There's a way in which these devices have such a physical
connection when you touch it.
You reach out, and you're touching and dragging and
swiping the thing that you reached out to touch that
have-- it taps into hundreds of thousands of years of
evolution of humans making that connection.
Where with a cursor, you're 10 feet away, and it's a little
bit more work to try and grab the thing you
want and move it.
So it's just slightly different,
we found, from touch.
And the other thing is that the way we do cursor on these
different controllers is slightly different.
So track pad has some different
strengths than a wand has.
So what I mean is it's not as consistent as touch.
So for those two reasons, we recommend that people really
design their apps around D-Pad navigation first and then use
the cursor as an accelerator to that navigation.
It's best for low-twitch interactions like Angry Birds.
And you really-- you kind of want to--
the developers made me say this.
You got to stay away from drag and drop as well.
Sometimes the D-Pads--
I'm sorry-- the track pads are hard.
When you click and drag, it takes a fair amount of force
on your thumb.
If you use that as a main interaction model, sometimes
some people have trouble with it.
And then finally, you need big hit targets.
The screens are so big.
You think about it, just a little translation of angle
here moves it a lot on the big screen.
And so you really need bigger hit targets than you might
have even in touch.
D-Pad is really a linear interaction model.
You think about it almost like the
old-fashioned cassette tapes--
I'm dating myself-- where you had to fast-forward through
four songs to get to the fifth song.
And then touch is more like RAM, random access memory,
where you can just touch whatever you want.
So because it's linear, you have to think more about the
navigation that you're presenting to your users.
The focus states in the layout help the user predict how to
get from point A to point B. But they have to think about
it a bit, and you need to think about it as well.
It needs to be continuous.
You don't want the focus to have to jump across the screen
and between big states.
In an Android, the focus order tends to follow the way that
the components are laid out on the screen by a layout
manager, for example.
And so we find that it's better if you explicitly
manage the focus in your application rather than
letting the system do it.
So there's three types of focus, three states actually.
So there's selection.
There's focus, and there's focused selection.
So the first is really familiar.
Selection is--
this is a tab, for example.
This is the Shows tab of a TV movies app.
The tab or a section of an application is a more
permanent state-- not permanent, but it lives for a
longer time.
The focus state is--
it shows the position of the D-Pad as the user moves the
focus around.
It needs to be big and really visible.
Like this blue glowing rectangle, I actually think
that's not even strong enough.
Maybe it could be stronger, because the user needs to be
able to just look up at the screen and know exactly where
the D-Pad is.
Because everything goes from there.
And then the third thing is, like a cursor, you can hover
over a particular area.
And with D-Pad, wherever the focus is, we do things like
after a second, if the user keeps the focus on that area,
we can pop up a hover card like this and give more
information and progressively reveal more info.
So some views in Android, like the image views, they're not
focusable by default.
So the one code thing I'll say is you have to turn on the
focusable attribute to turn this on.
And we also think you should explicitly manage
the order of focus.
All right.
Keyboards.
All remotes for Google TV have to have
a hard QWERTY keyboard.
They started out being big, and now they're on the back of
the generation of remotes that happen now.
The one thing to think about is in the next generation
coming out next year, we're making the
hard keyboard optional.
And so you'll have to make sure that your applications
support on-screen keyboards.
It'll just be the standard Android keyboard.
Each manufacturer will create their own variation of it, but
it should work just fine other than it will
support D-Pad and cursor.
OK.
And the last interaction model, of course, is
multiscreen experiences.
We've seen a lot of great experiences, like this
mobile poker app.
Zynga Poker is upstairs as well, where the table is on
the big screen, and each person literally has their own
hand of cards in their own hand on their mobile device.
But we've only just begun.
I mean, this is brand-new area of opportunity.
So we're really looking forward to
what you guys create.
All right.
A couple areas of design.
A couple design tips.
So this is the Google music beta app from a
while ago on the web.
So what would be wrong with just putting this on the TV?
Anybody spot any problems with this app?
A lot of text.
Not available in Australia.
Make everything available in Australia.
Very important design consideration.
Yes, there's way too much text.
The information density is very high.
The fonts are really small.
But really one of the big ones is-- and it's hard to think
about is it's all white.
In the environments where we watch TV, on these big
screens, as they get bigger it's like
looking at a light bulb.
You have so much light emanating at you in a dark
rook that it can be really blinding.
So this is one of the biggest changes from the web, where
most backgrounds are white to TV, where most backgrounds
really need to be dark.
Also you have to be careful about using
certain reds and oranges.
They vibrate and don't translate very well to TV.
This orange might OK.
I don't know for sure.
And then finally, this app is very text heavy.
You really want to think about how your application can
communicate better visually.
Visual things are much better on TV.
Here's an example of the same app, a different part of it.
But it's a little easier on the eyes on the TV and on
these big screens, where there's a dark background.
There's a gradient that gives it a little bit of depth,
makes it feel a little more cinematic.
It's more visual, bigger fonts, bigger icons.
And, really, there's a lot less chrome and buttony kind
of things so that the content can kind of breathe.
Layout is a tricky thing because of the navigation.
The first thing about laying out an application for TV is
something that's been around for a long time.
So let's take a simple UI like this and put it on an
old-fashioned tube TV.
And what you get is the edges are all cut off.
So those of us who were designing TV applications 15
years ago, we had to think about this thing called, well,
safe area or over scan.
Because the tubes were not rectangular, the light guns
couldn't reach the corners.
And so each TV manufacturer had to reduce the amount of
space that was available.
So it was fine to just design with the safe area, just
design to keep your application in the
middle of the TV.
The problem was every TV was different.
The amount of space that you had to waste was really large,
because you had to design for the worst TV in the world,
which I don't know what it was at the time.
But it was must've been bad, because you had to put a big
space around it.
So you'd think that this situation is no more, but, in
fact, it lives on.
But it's a little bit better.
LED TVs still have this idea of over scan, but the over
scan is less, because we don't have tubes anymore.
And Google TV actually added something where at install
time, we ask users to calibrate their over scan.
So they expand the maximum visible space of their TV.
So we can use as much space as is possible on that TV.
It still means that there is some amount of your
application that will not appear on some TVs, but it
means that the top left will always be visible.
It's guaranteed to be visible.
It's the bottom right corner that may get cut off.
And what we say is try to design around the idea-- well,
the moral really is, is use flexible layouts and try to
design around keeping about 5% of the bottom and right halves
of your screen not required to be seen by users.
They may get cut off.
Next, there are two densities that Android provides for
television.
One is XHDPI, which is 1080p.
And the other is TVDPI, which most people don't know about.
It's fairly new.
It's 720p.
Now what's the differences?
You don't have to develop for both.
If you develop for 720p, it will scale up.
1080 will scale down if the TV is a 720 TV.
So you only have to develop for one.
The one thing you need to know about is
there's a trade-off there.
1080p, of course, the image quality is better.
The video quality is better.
720p, the performance of animations is better.
Because you're pushing around roughly a third of the pixels
with 720p, it uses less memory, less processor power.
It takes less time to open images and that sort of thing.
So you just really need to think about the type of
application you have.
Google TV uses 1080p for all of our applications.
But it may be that if you're creating a game, you want to
create 720, because the animation is so important.
So it's just trade-off to know about.
In terms of layouts, you want to keep really simple, basic
zones of layouts.
Because of the wide aspect ratio of a television, it's
typically better to put the navigation on the left and
right than the top and the bottom.
If you put it on the top and the bottom, you leave very
little space for your content.
So in Google TV, we use this pattern a lot.
We use a global navigation vertically along the left.
We put the content in the middle.
And then we have an optional area of contextual menu that
gives more options if you need it.
But we typically don't use that for much.
If you look at the YouTube app on Google TV, you'll see that
it uses the contextual menu.
There's a number of other patterns.
Here are some.
There's the shelf model that scrolls left and right.
There's the grid model, which scrolls up and down.
There's tabs.
There's lists.
There's lots of different models.
As long as you're consistent, you should be OK.
The one thing to avoid is D-Pad interaction traps.
It's something that you don't necessarily think about at the
beginning, but you can get the user in a pickle where they
can't get out of it.
So in this case, I've got navigation along the top,
navigation along the bottom.
If I move the D-Pad to the middle, it's a scrolling list.
So if I hit down, down, down, it's actually scrolling down
in the list.
If that list has 100 things in it, you're never going to be
able to get down to the navigation at the bottom.
It's going to be like that guy that climbs one rise and sees
the next rise and climbs that and sees the next one.
They're going to keep trying to get there, and they won't
be able to.
So you have to be aware of that.
OK, so, so much for the basics of designing a usable
application.
Those are the main considerations.
Not a lot, but a few things to think about.
So how do you make something that's great?
If only there were a recipe book for great experiences.
But if there were a recipe book, if I could just hand you
this, then why aren't all apps great?
Why is it so hard to do?
Well, I kind of think about it like making movies.
When you make a movie, there's no book to teach you how to
make a great movie, a hit movie.
There's lots of books on the mechanics of it, the
techniques around lighting and cinematography and acting, but
there's nothing that puts it all together.
The greatness really comes in tapping into the deeper user
motivations.
What really drives people, what people love?
So I want to share a couple of trade secrets in the form six
design principles that we use constantly when we're
designing TV applications.
Some of them may be familiar to you, but it's really in how
you apply them that counts.
The first is content is king.
And you've heard this before, but it is the most important
design principle in making a great application.
Content is king.
So much of application development involves thinking
about layouts and UI and chrome, buttons, and check
boxes that often we leave the actual content until the end.
We neglect the content.
But if you think about it, really, chrome is just--
not the browser Chrome.
The actual Chrome of the UI is a barrier between the user and
what they really want, which is their content.
So we say design the content, not the UI.
Design the content, not the UI.
So much so that I'll tell you a quick story.
Once I was giving a design talk in the Bay
Area a long time ago.
And I used Bank of America online banking as an example
an experience that could be better, to put it mildly.
And I went into the reasons why.
And after the talk, a guy came up to me and
handed me his card.
And it said VP of User Experience, Bank of America.
And I was like, OK, sorry.
But he said, no, no, you're totally right.
Let's work together to make it better.
And so we started working together, and he said, OK, why
don't you guys do a first pass and send us some wire frames,
send us some ideas about what you want?
I'm like, we don't work that way.
We don't do wire frames.
We design the content.
We need user accounts.
He's like, user accounts?
I can't give you user accounts.
That's, like, private information.
I'm like, well, we design the content.
And the user account information is the content.
Finally, he relented, and he gave us his accounts.
He gave us all his checking, banking, credit
cards for two years.
He gave us all of his accounts.
And we spent a week-- all of us designers spent a week
poring over that data and really looking at the ebb and
flow of this guy's accounts, what he spent on and when his
PG&E bill was due and when his rent was late
and all these things.
And from that, we looked at patterns and what could we do
to really help a user manage their finances.
And really, it's a really clear example of really
starting from the content , thinking from the content, and
seeing it through the user's eyes.
So here's another example on Google TV.
This is an application called Redux.
It is a beautiful, lovely, simple video
app for Google TV.
It really celebrates the content, which is, in this
case, video.
It pulls YouTube videos and puts them
into curated channels.
The video is full screen.
The UI is not visible at all until the user calls it up.
And when it does come up, it lives very lightly on top.
They use a lot of transparency and text
and very simple icons.
It's not big, garish, colorful buttons that are dragging you
away from the content.
It really keeps you in the experience.
And really the content's in charge here.
The content's in charge, and the UI lives to serve.
It's a great example of contents is king.
The second principle is less is more.
You've heard this before too.
Mark Twain once said, if I had more time, I would have
written less.
Less is hard.
Simple is hard.
But simple isn't just throwing things out.
Simple is about focus.
It is about knowing what you're about.
It is about knowing what your users need and when they need
it and only providing that at the right time.
So we say focus on 80%.
And what we mean this, we mean really focus on the 80% use
cases, the things that users do all the time, most users.
Make those sing.
Make those great.
Don't compromise on those.
And make the 20% edge cases possible, but don't make them
dilute the power of the 80% part of it.
Let's see.
We use visual hierarchy as well to
emphasize what's important.
And we use progressive disclosure to only reveal
things as they're needed.
And we let the content breathe.
So an example is here on the TV and Movies app.
In the first version, we built it for
scanning a lot of content.
And so, as you can see, we threw a lot of
stuff on the screen.
There's a lot of images.
There's three lines of text for every single movie that
you're looking at or TV show in this case.
And everything is equal.
The visual weight, everything's bold.
The text is almost all the same size.
And when you look at users using an application like
this, you find that their eyes jump around.
They don't really know what to focus on.
It's hard for them to parse and hard for them to navigate.
So we redesigned this recently in a couple simple ways.
One is we got rid of all the text.
You don't need the text until you need the text.
And we made this central shelf bigger.
The icons are much bigger.
And we used-- on this visual hierarchy, meaning the central
focus, that central shelf is brighter, and
the others are dimmer.
And then we added a hover card so that if your attention is
focused on one thing for more than a second, then more
information reveals itself.
So these are just a few simple ways in which we made the
application feel cleaner and calmer, and it delivers just
the right information at the right time.
The third principle is movement has meaning.
And a lot of developers seem to think that animation is
gratuitous, and they leave it to the end or leave it out.
But we actually use animation in very subtle ways and not so
subtle ways to really communicate where somebody is
and help guide and orient users.
So we do this by creating physical relationships between
the objects on the screen so that the users have a mental
model of where everything lives and where it goes.
Because, again, we've learned for hundreds of thousands of
years, physical relationships and real world, that
translates well to the screen.
So to create an example of that--
I didn't have, actually, a great example of this on the
TV that I could have the rights to use, so we created
our own little example for you.
And I'm going to run it through for full time first,
and then I'm going to go back and try to scrub it with my
track pad here.
So this is a grid of movies or TV shows in this case.
The user's going to click on Dexter, and it's going to have
an animation into a shelf mode.
And there's going to be piles that open.
So you see a few things here.
Movies by Ray Fiennes.
Then we're going to expand back out to the grid.
OK, so what's going on here--
this looks like just animated stuff.
But, let's see.
I've got to do it--
I'm not seeing what you're seeing, so I'm going to have
to do it here.
OK, so one of these transitions--
we'll do the pile animation here.
So there's four steps to this.
So the user is going to click on the pile.
Click on the pile.
And first thing that's going to happen is the place that
it's going to go, the shelf at the top, is going to zoom off
to the left.
See that?
It's going to zoom off to the left at the same time as the
pile's opening.
Simultaneous to that, the content of this screen is
going to fade out.
So those three things happen simultaneously.
And then fourth, the new content fades in.
And it fades a little fast, but we want it to feel snappy.
So this is a great example of the movement, giving the user
a good idea of the physicality, the physical
relationships.
You open the pile.
The pile opens.
It goes to a place.
You know where it came from.
You know how to get back to it.
And we actually are building a lot of transitions like this
in Google TV now.
It actually does require-- well, it doesn't require, but
we're using OpenGL to do it.
So we actually have some developers that
know how to do OpenGL.
So it helps to have the lower-level language both for
speed, but also for things like lighting and
transparency.
And some of these effects are easier in OpenGL.
OK, the fourth principle is make it personal.
Again, we hear this all the time.
But one size does not fit all.
And yet almost every application that we build is
the same for every user.
And part of it is because it's hard.
And so one of the things that we do is we try to have a
little more modest goal, which is a technique we use to just
do one thing to make the 10th experience better than the
first, just one thing that makes it
personal for this user.
And an example again from the TV and Movies app, we added
this ability recently to add your favorite channel.
So you can select to HBO, CNN, Bravo, Discovery.
But we don't just show channels.
We show what's on that channel at any given time.
So that top shelf is what's on my favorite channels right
now, all together, all at once.
And so every time I come into the app, it feels fresh.
It feels personal, feels like it's made for me.
And there are dozens of examples of making apps feel
personal, from remembering States to learning behavior to
providing new options.
But a way that we could go farther with this one, for
example, would be if we notice that you're watching
basketball a lot, we can offer to make a basketball shelf so
that every time you come into this, it's got all your
favorite teams right there and who's playing, who's playing
next, where they're playing, and how to get there.
So the fifth one, surprise and delight is something we try to
add to every application.
And you can't do it everywhere, because it takes
time, and it can be overwhelming.
But we use a technique called jewel in the warehouse.
And this is a technique that we borrowed from architecture.
Architects know that no building built in the last 50
years matches their plans because of time constraints,
resource constraints, money constraints.
And so what they do is they latch onto one element of the
building that is going to be their special element.
They are not going to compromise on that.
And so for example, the reason is jewel in the warehouse.
Imagine walking into this warehouse, and the architect
had built a beautiful curving staircase out of
stone at one end.
The user's focus would be so much on that gem, that element
that they wouldn't notice all the cruft in the corners and
the things you didn't do on the sides, right?
So there's a few companies that I won't name that do this
really well in software.
But the same thing holds true in software.
And so we really try to pick one thing that we as designers
in thinking about the user experience
won't compromise on.
An example here is the Google Music app
that has this carousel.
And, yeah, it's kind of flip and maybe a little bit
gratuitous, but it's also really fun.
It's entertaining, and it really anchors the
application, gives a center to the application.
And the final principle number six is create an
experience, not a UI.
People who design and build cars think about the
experience that they're building.
They build a lot of models.
They drive a lot of prototypes.
They build to think.
They use the building process to think about what they're
doing through the users' eyes.
And they really solve problems completely from the users'
point of view.
So what they do, they use this technique called looking
through the windshield, which is really--
the concept car is a great example of this.
They act as if they're users.
They know that who they are and how they think isn't
necessarily the way their users think, especially
because they're spending so much time designing the cars.
And the same holds really true for application design.
You really need to get out of your own head and get in the
user's head.
And so we do this through user testing.
So we've begun just recently to bring in users every single
week into Google TV.
Everything at every level, every concept, every model,
every sketch, every mockup, every prototype, every piece
of code we run through just half a dozen users every week.
It just takes a few hours, but it helps us to get out of our
own heads and see it through other users, through the
users' eyes, from their perspective, through their
windshield.
So this is a summary of these principles.
Content's king, less is more, movement has meaning, make it
personal, surprise and delight, and create an
experience, not a UI.
So let's see.
I just want to leave you with one last thought, which is, if
you have the option, grab your local friendly designer and
get their help and advice.
Designers are trained to think in many of these ways.
We read publications and websites and content about
this stuff, and we think about it every day.
Bringing your app to the TV shouldn't be that hard,
especially if you're already in Android or
building in the web.
But it helps to know some of the differences between
devices and some techniques like this to make it smoother.
So let's see.
I'll have Ossama come on.
Thank you very much for listening.
And I hope [INAUDIBLE]
challenges.
[APPLAUSE]
MICHAEL SUNDER MEYER: Want to go next?
OSSAMA ALAMI: Yeah.
I'll note that there is a Sony party tonight.
They're giving away 500 of their new devices.
All you need is a Google I/O badge, and the first 500
attendees will get this device.
If you want more detail, talk to the Sony
folks at their booth.
MICHAEL SUNDER MEYER: It's a pretty cool device.
I've been using it at home for the last couple months.
OSSAMA ALAMI: Yeah.
I love their new remove.
MICHAEL SUNDER MEYER: All right.
So we have about 10 minutes for question if anybody has
questions and wants to grill us.
You guys can't.
You're not allowed.
AUDIENCE: Can I fire?
MICHAEL SUNDER MEYER: Yes.
AUDIENCE: OK.
You know those devices you showed with the remotes?
I don't know whether you have that information.
With that cursor touch pad, can those devices support
double touch so double touch actually kind of drags it, and
then single touch actually just kind of moves the cursor
like we do on the Apple or other--
OSSAMA ALAMI: You could build that.
By default, that's not the behavior.
But in your application, you could design such that a
double touch activates drag.
AUDIENCE: But the hardware will support it?
OSSAMA ALAMI: The hardware will support it.
Yes.
MICHAEL SUNDER MEYER: One more note as you're leaving.
The design guidelines that I referenced are
available at this URL.
And the slides will be posted as well.
Next question.
AUDIENCE: Just quickly, the update looks really great.
I think it's a drastic improvement over
the previous UI.
So thank you for that.
One thing I noticed--
some small things missing.
Is there a reason why you can't turn off the screen?
These are hooked up to audio devices.
Normally you don't always want the TV on all the time if
you're listening to music hours on end.
OSSAMA ALAMI: That's a good question.
Google TV sometimes is built into the TV, so turning off
the screen--
AUDIENCE: There doesn't seem to be an intent or anything--
MICHAEL SUNDER MEYER: Means turning off the TV, right?
OSSAMA ALAMI: Yeah.
AUDIENCE: But you want the audio on.
Or similarly, like, listening to audio while you're
browsing the web.
Those things seem to be still tricky to accomplish.
MICHAEL SUNDER MEYER: You should be able to do both of
those things.
So Pandora, for example, you can play Pandora and then go
to web browsing, and it should be able to multitask.
But yeah, they're a little tricky.
OSSAMA ALAMI: Over here.
AUDIENCE: Yes, so I had a question.
The Nexus Q was launched yesterday, and it seemed to be
a cloud player from Google Play, whereas Google TV seems
much more app-oriented.
Is there any plans to merge the two and bring Google TV to
the Nexus Q?
MICHAEL SUNDER MEYER: We can't comment on plans yet.
The Nexus Q really is a device for streaming music and video
from Google Play and from YouTube.
And Google TV is really a platform that integrates web
and applications and linear TV and is built into lots of
different devices, TVs, and buddy boxes.
So they're solving different problems right now, and we
can't really comment on how or whether they might merge or
come together in the future.
OSSAMA ALAMI: We'll do another one from here.
AUDIENCE: I have a question about content.
As you said, content is king.
And we really don't have that much content
outside of the US.
And that goes for the entire--
the Play experience.
So Nexus Q is a perfect example for a device that just
won't work outside of the US.
And Google TV has the same problem, because people don't
have any incentive to buy one outside of the US.
I was wondering if you guys had a master plan to fix that?
OSSAMA ALAMI: You know, it's something that we're
constantly working on, local content and bringing more
content to TV, both in the US and internationally.
I think in many ways, we look to the developer community to
help bring that content, especially local
content, to the TV.
That's why we built a platform that you can easily build for.
But there isn't anything that I can comment on in terms of a
master plan to work on that.
MICHAEL SUNDER MEYER: I really believe that a lot of the
revolution is going to happen outside of the US, especially
because there's so many different experiments already
happening in the UK and France and Korea where they've got
pure IP TV plays.
And they've got to Catchup TV already on the web.
And so we really look to countries outside the US to
help propel it as well as inside the US.
So you can be sure we're looking at that very closely.
AUDIENCE: Thank you.
OSSAMA ALAMI: Why don't we do a question from here?
AUDIENCE: Guys, thanks for rolling out to Australia.
You might not have had a choice.
It would be great if you could have lunch with the Google
Music people and sort of encourage them
to do the same thing.
That would be awesome.
So question--
accessibility in Google TV, is it early days yet?
I saw a great talk yesterday about Jelly Bean
accessibility, and things have really come forward.
Obviously the blind and television doesn't really work
so much, but you've got captions for hearing impaired
and so forth.
Has there been much work done on that, or is
it a bit too early?
MICHAEL SUNDER MEYER: We're built on Android, so when we
upgrade to the next version of Android, we get all the
accessibility.
So we're really looking to the Android team for most of those
platform capabilities.
And we'll take advantage of them as
soon as they're available.
OSSAMA ALAMI: But stuff that's uniquely video-oriented is
stuff that we're focusing on, like closed captioning.
Take a question here.
AUDIENCE: It seems to me before Google TV can go
mainstream, you probably need a different input method.
Something like a simple joystick
would be a lot easier.
Are you guys experimenting with different input methods?
Because a keyboard is--
you don't want that sitting in the living room.
MICHAEL SUNDER MEYER: Yeah, we're
definitely aware of that.
We learned a lot of lessons from the first generation.
Although, it's interesting that a lot of people actually
do want-- it's a narrow population, but for some
people, a keyboard is really great.
So as an accessory you can buy for your TV to do a lot of
input, it's great.
But definitely agree with you that the main interaction
model, we need to evolve that.
And I would love to bring something closer to touch, or
we may leap beyond.
But we can't comment on exactly what we're doing, but
we're definitely spending a lot of cycles on that.
AUDIENCE: Thank you.
OSSAMA ALAMI: Over here.
AUDIENCE: So with respect to some of the design guidelines
you gave and taking into account the fragments API that
was introduced in Honeycomb to try and unify the APKs-- like
Flixster takes advantage of that to have one APK that
works both on phone and tablet.
Is there any way that you guys would hook into default
fragments that if people use them, you could sort of build
in some of these design things?
Like it would automatically have a darker
screen behind it.
It would automatically transition the text to
slightly larger in list view, stuff like that.
OSSAMA ALAMI: I think we're careful.
We are an Android device.
So we're careful in not making assumptions on
behalf of the developer.
So we do publish samples and libraries that make it easier
to get started and sort of have our UI principles
embedded in them.
But in terms of changing the default behavior of certain
Android widgets and fragments, that's not something that
we're looking to do.
MICHAEL SUNDER MEYER: So like I said, I think we're really
at the beginning of even figuring out how to make great
designs on TV that can perform on all these devices.
And as we learn patterns, we are really interested in
figuring out ways to get them into your hands either if it's
just a document that's written about how to do it, code
snippets, examples.
And so over time, I'm really committed to trying to get
that out there.
We win if the applications are great.
And whatever we can do to support that, we will try.
But we're not at a point where we have
anything to announce yet.
OSSAMA ALAMI: Over here.
AUDIENCE: So you guys mentioned that personalization
is really important.
But the TV is basically the most impersonal object in the
home, whereas everybody in the family uses it.
A computer is really good at handling multiple users.
A tablet is really good at being a single-user device.
A phone is being owned by a single person.
But the TV, it's something that everybody wants to use.
So how do you manage the balance between allowing
everybody to have a very personal experience with still
managing the fact they you don't want to alienate anybody
that uses the device?
MICHAEL SUNDER MEYER: Yeah.
Yeah, the fact that it's shared list doesn't mean that
it can't be personal.
I think it can do both.
Like the shelves that we talked
about and adding favorites.
We're looking at ways to add favorites for each person in
the household.
So it's still personal, but it's personal to each person.
Also looking at ways that we can understand who's in the
room and give recommendations that are different for two
people than might be for each individual
person, find overlaps.
So there's a number of different ways
we're looking at that.
But yeah, you're right.
It's a shared device, but we still want to make that
experience personal for the people that are in the room at
any given time.
AUDIENCE: Regarding the cool transition that you showed us,
you mentioned you used OpenGL.
Does that mean you had to throw away all the life cycle?
And is that something you recommend, or
how can you do that?
MICHAEL SUNDER MEYER: I can't comment on--
I'm not a developer, so I don't know exactly how
they've done it.
But I know that we're building some musical libraries
internally based on OpenGL that are exposed into the
Android layer so that we can use them in the right places.
OSSAMA ALAMI: And we're working on bringing those
libraries to the developer community.
AUDIENCE: Thank you.
OSSAMA ALAMI: Go ahead.
AUDIENCE: Can you comment a bit on the
link with linear broadcast?
Because most TVs still consume linear in the evening when you
have large [? demand ?] for it.
So how does Google TV-- because you can't really do
overlays over linear TV.
OSSAMA ALAMI: Right.
AUDIENCE: Commercial problem, so--
OSSAMA ALAMI: Currently we don't support any way to embed
or overlay over linear TV, although it is a very common
feature request from the developer community.
I think we're trying to solve the user experience problem of
how to do that right before we expose it to the thousands of
apps out there.
And we want to make sure that it remains a good user
experience across all those apps.
AUDIENCE: I think you're going to really struggle.
Broadcast needs to keep their commercial boundaries, and
people overlay adverts and everything.
And it's a big security concern with the broadcasters.
MICHAEL SUNDER MEYER: Yeah, we do the inverse where we
support PIP across all applications.
So you can be running Chrome and still be watching a TV
show, but the inverse is harder.
OSSAMA ALAMI: Go ahead.
AUDIENCE: Is there any plan to make the Google TV source code
available, like making it open source?
[INAUDIBLE].
OSSAMA ALAMI: We have nothing to announce at this time.
AUDIENCE: Is there a reason that voice wasn't included as
one of the-- it seems like the most natural.
Kinect's doing it.
Being able to kind of talk to your TV instead of trying to
type things in and such.
MICHAEL SUNDER MEYER: Yeah, it is.
I mentioned that it's one of the interaction models that
are coming, but it's coming.
So it's not something that we're ready to talk about or
announced or that kind of thing.
AUDIENCE: You did allude to the time frame that the next
release was coming out though.
What was that?
MICHAEL SUNDER MEYER: Just for the keyboard becoming optional
in the next release, that was the only thing specific that I
talked about.
AUDIENCE: OK.
Was there a time frame?
I think you said--
MICHAEL SUNDER MEYER: The next generation.
So the current generation that you see out there today is
required to have a keyboard.
The next generation is not required to have a keyboard.
It's optional.
So you'll see the keyboard start to disappear.
But I didn't comment on the voice.
OSSAMA ALAMI: It's worth noting that LG remote and the
Sony remote both have microphones now that ties into
Android search.
Go ahead.
AUDIENCE: Yeah, basically, you guys are dealing with LG,
Sony, and historically it was the Logitech and new devices
going to be coming out.
Are you doing anything about those devices which are coming
out of China?
I mean, just have the Android 4 on it or 2.3 on it?
I mean, is there any control you guys have on those?
OSSAMA ALAMI: You know, that's not really something I can
comment about.
MICHAEL SUNDER MEYER: Yeah, I mean,
Android's an open platform.
Anybody can use it.
AUDIENCE: Yeah, it has Google Play, so you just publish your
app as Google TV pretty much.
MICHAEL SUNDER MEYER: As we can attest, it's very, very
hard to get everything working on a TV, all the codecs and
all the new chip sets and different
things you want to support.
Part of what we do for developers and for OEMs is to
do all that work for you and hand you Android++ that lets
you focus on the apps and services you
want to build on top.
But if third parties, OEMs want to build it from scratch
from Android, then you're welcome to.
AUDIENCE: Just a related question, fundamentally, is
there a difference between 4 and the Google TV version of
it or it's pretty much the same?
OSSAMA ALAMI: Between?
AUDIENCE: Android 4 and the Google TV version.
OSSAMA ALAMI: Google TV is heavily optimized for the
TV-watching experience.
I mean, one of the most obvious differences is that we
support linear TV.
So we have an HDMI in, and we do HDMI pass-through.
And it's really about bringing the web to the TV-watching
experience that users already have.
AUDIENCE: Thank you.
MICHAEL SUNDER MEYER: All right, thank you, everybody.
I think we'll call that a wrap.
OSSAMA ALAMI: Thanks, everyone.
[APPLAUSE]