Streaming is available in most browsers,
and in the Developer app.
-
Designing for Apple Watch
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.
Resources
-
Download
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 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 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, 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 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, 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 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 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 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 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 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 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 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. 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. That's up.
And down. 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.
That has a nice ring to it, right? Very positive. In context. 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.
The failure haptic indicates that an action failed to perform.
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.
And see that in context.
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 , and stopping an activity.
Here they are in context.
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. Let's hear that again. Very quick, right? This haptic provides the sensation of a dial clicking at predefined increments or intervals. This haptic is good for things like this dial.
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.
: 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 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 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 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 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 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 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 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.
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 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? Right? 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. 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? 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.
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.
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 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]
-
-
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.