Photo: ars technica

In 1904, pilot Alberto Santos Dumont asked Louis Cartier to come up with a timekeeping alternative that would allow him to keep both hands on the controls while timing his performances during flight. Cartier responded by creating a time piece for Dumont to be able to view by a twist of his hand…the wristwatch.

The wristwatch was designed to easily inform the wearer without increasing friction. With smartphone technology continually evolving, the focus is now expanding to wearables, such as Android Wear, Google Glass, Pebble, and other devices.

On September 9, Apple announced its version of their wearable device with Apple Watch and in early November, the WatchKit SDK was announced.

People are very excited about Watch and designing for it, but there is only one small problem at the moment…it is not going to ship until next year and we are not certain when yet.

Part of being a good designer is to anticipate design, not just responding to it. There is a great story about The Omni Group and how they designed for the iPad months before it shipped. We as designers will need to do the same for Watch.

This post will not dive into details as much as Apple’s Human Interface Guidelines will, but will give you an overview of strategic considerations and notes on designing for Apple Watch before it even ships.

Understanding The Experience

Apple describes Watch as Personal, Holistic, and Lightweight.

Personal means it is worn, not used. Notice that Apple refers to the human as “the wearer” as opposed to “the user”. You wear it, and it happens to have an interface. Holistic means it is a convergence of physical and digital. It is a physical timepiece that becomes a digital output in a specific context. It is lightweight meaning you interact with it with a simple glance and slight tap. It is not necessarily immersive.

The first question one should ask is, “Why a Watch app in the first place?” That is what I am trying to solve in my research for future projects with Watch. Often we as designers try too hard to find the most clever solution when our users need the most obvious and practical solution.

To fully understand the experience of Apple Watch, I needed to know what it would feel like to wear one and when I would like to use one. The solution (for me) was 3D printing one to try on.

I printed a 38mm model (the smaller of the two screen sizes) and wear it daily — only taking it off when I take a shower or go to bed. In fact, I am wearing it as I write this post.

(Thank you to Metrix Create Space for printing the watch for me and helping me with the 3D printing.)

I keep a tally of when I glance at my wrist and what I would like to know without taking my phone out. This informs my initial design research by creating use cases of when I would want an app in the first place. Before I started working on interfaces, I collected a spreadsheet of my findings that shows how many times I glanced at my wrist and what I wanted to know.

A watch by nature is a passive user experience. The design of the interface for Apple Watch is intentionally limited for now. Similar to the early iOS app days, the SDK is limited, but expect a more robust SDK to come out next year.

WatchKit

In order to properly design for Apple Watch, you need to understand what is possible in WatchKit. First and foremost, Watch apps are not a replacement for your iOS app. In fact, you need an iOS app in order to run a Watch app since WatchKit is an extension from iOS. A Watch app will complement and extend the experience of the iOS app.

What your Watch app has access to will be dependent on what can be pushed from the iOS app.

Three Methods of Interacting

Home Screen Launch
The most obvious way to launch your app is by tapping on the icon from your springboard.

Glances
Apple also offers Glances, which is allow the wearer to swipe up from the bottom of the device to see a summary of apps the wearer selects. Glances are not scrollable and not interactive. It will fetch the data you want displayed from the iOS app and tapping on the Glance will launch the app.

Notifications
Watch has notifications that people are familiar with. However, there are two types: Short-Look Interface and Long-Look Interface.

Short-Look Interface is designed for a more private experience. It only shows the alert message along with your app’s icon. If the wearer has his or her arm up to look at the notification, it will transition into a Long-Look Interface, which has a more detailed summary. These views are scrollable and can be interacted with by providing action buttons and the required dismiss button.

Designing the Experience

The challenge is not designing the interface of the Watch app itself, but when your Watch app should initialize in the first place.

Use Cases
The experience informs the interface. This is why it is important to commit some time in putting ideas and thoughts together. As mentioned above, I like to use a spreadsheet to really define the product I am working on.

Storyboarding
My advice to designers is that you would start working on designs with pen and paper first. Sketch out what your app would look like on Launch, Glance, and Notifications then connect all the views together.

When you’re ready to put together a cleaner version of your storyboard, I recommend using doing it in OmniGraffle or storyboards in Xcode. Keep in mind that you must use storyboards in Xcode 6.2 for your Watch app.

Interface Design
Apple has provided a comprehensive list of design resources for you to get started. For now, the guidelines are pretty strict and you will save a lot of trouble by really understanding this design direction and abiding by it.

There are two types of navigations in Watch: Hierarchical and Page-based. Hierarchical is when the elements are stacked as a list and paged-based.

Groups are a collection of UI elements. You can also nest groups. Though you can place groups side-by-side, Apple’s Human Interface Guidelines (HIG) advises you to only do it when necessary.

Screen Sizes. There are two Watch sizes at the moment: The larger 42mm (312x390 pixels @2x) and the 38mm (272x340 pixels @2x). RIP @1x. Size your images for the size of Watch — both sizes.

Design Prototyping

After putting together some interface designs I put together some design prototypes and animations using Quartz Composer (Origami) and Adobe After Effects. The current SDK has limited animations so it is important to make sure you design animations that are in the current scope of possibility.

Do Not Over-Design.

The mistake I have seen a lot of designers make so far when designing for Watch is that it is excessively over-designed. What I mean by this is that it is almost as if they are trying to design for a square iOS app. The experience of Watch is informed by iOS, but not necessarily the same behaviors as iOS.

If your design takes more than two or three seconds to look at, then you are probably over-designing. Design for glances and for when people are on the move or occupied with something else.

I need to remind you that at some point people thought this is what Apple Watch could look like.

Don’t think of it as designing for a screen. Apple describes the Watch experience as a way to “blur the boundaries between physical object and software”.

Basic Interactions

Action-based events is a single tap in the app. Example: tapping on a button.

Force Touch. This is unfortunately not a Jedi move, but Force Touch enables the wearer to activate the Context Menu, which provides additional options.

The Digital Crown is the physical part of Watch that will allow you to make precise adjustments. In addition to making value adjustments (such as adjusting a number) it can also be used for long scrolling.

Swiping for navigating through pagination, Glances, and edge swiping are interactions in Apple Watch.

Additional Design Notes

Animations
Animations on Watch are pre-rendered images that are a sequence of images. Can you say, animated GIFs?

Navigation
Navigation for Watch is Hierarchical with a stacked UI or Page-Based.

Use the entire edge of the screen and use black space
It is important to use the entire edge of the screen and also be aware to use black space to create a seamless experience from the screen to bezel.

Continual Iteration

There is no doubt in my mind that Apple will make changes and allow new features, and this post will become obsolete. However, it is our job as designers to continual explore in anticipation, not react.

Original post. Learn about where I work, Black Pixel.