Apple Watch represents a new chapter in the way people relate to technology. It's the most personal device Apple has ever designed, and it enables new ways to receive information and to interact with apps. Learn about the foundations on which Apple Watch was designed and how they lead to Apple Watch apps that complement the iPhone, support lightweight interaction and deliver timely and relevant information to the wrist. Discover how to create usable and beautiful apps, notifications and glances through effective use of typography, information design, layout, animation, and color.
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.
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
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.
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.
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
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
that you send to them.
Now, determining relevance can sometimes be pretty
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
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,
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.
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
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,
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.
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.
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
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
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
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.
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.
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.
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
Another good use of menus is for view mode preferences.
That menu with different stop watch options is a view
Another example is from the Calendar app.
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.
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.
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.
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
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.
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
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
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
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
I hope you guys are ready for this.
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.
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.
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
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?
[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.
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
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.
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.
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.
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.
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
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
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
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
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.
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.
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
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?
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.
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
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
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.
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.
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.
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.
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.
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
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
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
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.
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
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.
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
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.
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
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
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.
One more time.
How cool is that?
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.
And finally, this is Toby.
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.
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?
I just love that.
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
Basic layout and appearance properties are now animatable
You can animate properties,
like it controls its height or its width.
You can adjust insets.
You can change alignments.
And of course opacity.
Now, all of these animations have easing applied
so the transitions between different states are smooth
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.
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
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
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.
Looking for something specific? Enter a topic above and jump straight to the good stuff.
An error occurred when submitting your query. Please check your Internet connection and try again.