Designers of the first-generation of Apple Watch apps offer advice for design and testing — even if you haven't got an actual device on your wrist yet.
When a new device arrives, it’s tempting to make comparisons with what went before. “It’s easy to think of Apple Watch as a small iPhone. In the way iPhone apps can be simpler versions of desktop software, you might make your Apple Watch app a simpler version of your iPhone app,” says OfficeTime founder Stephen Dodd. “But this is where you can run into trouble.”
He speaks from experience — this was how his team started working on time-tracker OfficeTime (above). Commonly used features from the iPhone version were mocked-up for use on Apple Watch, which Stephen says made logical sense: “Take what you usually do and present a simplified version for your wrist.” But the team soon realised this wasn’t the right approach.
Similarly, developer Gary Riches, who’s already created apps for the Pebble smartwatch, recognised even drawing on experience with other wearables isn’t necessarily enough: “My Home Remote app’s already on Pebble, but the interface is manipulated using hardware buttons, not touch”.
For both developers, the key breakthrough was in figuring out some kind of facsimile for testing Apple Watch apps until the real thing appears.
“The biggest mistake I see people making when designing for Apple Watch is not viewing designs 1:1 on an actual screen,” says Iconfactory co-founder Gedeon Maheux. “But there are tools like xScope and Bezel that allow designers to get a good idea of how their layouts will look — and it’s critical they do. Until you see just how tiny you’ve made that meta text in your layouts, you won’t realise you’ve gone so small.”
So the advice right from the start is to use your wrist. Get an app to mirror UI designs to an iPhone worn on your forearm (above). Also print out designs on to Apple Watch-sized paper cut-outs (below), and play around with them, to get a feel for how everything will work.
“I did this with OfficeTime, going through the day, pretending to tap into meetings and perform tasks. I probably looked crazy, but I learned a lot,” says Stephen. “For example, I discovered it’s not comfortable to use a wrist interface for long periods, because of how you must position your arm to properly see and interact with the screen.”
Keep it simple
The main takeaway from these experiments is that Apple Watch apps need to be simple — simpler even than you might have imagined. “Once you stab your fingers at the beautiful buttons on your mock-up, you realise how much of the screen is obscured and how large a target you need,” says Stephen. “On discovering this, we started paring back, focusing on tasks you can accomplish in a few seconds and that are easier on Apple Watch than bringing your iPhone out of your pocket.”
Smashing Boxes director of design Raleigh Felton (below) arrived at similar conclusions when working on CRNT, an app created to enable users to rapidly check surf conditions: “Apps can’t be overly involved. Apple Watch enforces simplicity, and it has to be simple to be effective. With Apple Watch ‘glances’ — a quick view of an app’s most important content — the user must pick up the content in a few seconds or you’ve failed.”
Because of this, Raleigh approached design for Apple Watch almost as if drawing in sand, reasoning that if you can simplify and focus to communicate that way, the result will be something minimal and functional: “The user must ‘get it’ without having to work for it. Designs must have enough contrast with the background to be viable in every context and environment, including when the glass screen’s in sunny conditions. Remember it’s not about designing something really cool, but having design elements with appropriate size, contrast and typography so that the app is truly useful.”
Further techniques can help. Gary recommends designing primarily for the 38mm Apple Watch rather than the larger 42mm model: “The difference is small, but it’s harder to shrink down than scale up with a little extra space.”
He notes that Apple Watch’s screen size can be deceptive, too, because it doesn’t fill the full frame, meaning elements may be smaller than you imagined from just looking at the device or a cut-out. However, with Apple mandating black backgrounds, and the device having a black bezel, it’s also recommended you design right to the edge of the available screen space, unlike on other iOS devices, where you’d leave some white space.
Lucas Brauer, UX designer at Smashing Boxes, adds that the nature of Apple Watch means you can perhaps assume users will recognise everything is content, and design accordingly: “Eliminate visual affordances. You don’t need to style buttons, because the content is the interface — the whole screen is interactive and selectable. There’s no dead space, so use everything you can. Remove excess visual styling and navigation elements. Trust people will figure out content is the selectable area, and utilise transitions and animations as visual cues for using the app and getting around.”
Apple Watch design guidelines
If you’re purely designing rather than developing, it’s also essential to read Apple’s documentation and communicate with developers, to fully understand the limitations of the device. “It’s very easy to create a design that’s just not possible to implement on Apple Watch, and I see them all over the web,” warns Curtis Herbert, creator of Slopes (below). “Apple has placed strong limitations on layout, and you must consider them before spinning your wheels, designing for the platform.”
Apple’s restrictions for its new wearable are far more prescriptive than with its other devices. This is the case when it comes to both design and functionality.
“You must be mindful Apple Watch offers three distinct functions,” explains Aaron Humphreys, head of UX at Boiled Egg Timer creators Tappable. “There’s an independent app, typically an extension of an iPhone app. Then there’s a glance, which offers a quick snippet of information. Finally, there are notifications, for something that requires more immediate attention.”
Existing iOS designers will be familiar with the operating system’s set of design patterns as dictated in Apple’s Human Interface Guidelines. Aaron says “for every instance or action, there’s a requirement for a visual cue or a particular UI element that needs to be displayed in context”. WatchKit has its own design guidelines and set of behaviours, which Aaron thinks are “not too dissimilar to iOS except we’ve found you’re limited to displaying only certain types of views and UI elements together for independent apps”.
Glances and notifications also have their own constraints: “A standard non-custom low-resource notification that includes the app icon and the notification label, and a custom notification that gives UI Designers a little more freedom to create”.
Perhaps surprisingly, the general consensus is that Apple’s strictness with its new device is a good thing.
“Personally, I find the rules Apple’s laid down to be very helpful,” admits Gary. “As we do not have the device in our hands to test yet, having restrictions in place means one of the main variables — how your app will look on a device — has mostly been removed. Apple’s provided the framework, and this means Apple Watch apps will have a generally consistent feel, while still allowing enough room for individual applications to stand out.”
Curtis agrees, calling the layout system “very limiting” yet also “surprisingly freeing,” likening it to tables-based 1990s web design. “As bad as that might sound, there’s still enough freedom to make great-looking designs, and for a new platform on such a tiny screen, forcing designers to work with simpler layouts is a boon for the end users.”
How to subvert Apple’s design rules
Already, though, designers and developers are wondering how far they will be able to bend Apple’s rules. “Right now, no-one knows how far you can push the interactions. No precedents have been set for Apple Watch,” says Raleigh. “But once apps start to be released, we will test the limits of what can be done — and what just can’t.”
Aaron’s already been experimenting. “WatchKit is in its infancy, and expectedly so. We’re limited in what we can achieve, not just technically but hardware is a consideration also,” he says, explaining that WatchKit does not allow you to build custom/animated views on the device itself. But there is a workaround: “We found that to do this we have to procedurally generate the view on the iPhone and then push these custom views to Apple Watch as rasterised images. This method removes virtually any view layout constraints.”
Elsewhere, developer and graphic designer Jamie Maison reckons you can subvert Apple’s rules and recommendations in other ways. “One of the interesting things Apple states is you should ‘Resist the temptation to display your logo in your app or glance’.”
This seems sensible, given the space restrictions on the tiny screen, unlike on an iPhone or iPad, where there’s plenty of room for branding — Apple clearly doesn’t want developers wasting space on what it deems unimportant. “But I don’t want my apps stripped entirely of branding, since that helps distinguish them.”
Jamie’s got a workaround for the Apple Watch version of his Notation app: “I’ve included the logo on the central button and hide it when the user clicks to start detecting audio. Therefore, I’m not wasting space, but get to keep the branding!”
He mulls that such innovative thinking will go a long way when it comes to Apple Watch: “When the iPhone was released, it was designers and developers thinking outside the box that made the device interesting.” But he too advises toeing the line when it comes to efficiency: “As with anything iOS these days, less is more. Great design doesn’t have to be complicated, and it should always improve the user experience — not restrict it.”