WWDC2015 Session 802

Transcript

X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
>> MIKE STERN: Hello, everyone.
My name is Mike Stern.
I'm the user experience
evangelist at Apple.
I'm really happy to be
with you today to talk
about designing for Apple Watch.
The Apple Watch is unlike
any device we have ever made.
It features all new ways to
select input and navigate
that are ideally suited to a
smaller device that's designed
to be worn on the wrist.
The Digital Crown affords
the ability to scroll, zoom,
and change values without
obscuring your view.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and change values without
obscuring your view.
The Force Touch display
adds a new dimension
to the user interface.
Apple Watch's interface
is attuned
to the wearer's presence.
It wakes when you
raise your wrist
and it sleeps when you lower it.
Apple Watch blurs the boundaries
between software and hardware.
And the Taptic Engine creates
discrete, sophisticated
and nuanced experiences by
engaging more of your senses.
Apple Watch is ideally
suited for quick looks
and fast interactions.
The apps that you design
for Apple Watch should take
advantage of these things.
Your apps should complement
their companion iPhone app
by making information
and actions quicker
and more convenient to access.
Or they should extend the
functionality of your iPhone app
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Or they should extend the
functionality of your iPhone app
in ways that were
previously not possible.
Making really great Apple Watch
apps requires a different mind
set and approach than
designing for iOS or for Mac.
Which is why today I
would like to share
with you the three key
foundational design themes
of the Apple Watch, and the
apps that we made to run on it.
The first theme is about
personal communication.
Apple Watch is designed
to be worn.
No other other Apple
device has ever been
so closely connected
to the user.
Interactions on Apple Watch
create a more intimate
and personal experience
with technology.
The communication that occurs
between your app and the people
who use it should be just
as intimate and personal.
Now consider how we
communicate with each other.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Now consider how we
communicate with each other.
When we are speaking with
someone, we try to get a sense
of what the other
person wants to know
and what they are
trying to tell us.
We try to use terms that
they'll understand and concepts
that they are familiar with.
When they look busy or
stressed out, we try to get
to the point more quickly.
Personal communication
requires us
to be attentive and empathetic.
Now, take that and apply it
to the design of your apps.
Probably one of the
most important aspects
of personal communication
is just being considerate
of people's time and attention.
We are all busy people.
We live in a world filled
with constant distraction.
We often don't want
to be disturbed unless it
is something super urgent
or something we care
about deeply.
This is especially
true when it comes
to notifications on Apple Watch.
Apple Watch taps
a person's wrist
when they receive
a notification.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
This makes notifications
much more noticeable.
So carefully consider
how frequently you send
notifications to people.
They will get annoyed if you
send notifications too often.
Keep in mind that there's
no way for people to choose
which of your apps notifications
they'll receive on their watch.
They can only choose
whether or not they want
to receive notifications
from your app on their watch.
Avoid pestering them by frequent
interruptions throughout
the day.
Otherwise they will
pretty quickly wind
up turning off notifications
from your app on their watch
and maybe on their
iPhone as well.
Next, keep it relevant.
When we talk with someone,
we try to say things
that the other person is going
to find interesting
or informative.
Similarly the notifications
that you send
to people should contain
valuable and useful information.
People should actually feel
thankful for the notifications
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
People should actually feel
thankful for the notifications
that you send to them.
Now, determining relevance
can sometimes be pretty
straight forward.
CNN sends notifications
about breaking news stories.
It's a reasonable assumption
on their part that people
who have downloaded their
app and installed it
on their watch want to know
about major news
stories as they unfold.
But for many apps or situations
this approach wouldn't work
so well.
Being relevant often requires
understanding context.
People's interests may
vary based on all sorts
of contextual factors.
By understanding that context,
you can prioritize certain
information or functions.
Now, the two main contextual
factors that are used
to determine relevancy
are location and time.
Let's take a look at how
location can be used.
Invoice2Go is an app
that enables people
to track the hours
that they work
and send invoices
to their clients.
For many of the people
who use their app,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
For many of the people
who use their app,
time tracking is
based on location.
Billing starts when they
arrive at the job site,
and it ends when they leave.
Invoice2Go will optionally send
you a notification as a reminder
to start and stop time
tracking based on location.
By using your location,
Invoice2Go makes tracking
billable hours more convenient
and more accurate than trying
to remember how long you worked
hours or even days later.
Now as with location it is
important to find the right time
to communicate with someone.
Some information
is only relevant
at very specific moments.
So, for example, when
you are traveling
with American Airlines, their
app will send a reminder
when it's time for you
to leave for the airport.
This is very relevant
information.
No one wants to miss
their flight.
Now, another big aspect
of personal communication
is just paying attention.
People say this all
the time, right?
It is important for
you to pay attention.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
It is important for
you to pay attention.
Well, it is true.
Without paying attention,
you can never really know
what it is that people want.
So, for example, if
you're not sure what kind
of notifications people are
going to find most relevant,
just ask them to tell you.
Nike running and lots of
other apps have settings
to allow people determine
which notifications
they want to receive.
These kinds of settings are
what we might call explicit
user preferences.
They are very direct ways to
determine what is most important
to the people who use your app.
However, people don't
often explore app settings.
They can be difficult to find.
It takes an investment of
time to muck around with them.
People don't always
know what they do.
That's where implicit user
preferences will come in.
When you get to know someone,
you learn about their
tastes and their interests.
A lot of this you pick up just
by observing what it is they
like to talk about and do.
For instance, if you regularly
get coffee with a friend,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
For instance, if you regularly
get coffee with a friend,
you probably know what kind
of coffee they like to drink
and how they like it prepared.
Because of that knowledge, you
can go and order them a drink,
and you would get just the
right thing that they wanted
without them having
to even tell you.
By observing and responding
to people's interactions
or behaviors, your
app can make subtle
but significant adjustments
to better accommodate
the preferences
of the people who use it.
The Fitness app is a great
demonstration of this concept.
Let's say I'm going
to go for a run.
I'm going to go work out
for the very first time.
I'm presented with a list of
different workout options.
I'm going to pick outdoor run.
On the next screen,
I'm given the choice
to select a goal for my run.
I can choose to have
a calorie goal
or duration goal
or a distance goal.
Now, when I work out, I don't
like to set very high
expectations for myself.
So I'm going to go with no goal.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So I'm going to go with no goal.
Finally, I just tap
start and off I go.
Now, let's fast forward
a couple of days.
I'm going to go for
an outdoor run again
because I always run outside.
When I launch the Fitness app,
outdoor run is the first
option in the list.
That list is being reordered
based on frequency of use.
And because it contains
information about my last run,
it is now physically taller,
so it's more prominent
and easier for me to tap.
On the next screen, the no goal
option is selected by default,
because that's the last
option that I chose.
It's unlikely for me
to change this setting.
By displaying it by
default, I don't have
to swipe past three screens
every single time I want
to go for a run.
By remembering basic
information about how I,
as an individual user,
like to work out,
Fitness is tailoring itself to
suit my individual preferences.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Fitness is tailoring itself to
suit my individual preferences.
There's no configuration
that happens per se.
It just happens automatically.
It is a bit like having a
really good personal trainer.
A personal trainer
listens to you.
They understand what
your Fitness goals are
and remember the types
of exercises you do
when you work out.
Finally, when we are speaking
with someone who is really busy
or seems stressed out or kind
of distracted, we try to get
to the point more quickly
and drop irrelevant datails.
Interactions on Apple
Watch are very brief.
Your notifications, Glances
and apps should communicate the
most critical information only.
Okay. So let's move on to the
next big theme for the design
of Apple Watch and that
is Holistic Design.
Holistic Design is about
blurring the boundaries
between software and hardware.
The black color of the Watch
bezel was carefully chosen
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
The black color of the Watch
bezel was carefully chosen
to match the color
of the display.
This makes the border or
boundary between the display
and bezel practically
indistinguishable.
If you design your app to
have a black background,
the bezel will provide
visual padding
for your app's interface.
This allows you to go edge to
edge with content and controls
and allows your app
to seamlessly blend
into the watch itself.
Now, the second aspect of
Holistic Design that I would
like to talk about is
fully utilizing the Force
Touch display.
Firmly pressing the
display will show a menu
if your current screen has one
added to it in the story board.
The menu control is
one of the primary ways
that people interact
with Apple Watch apps.
It provides a number
of practical
and usability benefits
to your app.
First it frees up space
so that your UI can focus
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
First it frees up space
so that your UI can focus
on displaying information
and content.
There's very limited space
on Apple Watch display.
The menu gives you a way to
present controls without needing
to clutter your app's UI.
For example, in the stop
watch app, there's a bunch
of different styles to choose
from, but it would be hard
to show these in the main UI.
There just really
isn't enough space.
Perhaps these controls could
be added below and accessed
by scrolling, but with the stop
watch it is really important
that the time stays on screen at
all times in a fixed location.
Now, the menu plays
an instrumental role
in allowing apps like
Weather, Calendar and messages
and many other apps to focus
more on content and information.
Another huge benefit
of Menus is efficiency.
Menus make actions far
quicker for people to access.
For example, the
top level screen
in the messages app contains
a list of conversations.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
in the messages app contains
a list of conversations.
The menu for the
screen has an action
to start a new conversation.
Now, if this action
wasn't in the menu,
it would probably be
displayed in line with all
of your conversations.
The trouble is, this could be
a really, really tall screen,
and what you are looking
at could be very far away
from where that action is.
And it would be hard
for people to remember
if that action was all the
way at the top of the screen
or all the way down by
the bottom of the screen.
Menus allow accessing actions
without losing your
current scroll position.
Now, Menus are also a great when
your app has a global control
that you want people to be
able to access from any screen.
So for example, in the
activity app, there's an action
for changing your
daily move goal.
This action is shown
in the menu no matter
where you are in the app.
The activity app is
structured as a page-based app.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
The activity app is
structured as a page-based app.
If that control wasn't
in the menu,
it would perhaps
be in its own page.
But that would require four
swipes just to get to it
from the first screen.
By putting this action
in the menu,
you simply press
the screen no matter
where you are and there it is.
Another benefit of menus is
that they can avoid redundancy.
Let's go back to the
activity app for a second.
If we didn't put this
action into a menu
or on its own screen, we
could have multiple instances
of it on every page.
But that would be
pretty redundant.
Plus it could lead people
to be incorrectly assume
that that action had something
specifically to do with the page
that they were currently
looking at.
That would be wrong.
Okay. So I've gotten a lot
of questions about what kinds
of things people
should put into a menu.
Menus are primarily
for contextual actions.
That is actions that are
relevant to the current context.
Context here refers
to two things.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Context here refers
to two things.
It could be the app or it
could be the current screen.
So activity is for
the app as a whole.
But in messages, as we saw
when you are looking at a list
of conversations, you have an
option to add a new message.
So when you are looking
at an individual
conversation, the menu changes.
A different set of actions are
appropriate for this context.
Making sure that the contents
of your menu are contextually
relevant to the app as a whole
or to the current screen
is really important.
People need to know what these
actions are going to act upon.
So in this case, it is clear
that these actions are going
to effect the current
conversation being viewed,
because that was what was
displayed before people pressed
the screen.
Another good use of menus is
for view mode preferences.
That menu with different
stop watch options is a view
mode preference.
Another example is
from the Calendar app.
There is a toggle for
switching between a list view
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
There is a toggle for
switching between a list view
of your schedule or a
time proportionate view
of your schedule.
View mode preferences
are highly contextual
because they affect
the appearance
of the current screen.
It is worth mentioning
that menus are optional.
There is no need to have
a menu for a given screen
if there's no actions
or preferences that
are appropriate.
And some apps might
be simple enough
that they don't need
a menu at all.
Finally, it is not always
good to put actions in a menu.
Critical path actions, meaning
actions that are necessary
for the user to continue forward
in your app and complete a task,
should not be displayed
in a menu.
They should be presented
in line.
Displaying actions in line
makes them more discoverable.
So, for example,
in the Fitness app
when we've completed a work
out, you are given this choice
to either save or
discard the information
that was recorded
for your work out.
This is not an optional
decision.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
This is not an optional
decision.
You need to make the decision
one way or another in order
for you to progress
forward in the app.
In addition, if the
person's highly likely
to select a particular action,
then it should probably also
be shown in a main interface.
For example when you go
to listen to a voicemail
on the phone app, the chances
that you are going to want
to press that play button are
somewhere around 100 percent.
Right? Putting that action
in a menu would make it
needlessly inconvenient
for people to access.
And while calling the person
back who left the message
and deleting the voicemail are
definitely secondary actions,
there's still plenty of
space in this interface
to display those
controls without leading
to usability problems
or visual clutter.
The next aspect of Holistic
Design that I would like to talk
about is the Digital Crown.
The Digital Crown
enables fluid, responsive
and precise scrolling.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and precise scrolling.
So when designing your app,
don't feel like you need
to make everything visible
on screen at one time.
It is just not necessary.
So the detail screen in the
Stocks app, for example,
contains a lot of information.
Since there's no need to show
it all on screen at once,
the most important
information gets
to be displayed above the fold.
It's given a lot
room to breathe,
and we can see the
current values displayed
in much larger text, it's
a nice visual presentation.
The same is true for
apps like Weather
or Activity or many others.
Trying to show everything
on screen
at once is a sure fire recipe
for having a really cramped
looking interface with text
that is too hard to read.
In WatchOS2, the Digital Crown
becomes even more powerful.
There's a new WatchKit
control called the Picker
which I'm sure many of you
have already learned about.
It gives you a lot of
great possibilities
for the design of your app.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
for the design of your app.
Pickers come in three
different styles.
This is the stack style Picker.
It provides a way to navigate
and select from a list
of images or a set of images.
There's a list style
Picker which can be used
to select among an array
of text or numeric options,
and the sequence style Picker
which lets you pick an image
out of an image sequence
so you can do something
like this star rating.
And you can also use
a coordinated option
which allows you to display an
image sequence and pick an image
from the sequence to reinforce
the value of the Picker.
For example, when we
change the hour value here,
that orange arc is
being coordinated
and it reinforces the
value of the hour.
Now, the Picker allows values
to be displayed inline
and adjusted inline.
This is important because
it obviates the need
for having a completely
separate interface
for changing a selection.
As a result, it can
make interactions
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
As a result, it can
make interactions
with your Watch app
far more efficient,
and making selections inline
allows you to retain context.
When we're adjusting
the data value,
it's nice that we can
see what the month
and year is at the same time.
When using a Picker,
there's a few options
that you should be aware of.
First, Pickers have outlines.
Outlines help people
to understand
that a Picker has focus,
meaning people understand
that when they rotate the
Digital Crown, the outline,
the value that is outlined
in green will be adjusted.
This is important when you
have two or more Pickers
that are displayed on
screen at the same time.
In the example of the timer
app, the outlines let us know
that both hour and
minutes can be adjusted
and which one will respond to
rotations of the Digital Crown.
Outlines are not always needed.
So in this example, there
is no need for an outline
because there's only
one Picker on screen.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
because there's only
one Picker on screen.
However, if this
screen were to scroll,
an outline would be
needed because people need
to know whether rotating the
Digital Crown will scroll the
screen or adjust
the Picker value.
You can also add a caption
if it's not clear what the
items in your Picker are.
For example, when you
are selecting different
complications, some
of these items aren't
totally self-explanatory.
They require a caption
to explain what they are.
Now, captions are set on a per
item basis, but if every item
in the Picker has the same
caption, it will serve
as a label for the
Picker itself.
Okay. The last setting
that you need to be aware
of is the contextual
indicator or scroll indicator.
It displays when the
Digital Crown is rotated.
The contextual indicator
is useful
for helping people understand
about how many options they have
to choose from and where
they are in that list.
Now, the last aspect of
Holistic Design that I would
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Now, the last aspect of
Holistic Design that I would
like to discuss with you today
involves the Taptic Engine.
And in WatchOS2 two
your apps will be able
to create haptic
feedback as many
of our built-in apps do today.
Each haptic pattern
is complemented
by a very brief audio tone.
By using the sense of touch and
sound to provide user feedback
in addition to the visual cues
that people see on the screen,
Apple Watch apps can
create a deeply immersive
user experience.
There are nine different
types of haptic feedback
for you to choose from.
I'd like through each one with
you and show you an example
of how they should be used.
When I prepared this
presentation,
I realized it's hard to
talk about haptic feedback
when you guys won't be able
to experience how
these things feel.
So I got a little bit of
budget allocated, and I had all
of your chairs rigged
with 14 super high powered
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of your chairs rigged
with 14 super high powered
Taptic Engines.
I hope you guys are
ready for this.
Just kidding.
That's why I would like
to show you a diagram
of how each haptic pattern
and audio wave form work
in conjunction with each other.
So, for example, this is
the notification haptic.
The magenta shape
represents points in time
where the Taptic
Engine would be active
and the wave form obviously
represents the audio tone.
Let's hear how notification
sounds.
[Sound]
This haptic plays when
you receive a push
for local notification.
Now you can use this
in your app as well.
Let's look at it in context.
[Tone]
The notification haptic,
and audio tone is good
for alerting people when
something significant or out
of the ordinary has occurred
and requires their attention.
The direction up and
direction down haptic is useful
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
The direction up and
direction down haptic is useful
for alerting people
when a really significant
value has crossed
above some significant
threshold or crossed below it.
Let's hear how that sounds.
[Tone] That's up.
And down. [Tone] Let's
see that in context.
[Tone, tone, tone.
Tone, tone, tone]
The success haptic provides a
confirmation tone to indicate
that an action has
completed successfully.
[Tone] That has a nice
ring to it, right?
Very positive.
In context.
[Tone] So this tone
is really good
for providing people
positive feedback
like they are taking a quiz
and they got an answer right
or playing a game and
they completed a level.
Here is the failure
haptic, the arch nemesis
of the success haptic.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of the success haptic.
Hear how that sounds.
[Tone] The failure
haptic indicates
that an action failed
to perform.
[Tone] That's discouraging,
pretty negative.
Generally you wouldn't
want to fail on someone
and not give people
options for a try.
It's better to do
something like this.
[Tone] And see that in context.
[Tone] This tone is
a bit more forgiving.
It tells people, "Hey, it
didn't work out very well,
but okay, no big deal.
You can totally try again.
" There are also tones for
starting an activity [Tone.],
and stopping an activity.
[Tone, tone] Here
they are in context.
[Tone, pause, tone, tone] As
the illustration suggests,
these are good for timers or
your Watch starts playback
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
these are good for timers or
your Watch starts playback
or recording on a
companion iOS app.
Finally there's a special
and subtle haptic
called a click haptic.
This one as I said
is a bit special.
As you can see it's far
more quiet and brief
than others we just looked at.
In fact I wasn't sure everyone
would be able to hear it,
so I artificially normalized its
audio level so it is much more
like the others but in
reality it's a bit more quiet.
[Click] Let's hear that again.
[Click] Very quick, right?
This haptic provides the
sensation of a dial clicking
at predefined increments
or intervals.
[Clicking sound] This haptic is
good for things like this dial.
[Clicking sound]
Now, if you notice,
this dial has minor tick
marks and major tick marks.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
this dial has minor tick
marks and major tick marks.
I only played this click
sound at the major tick marks
because you don't want
every little tick mark
to cause this click.
It would be too much.
Even playing at the major
tick marks could be too much.
The thing is, about haptics,
they can't overlap
with each other.
So let me play an illustration
of what we just saw.
[Clicking]
You can see here there's plenty
of space in between these clicks
for them to individually play
without them stomping
on each other.
But if we were adjusting this
volume with the Digital Crown,
that's fine if we're
rotating slowlily.
What if we did a quick
twist and it went
through those values
very quickly.
It would look more like this.
Now, the thing is,
this can't happen.
The Taptic Engine will
prevent these haptics
from playing simultaneously.
Instead it will play
the ones that it can.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Instead it will play
the ones that it can.
Now, this would result
in people hearing
and feeling less feedback
when they go quickly
than if they had gone slowly.
[Clicking noise]: We
only heard two cliques
when before we heard five.
That would lead to confusion
about how much the
value had been adjusted.
With this haptic,
use it judiciously.
Exercise restraint.
Just remember that haptics
can't play simultaneously.
For all haptics this
is good advice.
You should use them sparingly
to draw people's attention
to truly important
events in your app.
Their effectiveness
will diminish greatly
if everything a person does in
their app causes their watch
to vibrate and make sounds.
And please use these
haptic tones and patterns
as they were intended
to be used.
If haptic and auditory
feedback isn't used consistently
across all of the apps that
we make, they are going
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
across all of the apps that
we make, they are going
to lose their meaning.
We are all in this together.
We need to use these as they
are supposed to be used.
Okay. So quick recap
about Holistic Design.
Holistic Design is about
blurring the physical boundaries
between software and
hardware, getting your UI
to match the bezel color and
utilizing the Digital Crown
and the Force Touch display
and the Taptic Engine
to create a seamless connection
between software and hardware.
Okay. So let's move on to
the last major design theme
for Apple Watch and that
is lightweight interaction.
Lightweight interaction
means taking advantage
of the Watch's unique
position on the user's wrist
by offering them quick
and convenient access
to information and actions.
Interaction times in Apple
Watch are far more brief
than on an iPad or iPhone.
Interaction times on those
devices could be in the minutes
or even hours, whereas
interaction times
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
or even hours, whereas
interaction times
in Apple Watch are just
a matter of seconds.
Our internal metric for
interaction times is
about five seconds or less.
Checking your schedule,
going for a run,
replying to a text shouldn't
take longer than this.
You need to seriously consider
this when designing your app.
Designing for such
short interaction times
requires focus.
It requires focusing on the
most essential information
and actions and presenting
them as clearly
and legibly as possible.
You may need to drop
features if it takes too long
for people to accomplish tasks.
With that in mind, let's
look at how the concept
of lightweight can influence
how you design Glances,
Notifications and apps.
Let's start with Glances.
The name says it all,
it speaks volumes.
Glances are scannable
summaries of the information
that people seek
out most frequently
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that people seek
out most frequently
from their favorite apps.
Your Glance may only be seen
on screen for a brief moment
in time as people swipe
from one Glance to another.
So focus on showing only the
most essential information
from your app and display
it as clearly as possible.
The purpose of the Weather
Glance is very clear.
Show people the current
weather conditions
in their current location.
This information is timely and
it's contextually relevant,
and it is the information
that people seek
out most frequently
from the Weather app.
Usually it's the only thing
that they want to know.
If they want to know
more like the forecast,
tapping the glance
will deep link
to an appropriate detail
screen within the app.
So even though the Glance
only shows a little bit
of information, more information
is just one tap away.
Try to strike a similar
balance with your Glance.
Display the most
frequently sought
after information from your app.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
after information from your app.
Show information that is timely
and contextually relevant.
And make it easy for people
to get more information
by deep linking
to an appropriate
screen within your app.
And in addition, it is important
to communicate as clearly
and as efficiently as possible.
Even if you are only
showing just a few key pieces
of information, some of that
data might be more important
than the rest.
In the Weather Glance,
we immediately focus
on the current temperature
because it's so much larger
and brighter than the
rest of the information.
When there's just a few
elements on the screen,
there's more space for you
to do something like that
to draw people's attention to
one really key piece of data.
Graphics are also
a really good way
to communicate clearly
and efficiently.
The icon here makes it clear
that it is partly
cloudy outside.
Animations and graphs
are also great
for communicating
efficiently in your Glance.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
It is also usually a good idea
to left align content
in your Glance.
Left aligned text for
most languages, at least,
tends to be more scannable
and it looks more orderly,
and it will help your
Glance to feel right at home
in the overall Glance UI.
Now when you start to design
your Glances, it is important
to know that Glances are
constructed from templates.
Glances are made by
combining one upper template
and one lower template.
This is a modular system.
There are 12 upper templates
and 24 lower templates
for you to choose from.
To make your Glance, you
just pick one of each.
Now, Glance templates
partially determine the size
and appearance of text,
which helps to ensure
that they are highly legible.
And Glance are also designed to
follow a consistent layout grid.
This helps to provide an element
of consistency across
all Glances.
Without this structure, the
overall Glance UI would start
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Without this structure, the
overall Glance UI would start
to feel really cobbled together,
and that wouldn't be very great.
Enough about Glances.
Let's move on to notifications.
Notifications are a key aspect
of many Apple Watch experiences.
Notifications are all about
lightweight interaction.
The purpose of a notification is
to communicate high value
information clearly,
quickly and succinctly.
In order to accomplish this,
you want to use as few words
as possible and avoid
any unnecessary details.
Now even though the height
of a notification can scale
to accommodate its contents,
people don't want to read a lot
of text on their Apple Watch.
Get to the point quickly.
The notification that Calendar
sends when a meeting has started
and maybe you're running
a little bit late,
that's a good example of this.
There is no unnecessary
information or fluffy language.
Thirty-three minutes
ago, which meeting?
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Today. 4:30 to 5:30.
Not this. As with Glances, if
people want to know more detail,
your notification
can offer a deep link
into an appropriate
screen in your app.
Now, most notifications
contain only text.
And that's great.
But in some cases
you can use graphics
to communicate more quickly.
Like this notification
from the fitness
and diet tracker app Life Sum.
They use graphics for many of
the notifications they send.
Obviously this one is a
reminder to drink water.
But the real power
of notifications isn't
just how they inform people
about the things that matter.
They are also a convenient
way for people to take action.
By seeing actions
presented in a notification,
people know that it's
possible to take action
and they know what their
choices for acting are.
Interactive notifications
are really about triage.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
You should think
about it in this way.
People receive timely
or urgent information
and they can take
immediate action.
Only display the most
relevant action or actions.
So, for example, the new message
notification gives you just one
option, to reply.
Now, other actions could
have been presented here,
but this is hands-down
the most likely choice
that anyone would want to make.
Okay. Enough about
notifications.
Let's turn to how you can
support lightweight interaction
in your apps.
Apps and games in Apple
Watch should be far simpler
than the typical
iPhone app or game.
You must always remember Apple
Watch is not a miniature iPhone.
I have seen countless developers
trying to take the entirety
of their iPhone app experience
and cram it into a Watch app.
That is a recipe for disaster.
It leads to overly complicated
apps that are difficult
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
It leads to overly complicated
apps that are difficult
or impossible to
use and navigate.
To be totally clear, making
an Apple Watch app to be
like your iPhone
app is a non-goal.
The goal instead should be
to design an Apple Watch app
that complements
your iPhone app.
This may involve hand picking
just one or two key functions
and bringing it over
to Apple Watch.
Or it could be creating an
entirely different experience
for Apple Watch.
Whatever you do, focus
on the essentials.
Don't present too much
information or functionality.
Only include the things
that people truly want quick
and convenient access to.
Let's look at a couple
of examples.
Green Kitchen on iOS is an
awesome cooking app with lots
of delicious recipes,
ingredient lists
and step-by-step instructions.
Technically they could have
done all of this on Apple Watch,
but they took a different
approach and focused
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
but they took a different
approach and focused
on something simple
which is timers.
While you are cooking with one
of their recipes, you'll notice
that the times are highlighted
in green, and if you tap one
of those times, it will start
a timer which you can monitor
on your iPhone but also
monitor it on your Apple Watch.
Their Apple Watch app is
a quick and convenient way
to see how much time is
left in the current step.
Of course you can choose
to receive notifications
when the timer is up.
Let's look at the
New York Times app.
Now, on the iPhone they have
tons and tons of content.
You can access all
of their editorials
and articles and more.
Again, doing this on Apple
Watch is technically possible,
but it would be a
terrible, terrible idea.
Don't do that.
Just browsing through the list
of sections alone would
take way too long.
No one in their right mind wants
to read a thousand word
article on their wrist.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Instead the New York Times app
for Apple Watch only shows
a curated set of top stories
that their editorial team
has hand crafted just
for the Apple Watch.
They only show what they
believe are the most important
and timely news stories.
Each story is really
just a quick synopsis.
It is not, they are not
displaying full articles.
Reading the full story
would take way more
than two to five seconds.
If people want to continue
reading, there's a save
for later action in the menu
so they can bookmark a story
and read it later on
the iPhone or iPad.
Or they can take
out their iPhone
and continue reading more.
It's natural behavior.
That is why it's so important
to implement hand-off.
When the New York Times reader
transitions from the Watch
to their iPhone, they may notice
on their lock screen the
New York Times app icon.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
on their lock screen the
New York Times app icon.
Swiping that up will take
them directly to the story
that they are reading
on the AppleWatch.
Hand off makes it easy for
the New York Times reader
to move seamlessly from
their Watch to their iPhone
when they want to know more.
This benefits the New York
Times reader, of course,
but also benefits
the New York Times
because it keeps people
engaged with their experience,
their apps for a
longer period of time.
Hand-off is relatively new.
You may feel the need to
educate your users about it.
As a matter of fact, the
New York Times does this.
In the first launch onboarding
experience they show a tip
about how it works.
Otherwise, they just rely upon
people naturally discovering
this function on their own.
Now, other apps take
a different approach.
This is CNN.
Soon they will be
taking advantage
of the video play back
capabilities of the Apple Watch
to provide short video
clips from their content.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Now, they are going to
also provide a little bit
of instruction that
says people can continue
to watch the full
video on their iPhone.
That is really good
information to have
because without it
you wouldn't know
that there's a longer
version of the video.
This is useful information.
CNN also shows this little
monochromatic version
of their iOS icon which
is a pretty clever trick
for priming people to spot it
when they go over
to their iPhone.
Both CNN and the New York
Times provide good examples
of how you can communicate that
your app supports hand off.
However, over time this may
become less necessary as more
and more people will
expect that all
of your apps will
support hand-off.
It's up to you to decide
what's right for your app.
If you are concerned that people
won't realize there's more
information or functionality
which is available
on your iPhone app, by
all means, let them know.
That's helpful to your users.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
That's helpful to your users.
Otherwise, just let people
discover it on their own.
Now, that said, there's
one thing
which is almost never required
when it comes to hand-off.
That is showing a
butt-in for hand-off.
Only in rare circumstances is
it ever necessary for people
to tap a button in order
to continue an activity
on their iPhone.
Hand-off should happen
automatically.
Now, there's one more aspect
of lightweight interaction
that I would like
to discuss with you.
It relates to health
apps and relates to --
when you are using
HealthKit to track a work out.
More specifically it's
about creating sessions
to keep your app
in the foreground
when you are tracking an
activity like going for a run.
Ordinarily when Apple
Watch has been sleeping
for ar short period of time, it
assumes that the user is done
with doing whatever
they were doing before,
no longer interested in
the app, and it will resume
to the clock face, not
the previously used app.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to the clock face, not
the previously used app.
But this changes when
an app is being used
to track an activity
like going for a run.
While that person is
running, they want to stay
in the activity tracker app,
raising the wrist
should allow them
to quickly check their
progress, which is why
in WatchOS 2 activity
tracker apps will remain
in the foreground while the
HealthKit workout session
is ongoing.
Implemented correctly, sessions
enable lightweight interaction
because simply by
raising your wrist,
you return to the app
you're most interested in.
People don't need to
continually navigate back
to the app from the home screen.
If you intend to
adopt this feature,
there are a few key
things you should consider
and keep in mind.
First and foremost, the person
using your app must always be
in control.
They must deliberately and
knowingly start a workout.
They must always understand
how to end a workout.
And when they look at the
app, it is a really good idea
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And when they look at the
app, it is a really good idea
that they understand that
a session is ongoing.
Your app's UI should
be obviously different.
It should be clear to
people that they are
in a special modal state.
The Fitness app provides a good
example for you to reference.
To start a workout
in the Fitness app,
the user taps the start button.
The button literally says start.
It's clear.
After tapping the start button,
there's a three-second count
down that a session
is about to begin.
Ending a work out is
equally straight forward.
You just swipe to the first page
and tap the clearly
marked end button.
This is a consequence.
This is why I don't
set high expectations
for myself when I go for a run.
As a convenience, there's a
second end button in the menu,
but it's a good idea to not
rely upon people knowing
that your app has a menu in
order for them to end a session.
While the workout is ongoing,
the Fitness app UI is
clearly in a different state.
It is obvious, the
UI makes it obvious
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
It is obvious, the
UI makes it obvious
that it is recording a work out.
Sessions are about convenience.
They are not about
keeping people
in your app against their will.
If the session started
without the user's knowledge
or it's difficult for them
to figure out how to end it
or it is not clear
that one is ongoing,
they will likely feel
stuck in your app
and that is not a
great experience.
So let's take stock.
I think that was a lot of stuff.
I want to review.
Personal communication is
about applying what we know
about thoughtful and effective
interpersonal communication
to the design of your apps.
It is about being respectful
of people's time and attention
by being concise,
relevant and responsive
to the person's individual
preferences.
Holistic Design is about
blurring the boundaries
between software and hardware
by making your app's UI
practically indistinguishable
from the Watch bezel.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Utilizing the Force Touch
display to enable quick access
for contextual actions
or preferences.
Knowing that scrolling is
easy so there's no need
for cramped UIs, and using
the new Picker to enable quick
and accurate selections
in context.
And using haptic feedback
to create sophisticated
and more deeply life like
experiences in your app.
And lightweight interaction
is about offering people quick
and convenient access to
information and actions.
Now, these three themes
should be the foundation upon
which you design
your Apple Watch app.
But there's something
missing here.
There is something that
these three themes don't
adequately capture.
That is the role of
beauty and delight.
Apps that are beautiful and
delight us make our experience
with technology more
interesting,
more welcoming and more fun.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
more welcoming and more fun.
Even though the Apple
Watch display is small,
there is still plenty of
space to make it beautiful.
Even though interaction
times are meant to be brief,
there's still plenty
of time to delight.
I would like to share with
you three of my favorite apps
that are really exemplars
of this concept.
Resound makes Bluetooth
enabled hearing aids
that could be controlled
by your Apple Watch.
This is a natural
fit for Apple Watch
because it is now really
convenient to discretely check
and adjust the settings
of your hearing aid.
There are various preset options
that you can choose from.
You can modify those with
fine grained controls
for noise reduction,
speech attenuation
and wind cancellation.
Now each of these settings
is beautifully expressed
with animation.
They could have just
used sliders, right?
But these animations are
gorgeous, and they do way more
to help people understand
what each setting does
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to help people understand
what each setting does
and what the current value is.
Now, Pace Maker is
an awesome DJ app
that just won an
Apple design award,
and one of the reasons
why we awarded them is
because of their excellent
Apple Watch design concept.
Pace Maker turns your
watch into a remote.
It allows you to mix and pick
tracks when your iPhone is not
on you and docked
with your speaker.
Now, one thing that is really
cool is you can apply effects
while a song is playing.
In a second I'll
show you what happens
when you apply an effect.
I would like you to pay
attention to these animations
that they made for
these buttons.
[Music]
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
[Music]
One more time.
[Electronic music]
How cool is that?
Right?
[Applause]
Yeah, give it up for Pace Maker.
It is amazing.
Now, they could have just
highlighted those buttons
or drawn an outline around
them when they were active,
but they didn't do that.
They changed the
size, the shape.
They had them sync
up with the music.
I mean it's super creative.
It's meaningful, and it is
synched up to the music.
Really cool.
And finally, this is Toby.
Now, in Apple Watch
you can feed Toby.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Now, in Apple Watch
you can feed Toby.
When he's bored you
can play with Toby.
When he's tired you can
ask Toby to take a nap.
Good night, little guy.
You can even take Toby
for a walk when he needs
to go to the bathroom.
Each of these animations
is adorable.
They are these great
little moments.
Look at the way he's peeking
off from the side of the watch.
So engaging.
It's so charming.
But check this out.
Now, Toby can't be
on both your iPhone
and the Watch at the same time.
It is not physically
possible for a dog to be
in both places at once.
So in order to call Toby over to
your Watch you just Force Touch
press the display, use the
action, say, "Here, Toby."
Isn't that amazing?
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Isn't that amazing?
I just love that.
So creative.
These apps demonstrate
that creative ideas thoughtfully
executed with great attention
to detail result in some
really fantastic experiences
for Apple Watch.
All three look fantastic
and do things
that are original
and unexpected.
And all three use
animation to great effect.
Which brings me to the last
thing I want to talk with you
about -- talk to you about
today and that is animation.
In watchOS 2 making great
animations just got a
lot easier.
Basic layout and appearance
properties are now animatable
at runtime.
You can animate properties,
like it controls its
height or its width.
You can adjust insets.
You can change alignments.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Background colors.
Tint colors.
And of course opacity.
Now, all of these
animations have easing applied
so the transitions between
different states are smooth
and natural.
By combining animations you
can do some pretty cool things.
For instance, you can
create animated bar charts
or smoothly animate
between different data sets.
You can recreate the number
animation from the activity app.
Or better yet, you
can combine this
with an image sequence
animation.
There are really
countless possibilities
for you to explore.
But as with haptics,
exercise restraint.
Animations on Apple Watch
should, of course, be quick.
They should never feel like they
are slowing you down or getting
in your way especially
on your Watch.
They should be these
little moments
that make your app more
informative and delightful.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that make your app more
informative and delightful.
Okay. So that's about
all the time I have.
For more information, these are
really great sessions I want you
to know about.
If you're an engineer, you
definitely want to check
out WatchKIt tips and tricks,
happens this Friday
in this room.
If you want to know
more about animation,
we have a whole session devoted
to the topic called
Designing with Animation.
Next, as in not next because
it was a couple hours ago,
but we had a great
presentation called Designing
for Future Hardware.
That's a fascinating look at
how you design for a device
that doesn't yet exist.
The video will be online
shortly, of course.
If you're into typography like
I am, you really do not want
to miss this session which
happens Friday here in Presidio.
It is one of the people
that designed San Francisco,
the new system font for
all of our platforms.
He goes into great detail about
the design of the typeface.
Finally, if you are not sick
of hearing my voice already,
we are going to be doing a
second entirely different talk
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
we are going to be doing a
second entirely different talk
about designing for Apple
Watch that happens just
after the type session.
And in the meantime I
encourage you to check
out the recently
redesigned Apple Watch human
interface guidelines.
It contains a lot
of information,
downloadable templates
and guidelines
that will help you jump
start the design process
for Apple Watch.
For further questions or to show
me the awesome apps you made
for Apple Watch or
any other platform,
feel free to shoot me an e-mail.
Thank you so much for your time.
It has been an honor.
[Applause]