[MUSIC PLAYING]
JP GIL: Today, we're going to be
talking about interactive watch
faces.
And it's going to be more
focused on the user experience
side and how to design
interactive watch faces,
but I think it could be a good,
interesting talk for developers
as well.
How to think about your watch
faces when you design them.
Before we start, I think
probably most people
know what Android Wear is.
Does everybody know
what Android Wear is?
Is anyone wearing Android Wear?
OK.
So for those of you who
don't know Android Wear,
Android Wear is Google's
wearable OS platform,
and it provides
you notifications
and immersive app experiences
and thousands of cool watch
faces.
So this, in combination
with the many devices that
have been launched out
there and plus the ones
that have been announced, you
can pretty much literally,
as it says on the
slides-- you can actually
wear what you want.
You can totally personalize
your experience.
And one of the coolest things
you can do with Android Wear--
we released in the
previous release--
is to make interactive
watch faces,
and that's what I'm going
to talk about today.
So before we enter
watch faces, I just
want to give you a very
quick overview of what
are the user experience
entry points that users
have with Android Wear.
So you have your watch faces.
That's your classic
watch experience.
You have notifications that
are bridged from your phone
or even kind of thrown
by apps on your watch.
You have micro apps, which
are like mini versions of apps
from your phone.
They're run on your watch.
They provide a little more
immersive experiences.
And we have voice and actions.
That means that you demand
something from your watch.
You talk to it, you
launch an action.
But let's focus on
watch faces, especially
the interactive
watch faces part.
So when you look at
this continuum here,
it is like an example of a
fictitious step counter watch
face.
So on the left-hand
side, you have
just your classic watch face.
It's just time.
As you progress
towards the right,
you have one data
point and time.
So you see around
the tickers that
are showing your step count.
And you can add
more data as you go.
You can add another data
point plus a ticker,
or at the far right, you
can just show just data.
And just with a
little hint of time.
So watch faces,
when they show data,
they become more relevant
for your personal experience
and they become more
interesting, right?
And I'm just going to do a
little break here and plug
a little bit our next talk.
For every stage of
your watch face,
we have a thing called
always on, or ambient mode.
It's something that kind
of saves power and stays on
if you don't interact with it.
So it's actually a very good
way for getting glanceable data
and information without
actually even interacting
with the watch face.
It's a nice way to save
power and have a longer user
experience.
We're going to talk about
this in the next talk.
And if you want to
stick around, please do.
So going back to watch faces.
Here, when I show
this continuum here,
you see that you have
to choose a layout.
So I went through
all these variations,
and I see, oh, yeah.
Maybe I like the
third one on the left.
But that makes it kind
of difficult for users.
Why do you have to
choose just one fixed way
of showing the watch face?
Perhaps you can combine
different things.
Perhaps you can have number
one combined with number two
and how do you do that.
So that's why we came up
with interactive watch faces.
So if you look at
this watch face,
it's pretty much your
classic watch face
with a little hint
of data or some entry
point-- we call
complications, something
that sits on top of a watch
face-- that can actually
open another activity
or do something else.
So let's say you tap on this
and then you get another state.
So you combine two
states into one.
And you can have more
states because you
can add other interactive
tap targets that
can open other activities or
do other things with your watch
face.
So it's kind actually a good
way to just have more density
without cluttering the UI.
So now we're going to talk
about some concepts you
need to understand before you go
on designing your watch faces.
So why do you want to make
a watch face interactive?
So what's the point?
So my first thing is I
want to provide more data.
I want to provide
more information,
but you don't want to do
that by cluttering the UI.
You can do that in a timely
manner, where you just show
something based on context.
Like, at 1 o'clock
something appears.
But maybe you can have something
that's more predictable.
Someone can tap on and get
the information they need.
You can extend the
watch face experience.
You can open a
micro app, you can
trigger an external service.
You can check in into a place
by just tapping a complication
or just tap on the screen.
But just one single tap
for the whole watch face.
Or it can cause just
an aesthetic change.
Maybe you just want
to please the user.
maybe you want
just something fun.
Maybe you just going
to change the color.
Maybe it's a picture
of your child,
and they send you a
picture, you tap on it,
and you zoom in on the picture.
So there are many things
you can do with watch faces.
So I mean, it's up to you to
design the best experience.
But I think this is
just a little primer
to see-- introduce you on the
thinking of interactive watch
faces.
So here's some key
principles that you maybe
want to observe on designing
watch faces, interactive watch
faces.
Make them predictable.
So when you tap on a
watch face and something
random happens, it's not
very predictable, right?
So you want people to just
know what's going to happen.
It can show a
surprise, but they just
need to know that something
will happen when you tap on it.
Make it relevant.
Make every tap count.
Don't make users lose their time
by just tapping on something
and then you say, you want
to look at the weather?
And then you show
the stock ticker.
It doesn't make
any sense, right?
Try to make it more
relevant as you go.
And make it immediate.
When you optimize your code,
make interactive watch faces
that are fast, that
don't have any latency.
Because sometimes, when you
tap on something and nothing
happens, you tap again.
And then you're not
capturing the right state.
So let's try to make things
very quick as possible
and make it immediate so
it makes to a better user
experience.
So here are just a
very few examples
of where interactive watch
faces can work really well,
in terms of use cases.
Maybe you want to share
a picture with someone
or say you get a
nugget of information.
You tap on it and you
expand to see more.
Maybe you want to connect
with someone maybe
have a paired experience.
We have a watch
face called Together
that you can pair
with another watch
so you're immediately connected.
So you can tap on the watch
face and send some kind
of emotional kind of signal.
You can make little games.
So you can make a little game
where someone taps on the watch
face, and you jump
to do something else.
You can complete a task.
Let's say, a task is
triggered by something that
happened throughout the day.
It can just say, OK,
I'm done with this.
You can delight,
you can have fun.
You can do a lot of things.
Those are just a kind
of basic examples
of how to think about
interactive watch
face in terms of use cases.
So we have a lot of interactions
in Android Wear, and most of it
is reserved by the system.
So for example, if you
look at this table here,
the ones in the middle are
totally reserved by the system.
So you can't swipe left or
right on the watch face.
When you swipe
down you pull the--
what do you call--
notification shade.
So all those things
are reserved,
and there's a couple
on there blocked.
You can't pinch and zoom.
For watch faces, what we decided
on is just to have single tap.
And why just single
tap, you may ask.
Why not double
tap or long press?
All those interactions--
everything
that has an additional
tap will cause latency,
because you have
to measure the time
and then users are waiting
for something to happen.
And we decided to
do it very simple.
So people know when you
tap on a watch face,
you're only going to
interact with the watch face.
That way, we make all
the other interactions
reserved for the system.
So we make that
distinction clear
so users understand that issue.
Makes it clear that everything
that's done by the user
is intentional, not an accident.
OK.
So now I'm going to go
through a couple of examples,
and then I'm going to show
you a demo afterwards.
Pretty much what I
want to show you here
is ways of thinking of how
you can use interactive watch
faces to design your experience.
It's up to you to
decide how you're
going to interact
with the watch face.
You can tap on the
whole watch face, which
is kind of more forgiving.
You just tap without looking
or on a specific target, which
will require the user to
look at the watch face
and decide where to tap.
So this adds a little
more involvement
from the user
aspect, but those are
different routes you can take.
So in the more forgiving
side, for example,
you can just tap on
a watch face just
to change the background color.
You can just cycle, tap
on the watch face, cycle
through, and just maybe go
back to the first element
of the list.
Or you can just do
some random changes.
But that's more like to
just be more forgiving.
We are using here just
the whole watch face.
You can also use
the whole watch face
if you want to change the
whole state of the watch face.
So here, for example, I'm using
kind of a weather watch face.
You have the weather
icons in there.
Once you tap on the
watch face you just
replace the background
with a temperature,
and you tap back to go
back to the previous state.
So in this way,
for example, you're
changing the whole state.
You're not specifically changing
a specific area of the UI.
If you want to change a
specific area of the UI,
you just have to design the
tap targets around the area
that you want to change.
And here is a very basic example
of-- you have a little star.
Once you tap on it, you can
cause any specific change
to that part of the UI.
Following this principle, you
can tap on a specific area,
and this area can expand to
reveal information inline,
and then you can
tap back to go back.
For example, in this
example, we just
have a layer of complication
that shows your step counter.
And when you tap on
the complication,
you would expand inline, and
you would reveal my information.
So that way you don't have to
get our favorite watch face,
you don't have to
open a micro app,
you don't have to look
at a notification.
The information that
you need is there.
And if you want to go
back to the watch face
you do a single tap again.
You can have an
approach that once you
tap on a specific icon,
you will open a micro app.
So you may lose
a little context,
but if your micro
app is designed
in a way that makes
sense in combination
with the watch
face-- sometimes you
can release an APK that
comes with the watch
face and the micro app.
You tap on that complication or
the target on the watch face,
you open the micro app,
go about your experience,
and then you swipe away to
go back to the watch face.
And maybe you can even
have a combined approach.
You can have an inline expansion
that shows more information.
And then you see the
information you need,
and you say, perhaps
I want to know more.
You can also pair this with
opening your phone as well.
But you can just say,
OK, I looked at my steps.
I want to know
what my history is.
I want to see all the
kinds of activities
that I'm doing,
that I'm tracking.
So you just tap
that complication.
Open the micro app.
When you go back you go
back to the initial state
of the watch face.
Right now, I'm going
to show you a demo.
Can you switch
please to the camera
so I can just do a
demo on the watch?
Can anyone see my screen?
Someone was calling me, I think.
All right.
So I'm going to show you
a couple of watch faces
that actually use
interactivity in a clever way.
So this is a watch
face called Timer.
The watch faces that
I'm going to show today,
they're by us, too.
They are a good partner of ours
that develops a lot of watch
faces for Android Wear.
So this one is called Timer.
As you see here, there's
a lot tap targets
around the watch face.
And let's say I want to
have a timer for 20 minutes.
I would just tap in this
and then it starts counting.
It's a very minimal interaction,
but it's very effective.
When you tap, you see the
thing happening right away
and it's-- the timer
starts to count down.
You can change the
timer at anytime.
Demo gods are not
helping me, I'm sorry.
All right.
So.
OK, so I just changed
the timer to 20 minutes,
and it starts counting.
They have another
layout for this.
I'm not going to
show this today,
but you can see by
just one single tap,
you can actually make the
watch face more interesting.
So you're pretty much combining
two watch faces in one, right.
So you have your normal
watch face plus your timer.
Here you're seeing
the always on mode.
That just removes a lot of
the essential information that
needs a lot of
display pixels, and it
just focuses on essentials
and removes any interactivity.
If you want to start again,
you just tap and then
you can do it.
So I'm going to
cancel this timer.
I'm going to show you
another watch face.
So if you want to change
watch faces in Android Wear,
you just long press and you
get into the watch face picker.
So this is another
watch face by us, too.
It's a very basic one.
I'm sorry that the colors
are not showing so well.
So basically, the
only interaction
that you have in
this watch face is
when you tap, you can
just change colors.
You go through it.
You see that once you tap,
the reaction is immediate.
And they use what we call
a material like ripple.
It's a circle that
grows from the center,
and that's how they
review the next color.
And I think that they
have a limited selection
of color combinations.
And I think they have 10.
So you just cycle
through-- or even less.
You cycle through, and it
doesn't do more than that.
It just shows you the color,
but it's kind of a nice touch.
It's like, I'm feeling
like having a new color.
You just tap on it, and
it provides the light.
Then I'm going to
show you what we-- I
call this the Uber
interactive watch face.
I'm sorry if that crashed.
I promise this was
working before.
[LAUGHTER]
OK.
So unfortunately, my demo broke.
Can you switch to the
slides, please, again?
If you look for interactive
watch faces on the Play Store,
you're going to find already
hundreds of watch faces.
And that one specifically
that I wanted to show you
is called Bits.
And it's pretty
much a combination
of different complications
that you can configure.
And once you tap
on the watch face,
you would expand inline to
reveal more information.
All right.
So.
Wrong way?
OK.
So before we end
the presentation,
I want to get into very
small technical details
about the touchbacks
that you have
to deal with when you
design a watch face.
So Android has a minimal
touch target of 48 dp.
And dp depends on--
it's a device pixel.
It's kind of a
relative measurement.
A device that has
very high resolution
would have more pixels
within that square.
So the minimum suggested size
for Android is 48 pixels.
So for us, we suggest using
a touch target of 90 pixels,
just to be more forgiving.
You don't want people to
just look at your watch
and just trying to figure out
where they're going to tap.
And the same applies for the
safety gaps between each tap
target.
If you look at the watch
face that I showed before,
the one with the timer, it was
like they had very clear tap
targets, because they
drew a circle around them.
But they were very generous
with the tap target
size, plus the space in
between, so you would not
tap in the one before
nor in the one after.
So make sure when you design
your watch faces that the tap
targets are giving
sufficient space for the user
to interact without having to
fidget with the watch face.
So when you design
promotable targets,
just try to find a
logical grouping.
Don't make a random
combination of targets,
nor try to use different
tap target sizes.
If you do so, just make
sure that the target
sizes are intentional and
they make sense to the user.
In the example that I
actually said before,
they actually drew an outline
where the tap target is.
So if you want to use
different tap targets,
make sure the user
understands where they are,
because sometimes if you-- in
the beginning of this process,
we worked with certain partners.
And some of the early
versions of the watch
faces, because we are actually
developing the guidelines,
we saw that sometimes
there were multiple targets
in the same area and the
other area didn't have any tap
targets, and people
didn't know where to tap.
And once they tap,
things are not
occurring because
you're actually
tracking the information
for another target.
It's just kind of more
logical rules of layout
that you can apply
for watch faces.
And in general,
for Android Wear,
we try to do things glanceable.
So when you look at
stuff, you should try
to get immediately what it is.
So you shouldn't just
waste users' time
just trying to figure out-- when
they look at their watch face,
oh, where should I tap again.
What is the size of the target?
What should I do
when it disappears?
So just try to make
it clear as you go.
OK.
So, if you want to learn more
about interactive watch faces,
we're going to have a little
workshop at the code lab room.
And then we have office
hours from 2:00 to 4:00 PM.
You can also check our
interactive watch face sample.
It's on GitHub.
And if you want
to know more, just
join our community of
Android Wear developers.
And we're going to talk about
in the next talk about always
on watch face apps.
And if you have any
questions, I'm here to answer.
[MUSIC PLAYING]
