The UX of Apple Watch: The WatchKit You Can’t Watch Yet.

Steven Brykman | December 19, 2014 | Mobile Strategy

About a month ago, Apple launched WatchKit, with the advice that developers “get your iPhone App ready for Apple Watch…deliver innovative new experiences to your customers on their wrist. Learn how your existing app notifications can easily show up on Apple Watch…take your apps even further by extending and enhancing their functionality on Apple Watch.”

The problem is, we’re being asked to build for something that doesn’t exist. That’s never existed. This is like decorating a house without stepping foot inside. Sure, we can all start coding in theory’ and review the results in the simulator, but until we’re actually able to interact with the device, the point is pretty much moot. But at least we’re not alone. A friend who works as a UX designer at Apple says they haven’t given them Apple Watches to play with, either!

“Your app on Apple Watch contains a full user interface. Users can launch, control, and interact with your app in ways unique to Apple Watch.”

Right. And that’s the problem. It’s unique!

tables_2-150x150Disclaimers don’t help much (this one appears below a video on the main WatchKit Developer page): “Please note that this presentation is based on previous beta software and may include information that has since been updated.”

However, Apple does provide us with a generous helping of crazy BS to get us on our way: “Apple Watch…is attuned to the wearer’s presence. A raise of the wrist shows the time and new alerts. Digital Touch—particularly with its Heartbeat and Sketch features—enables new types of communication that are incredibly personal. An accelerometer and heart rate sensor provide personalized information about the wearer’s activity from day to day. No other Apple device has ever been so connected to the wearer. It’s important to be mindful of this connection as you design apps for Apple Watch.”

By “new types of communication,” I’m assuming they’re talking about that thing where you can send your heartbeat to another person. I’m not sure how much ecstasy one has to consume before you start thinking that swapping heartbeats is the future of digital communication, but I’m guessing it’s a whole lot.

The BS continues: “Apple Watch was designed to blur the boundaries between physical object and software…And Force Touch—a physical gesture interpreted by hardware—reveals a new dimension of contextual software controls…Thoughtful app design should contribute to this experience of hardware and software feeling indistinguishable.”

Settle down, Apple. Just because you strap something on your wrist doesn’t make it any more personal than something you hold in your hand. Ask any guy. And frankly, “Force Touch” sounds like something invented by Bill Cosby. As we’ll soon see, all it does is bring up a menu. Not quite a “new dimension.”

table_cells-150x150Anyway, here’s what we do know. We know there’ll be an extremely tight interaction between a user’s watch and his iPhone: “WatchKit apps have two parts: A WatchKit extension that runs on iPhone and a set of user interface resources that are installed on Apple Watch. When your app is launched on Apple Watch, the WatchKit extension on iPhone runs in the background to update the user interface and respond to user interactions. WatchKit provides three opportunities to extend your iPhone app to Apple Watch: WatchKit apps, Glances, and actionable notifications.”

“A WatchKit app complements your iOS app; it does not replace it.”

Okay, so we’re not creating standalone apps for Apple Watch (at least not yet). For now, think of the Apple Watch app as an extension of your company’s iPhone app. “A WatchKit app complements your iOS app; it does not replace it.”

More trippy design advice follows: “Apps designed for Apple Watch should respect the context in which the wearer experiences them: briefly, frequently, and on a small display…If you measure interactions with your iOS app in minutes, you can expect interactions with your WatchKit app to be measured in seconds. So interactions need to be brief and interfaces need to be simple.”

Let’s take an abbreviated look at some of the UI/UX functionality Apple Watch will offer, taken from Apple’s Apple Watch Human Interface Guidelines. But first, another disclaimer from Apple, letting us know that everything we’re about to read may change at any moment: “This is a preliminary document for an API or technology in development…This information is subject to change, and software implemented according to this document should be tested with final operating system software and final documentation.” Fine. We get it.

Here are some interaction notes…
Note: Apple Watch does not support multi-touch gestures such as pinch and zoom. Which is odd since I’ve been doing it on my little iPod Nano watch (yes, I’m nerdy enough to wear one) and it works just fine.

“The single-tap gesture will be the primary interaction method. Taps indicate selection or interaction.” Additional gestures are just what you’d expect. When available, vertical swipes scroll content up and down while horizontal swipes display the previous or next page. Left edge swipes navigate back to the parent interface controller.

Followed by some general design suggestions…
1. Use a single font throughout the app.
2. Keep colors high contrast for readability.

watch_hero_2x.png-172x300Lastly, some general layout rules…
In terms of layout, Apple suggests using icon-buttons instead of text, particularly when placed side-by-side. Naturally, full-width buttons are strongly encouraged. At one point Apple advises never using more than 3 buttons in a single row, but in another instance they ask for a maximum of 2 buttons “in the same horizontal space.” Ah well. At least we don’t worry about having to design for both watch sizes: “relative positioning” lets content expand or contract to fill the space.

While Apple is striving to manufacture a consistent experience, in terms of brand look and feel they recommend designers “quietly remind” users of the brand through font, color, and imagery. “Resist the temptation to display your logo in your app or Glance.” Rather, restrict logo use to the App icon. Which brings us to the Home Screen.

The Home Screen

The Home Screen icon is a 172/196 pixels round PNG (the two sizes reflect the two watch sizes (38/42mm). Use “universal imagery” and keep the icon simple and consistent with your iOS icon. Overall, Apple has chosen to go the route of extremely tight graphic control over the watch UI. Here, however, they suggest we try to “interpret reality in an artistic way.” Apple does not specify whether this is improved by the consumption of controlled substances.

The Two Kinds of Screens

hierarchical_interface_2x1-254x300Guess what? There’s only two kinds of Interface styles!

1. Hierarchical:
Content stacked in table cells. Apple recommends this view for “more complex app interactions.” But keep in mind, in this context, “more complex” just means they’re tappable.

2. Page-based (screen-based):
A page-based interface is best suited where data is not directly tied to data on other pages. Keep the total number of pages as small as possible to simplify navigation. Users can swipe right or left for previous/next page.

paged_interface_2x-e1419022091561-300x121This is a little strange: You cannot combine Hierarchical and Page-based interface screens in your app! Whichever style you choose becomes the style that must be used throughout the app. This is certainly a departure from what we’re used to on iPhone, where generally, the trend is to start at a table-cell menu and drill down to screen-based content.

Glances

Glances-150x150And then there’s Glances. I’m not sure I get whether Glances are an example of a Page-based interface or not, but since there’s just the two types of screens, I’m guessing they are. Glances provide a quick view of your app’s most important content. Glances don’t scroll and tapping the screen serves only one function—to either open the app or deep-link into the app via Handoff. Glances are optional and users select which Glances to display. Ideally, the Glance view incorporates user-context: “Use time and location to reflect what is relevant to the user right now.”

Notifications

Actionable Notifications come in two forms: the Short Look and the Long Look. Think of the Short Look as a notification of your notification. It provides “a discreet, minimal amount of information—preserving a degree of privacy.” I’m surprised at Apple’s concern for privacy here. When has anybody ever successfully looked at another person’s watch?? Lower your wrist and the Short Look goes away. Keep it raised (or tap the Shortie) and the Long Look appears, providing more detailed info and functionality.

notification_airline-528x321
When it comes to design, there’s not much customization here. The Short Look is template based, containing the App name, icon, and Notification title. Even the font color of the App name is pulled from the app’s key color.

The Long Look provides more detail as well as more opportunity for customization (graphics and branding). Additionally, Long Looks can display up to four custom action buttons, based upon the notification’s category, plus a mandatory Dismiss button.

UI Objects

The Watch’s UI Objects (buttons, switches, sliders, labels, etc) should already be familiar to us since they’re the same as those in iOS apps. With a couple exceptions.

separator-150x150“Separator Object”
You and I know it as a rule. Or simply, a line. The “separator object provides a visual break between UI elements.” Because yup. That’s what lines do.

map_image_2x.png-300x205Maps
The map object is a non-interactive static image, except that you can tap them to go to the Maps app (on the iPhone, presumably?). Up to 5 custom (or standard red) pins may be added to a map. Here’s Apple’s example of a custom pin (apparently, they think we might be inclined to use a bee).

switches_2x.png-150x150Switches
Yes/No. On/off. Just like on the iPhone.

sliders_2x.png-300x230Sliders
Despite the name, sliders are not slid. Rather, the user taps the icon at either end to raise or lower the value. “Use custom images to make it obvious what the slider does.” Yet somehow Apple thinks using emoticons conveys obvious meaning: Hmm. Better make that 20% happier.

watch_context_menu_2x.png-150x150Context Menu
Remember “Force Touch?” Well, here’s the menu it brings up. “Force touch” enables the watch to tell how hard the user is pressing it (hence the “new dimension” hyperbole). When a certain amount of force is detected, the system displays the “context menu,” used to display less-frequently used actions relevant to the current content. It’s an optional menu containing 1-4 items consisting of an icon and a label. Actions apply to the underlying screen, and each screen can have its own unique menu.

Then there’s that bumpy thing on the side, aka the Digital Crown. “Designed for finely tuned, accelerated scrolling—without obstructing the Apple Watch display—the Digital Crown makes it easy for the user to scroll through longer pages.” Firstly, I thought it was corny of them to call it the “Digital Crown” until I learned that’s what that thing is traditionally called. Also, worth noting that 3rd-party apps can use the Digital Crown only to enable scrolling.

Modal Sheets
As with iPhone, these are screens that pops up over existing content to get the user’s attention or force the user to complete a task.

And that’s it (pretty much)! Not so bad. Seems pretty restrictive actually. It’ll be interesting to see how folks utilize what is essentially a 2nd screen for other than maps and notifications. What “innovative new experiences” did you have in mind? Please leave your ideas below. I’d love to hear them!

Steven Brykman

Steven is a Digital Strategist and UX Architect focusing on Mobile Products with a diverse background in writing and literature. He spent much of the last decade as Creative Technologist/Lead Strategist of his own design company, helping Fortune 500 companies define the direction of their digital campaigns, websites and mobile applications. Additionally, he co-founded Apperian, a Boston-based mobile technology startup.

More Posts

Follow Me:
TwitterLinkedIn