Designing for the Apple Watch
I’m sure for those who have seen what the Apple Watch is capable of there is a fair amount of disappointment, but what I want to do is show you the benefits of having limited capabilities.
At first when I researched the Apple Watch, with a lot that I wanted to do the general answer would be that it can’t be done. Then I realised that the whole point of the Apple Watch is to get a glance of an app, it’s supposed to accompany an app, not replace it. Once I started realising this I looked at how the watch can really be used, not just for notifications but for enabling people to use the core feature of the apps that they use the most.
I’ll take you through a few key functions that will hopefully give you an insight on how we can push the Apple Watch to be something really special.
Simplicity
As you may have seen from a previous article of mine, throughout all of my designs I strive for simplicity. The idea that you can take a complex idea and make it so simple that anybody can use it. For a while now Apple have pushed the idea that content is key, the Apple Watch takes that even further by ensuring we use a very lightweight interface with limited functionality.
Think about how we might design a template, we create something that has a limited structure but flexible in that various components can be used. The reason we do this is so that nobody can take the template can create something that’s completely different and generally ugly. Apple have done exactly this but don’t think that it’s because they want all the apps to look like Apple, think about it as if they want to make sure that all the apps created for the Apple Watch are simple and easy to use, no over complicated screens or unwanted components, just stripped back to exactly what we need.
With an app that you may have, think about the key function of that app, what people want to use the most. How can that function be used specifically on the watch. How can you strip that function back to the barebones so that people want to use the Apple Watch app more than the iPhone app itself.
A good example would be music apps. The main feature here is playing the music as well as changing the track and volume. At the moment we simply use the mechanism on our headphones to change volume and track, but the one thing missing here is knowing what track is playing as well as the ability to quickly change album, not just the track. The first screen should be the main controls, we can then either swipe to reveal what album is playing and select from another, or use the contextual menu to select from our top 4 albums, I’ll explain some of these functions later.
Functionality
What we get in terms of transitions and ways of displaying new screens is very limited so here they are in a nutshell.
Modal
We’re all used to these in our every day apps, with the Apple Watch think of the modal view as a way of displaying a function over our main screen to either set settings or control something else. The transition is as we are used to and moves over the top of our current screen from bottom to top.
Carousel
Using pagination at the bottom of the screens we can simply swipe from screen to screen, however don’t get too carried away with cool parallax effects as each screen is pretty static in display and well parallax simple can’t be done.
Push
Just like the native iOS apps, when selecting to view a new screen, we can present it over the top from right to left.
Contextual Menu
This is quite an interesting new function available with the Apple Watch. The only way of accessing this is using a long press. The key to this menu is making it relevant to the screen you are currently on, hence the name contextual. Think of it as an options menu to change something within your current environment, whether it be selecting a mode or choosing a new playlist from your music library. You can use multiple instances of the contextual menu throughout the Watch app, just make sure that they are always relevant to the screen you access them from.
UI
The main thing when designing for the Apple Watch is that your layout is very limited. Think about each screen as a table view, one element per cell, nothing can overlap. Some may be used to this from designing an HTML email, it’s very similar on the Apple Watch in terms of the limitations to the layout.
Try to give your buttons as much area as possible, starting from the standard 44px, but as we aim to make the screens on the watch very simple, you may want to use even more room.
With the amount of elements on the screen, try and keep it minimal. What you want to try and avoid is scrolling the screen for different actions. Generally we should only scroll if we are reading content or selecting from a list of items such as track list. All actions should be within view to keep it simple and easy to use.
One thing Apple is really trying to push with UI is that backgrounds are always black and colour is only used within the elements on screen. This helps promote the idea of using minimal colour, highlighting only the key information on screen to help guide us through the app. One comment I’ve heard from somebody at Apple is doing this will help battery efficiency, in response I would say perhaps you had better improve the hardware to allow us to do what we want. How ever, Apple are able to ensure that apps on their hardware are to the standard they expect rather than allowing people to create anything they want, potentially ruining the vision they had. Think about this as a challenge, if all Apple Watch apps have a black background, how can you set yours apart using the elements on screen, so that somebody can identify exactly what app they are using.
One last interesting thing with layout is that Apple advise to have everything flush to the edge. The reason for this is that with the black of the watch and the advised black background, the two surfaces merge to create one screen, therefore the watch edge creating its own margin. Of course if you decide to use a background colour, use margins as usual.
Images
It’s advised that you use as little imagery as possible to increase battery efficiency, but if you are going to use them, they can be used in the following ways.
Background imagery
Background images for the whole screen are fixed and will not scroll with the content, so ensure you keep it simple with just a colour if possible, black being Apple’s preference.
Grouped content background
Another example of using a background image would be for a cell view for example. This might be when you want to overlay content on an image. When doing this think about your content as a group and the image will only display beings that particular group, remaining static.
Single image
As per usual, using images on their own is simple and easy to introduce, but again try to use them sparingly to increase battery efficiency.
Animation
We all love animation in an app, whether it be the way a new element comes on to screen or how something responds to us tapping it. The limit we have here is that the only form of motion we can display is by using GIFs. This means that we can only apply animations to existing elements on the screen. Use this to our advantage by having elements react to our interactions. Create GIFs for buttons for instance where we might add a bounce on tap, or use if for progression animation such as when filling something up.
Bare in mind that animations can only be played when an element is tapped so make it relevant to the action. If your components fills up as your animation and you do this with incremental steps from tapping, each tap will play its own animation. So if you have a full animation of 100 frames and 10 taps fills it up, each tap will play a segment of the animation. What you will then find is tapping 4 times quickly will move the animation straight to the 4th set without moving through the the first 3 so you get a slightly glitchy effect. Where possibly make sure there are a small amount of frames for each action so that there is time between taps to play a smoother animation.
Gestures
This is one of the biggest limitations of the Apple Watch. Apart from the ability to swipe through a carousel, we cannot use swipe gestures for any other type of action. What is available to us is scrolling, tapping and long press for viewing the contextual menu. Removing gestures actually enables us to think in a simpler way about how people might navigate our apps, especially being that it’s just a watch so everything we do here has to be small interactions, quick and easy.
Useful Resources
Apple Watch / WatchKit / UI Elements / Features / Cheat Sheet — A great article for developers by Daniel Tavares
Hopefully this article sheds some light on how you can design a completely feasible Apple Watch app. For those who still aren’t so sure I’ll be writing part 2 very soon to see what can be done from the brilliant Apple Watch designs already out there.
I’m currently working on some incredibly exciting Apple Watch projects with the very talented developer Dan Tavares, part of the indie team Cheeky Devils. Feel free to follow us on the following Twitter accounts and of course ask any questions you have!
Lastly I’d be very grateful if you could recommend this article by pressing recommend button below. Thanks for reading and by all means fire any questions my way!
UPDATE: I’ve written a second part to designing for the Apple Watch where I answer some big questions that were asked since writing this. Find it here https://medium.com/@benjones_design/design-for-the-apple-watch-the-sequel-6565b4c07e6a
Originally published at www.benjonesdesign.com on January 8, 2015.
