Application design guidelines for Apple Watch
The Apple Watch is here to stay. Maybe there is still some work to do. Maybe designers and developers around the world are still scratching their heads, doing more and more wireframes and more and more concepts, looking for the killer app that will turn this device into something really successful. That’s not yet the case, but it’s just a matter of time.
Here we will see some guidelines to be followed in order to design applications for this device. As you will see here, the Apple Watch doesn’t just looks to be simple: apps are very simple as well.
Application structure
An Apple Watch app is made out of these elements:
- The WatchKit app.
- The Glance screen.
- The app Notifications.
The WatchKit App
Here is where we interact with the application data. We can get to the app main view directly via the Home screen, through the Glance screen, or via Notification.
We only have two navigation patterns for a WatchKit app: hierarchical navigation and page-based navigation.
When we use hierarchical navigation we go from view A to view B by tapping an specific section of the screen. The hierarchical navigation pattern works well for complex applications, but be careful: users are not going to spend too much time looking at their wrist. Don’t overcomplicate your app. Remember that Apple Watch is just a companion device.
Page-based navigation works with a row of little bullet points which will be displayed at the bottom of the screen. The user can visit the application pages by swiping horizontally. This pattern works better if there is not a direct relationship between the content you can see for each page.
Glances
A glance is a context-adapted, single page, non-scrollable view of an app. You can browse app glances by swiping horizontally. As there is limited room, be very careful with what you display in your glance. The more useful and attractive, the better.
Best thing you can do is to use one of these templates to design your app glance. We have separate guidelines for the upper and the lower section of the glance:
Notifications
Notifications are very important for Apple Watch apps, as they are the main call-to-action method we have assuming the Apple Watch is a passive device, something we are not looking at all the time.
Apple Watch has two stages of notifications:
- Short-look interface.
- Long-look interface.
When the user receives a notification, he will see the short-look interface. This interface will be active for just a few seconds. It looks like this:
The short-look interface will contain:
- The app icon.
- The app name (Designmodo in this example). It will appear in uppercase and with the app’s designated main color. The main color for the icon should match this color. Try to use vibrant colors as main app colors, and remember the black background we will work with.
- The notification title (Giveaway in this example), so user can identify the notification.
At this point the user can:
- Dismiss the notification by lowering their wrist.
- Ask for additional details by raising their wrist or tapping the screen.
When we look for additional details it comes into play the long-look interface, which will look like this:
The long-look interface will contain:
- The small version of the app icon.
- An application title bar, which will feature the app main color and the app title in white.
- A detailed description of the notification.
- The actions the user can take from there.
As this is a long-look interface and we need a number of components to be displayed, it’s not a bad idea at this point to let the user work with the digital crown to scroll up and down and see all the information he needs and the actions he can take. The less necessary the better, but sometimes we need it.
Interaction methods
The Apple Watch is a very small device, so it works with very specific and innovative interaction methods.
The Digital Crown is the scrolling method. Good to display pages longer than expected. Be careful with that: very long pages are terrible from a usability point of view.
Force-touch was initially an specific interaction method for Apple Watch, but it rapidly make its way into more complicated devices. If we have in mind the mouse right click, it’s very similar. When we use it we will get up to four items relevant to the current screen.
This pattern works very well for context menus:
Bear in mind that Apple Watch does not allow to use multi-touch gestures like the pinch to zoom.
Application layout
The Apple Watch comes in two different sizes: 38mm and 42mm.
Bear this in mind to prepare the basic artboards for your apps. Applications like Sketch are actually fully aware of that as these artboard sizes are ready to be used out of the box.
Apple Watch works with a retina display, so you need to provide images at double the resolution.
Always use a black background in order to match the bezel.
Buttons should always be full width. If you want to display side by side buttons, better use icons instead of text. Put no more than two buttons in the same row and be consistent with button height.
The font of preference for Apple Watch apps in San Francisco. It’s a tailor-made font you can download from here. You can use different fonts, but this one has been designed specifically for the Apple Watch.
Application icon must be delivered in different sizes, as you can see here:
For more details there is an Apple Watch icon template here.
