Trends

Getting Started with Designing Apps for the Apple Watch

As the Apple Watch is a new venture for iOS designers, this article guides you through the design specifications to help get you started on your first app.

Mobile apps have found their way onto smartphones all around the world, and these apps will soon be featured on the wrists of tech-savvy early adopters. The new Apple Watch is a touchscreen device sporting a familiar iOS interface.

App design for the Apple Watch is a daring new venture for iOS designers & developers. With such a small screen there’s much less room for user interaction. There are some guides explaining the basics of Apple’s latest smart device and how watch apps can be used with just a flick of the wrist.

apple watch preview

This guide covers an overview of the Apple Watch design specifications for app UI design. Most information can be found in the Human Interface Guidelines which are sure to grow more comprehensive as the Apple Watch moves further in development.

Apple Watch UI Fundamentals

When digging into the Apple Watch you’ll find that applications are merely slimmed-down versions of traditional iPhone/iPad apps. In fact, Apple Watch apps must be built off an original iOS app to function properly.

The framework for managing this connection is named WatchKit. The WatchKit library contains everything that a developer would need to create 3rd party apps which run flawlessly on the Apple Watch. But what’s interesting is that the applications run on a WatchKit extension which is managed on an iPhone.

watchkit logo apple watch ios

So Apple Watch applications are only responsible for displaying information and recording interactions. All of these interactions are passed along to the paired iOS device where the WatchKit extension records this information.

Watch App Architecture

There are three different view states for Apple Watch applications. The most common view is an application view which runs whenever a new app is opened from the home screen.

flat_apple_application

The application view contains all the typical interactive elements you’d expect like buttons and links. Generally speaking, these are the “main” app views which are fully interactive.

Glances are another type of view which present relevant information about a specific application. Glances for different apps are coupled together and browseable by swiping left/right like an image carousel.

These glance screens aren’t meant to scroll vertically and are not required for every application. They serve as quick informational snippets on a particular subject. The idea is that glance screens may be easier to check rather than re-opening an application multiple times.

Notifications on the Apple Watch are just like iOS notifications. These screens appear when an app has a real-time notification update that may or may not request user interaction.

Apple Watch noticfication example

One other topic worth mentioning is the navigation architecture. There are two primary styles of watch app navigation: hierarchical and page-based.

The hierarchical navigation style moves from page to page via links. This is how most websites work and also how many iOS applications behave. Content is organized individually and must be accessed sequentially by links or buttons.

Page-based navigation sounds like the same thing but it’s rather distinct from hierarchical navigation. Page-based content is accessible by swiping left or right on the touchscreen. This content may be considered more closely related but it’s neither better nor worse.

This content may be considered more closely related but it’s neither better nor worse

Both styles of navigation will prove useful in the diverse field of Apple Watch app design.

Methods of Interaction

Just like the other touch-based iOS devices, Apple Watch does support all the traditional finger taps and swipes we know and love. But new to WatchKit is something named Force Touch.

When a user taps+holds with more force than usual it opens a context menu with further options. These context menus could apply to the operating system or to a 3rd party application. This effect is comparable to right-clicking on Windows or control+clicking on Mac.

contextual_menu_example

Another new interactive element is the digital crown which is a small mechanical wheel located on the side of the watch. Use this to scroll through lengthy pages without touching the screen. It provides a quicker and easier method for scrolling than finger-based interactions.

apple_watch_crown

The watch itself includes a secondary button opposite the digital crown. Both of these are mechanical tools for interaction and may evolve further as the Apple Watch matures.

Apple Watch App Design Techniques

It’s difficult to pinpoint the exact requirements of every Apple Watch app UI, but there are some things that every app should include. Most notably it’s a good idea to stick with native UI elements programmable from WatchKit.

These elements behave just like traditional iOS elements but are squeezed down onto the smaller watch screen. The most common interactive elements are buttons, switches, sliders, and menus. Other programmable features are used for static areas like images or tables.

apple watch ui kit sample

Aside from common design elements there are some user experience topics to consider. Apple Watch apps need to work as secondary programs meant to connect with another device. Use just enough information so as to be useful without overwhelming the user.

Here are some other watch app design concepts to keep in mind:

  • Limit the number of horizontal side-by-side elements.
  • Primarily stick to left-aligned elements over right-aligned elements.
  • Build interfaces that fill the whole screen.
  • Make tappable elements easy to notice and use.
  • App context menus should feature secondary actions.
  • Apple Watch app interfaces should look & behave the same on all screen sizes.

UX design is always expanding but there are some neat ideas about the future of Apple Watch interfaces. The smaller displays have less room for detail so flat design techniques could be perfect for most app interfaces.

flat_apple_watch

Another thing to consider is visibility. Since watch screens are small the text needs to be legible and crisp. High-contrast colors and easy-to-read font choices are a must for watch apps.

The Apple Watch specifications are becoming more structured and rigid with time. While standards like icon sizes have been created we should expect further graphic specifications to be released in the future. But at the moment there’s still plenty of info and resources to start designing your own mockups for Apple Watch applications.

Although iOS apps do not all need to be released on the Apple Watch, these companion apps can serve a valuable purpose when built with the user in mind. Developing for such a small screen will prove to be an interesting challenge.

But with Apple’s design guidelines and plenty of free resources you can start practicing Watch app design and hit the ground running with this compelling new technology.

Feature image: hand using smartwatch on desk top view, Photodune


About the Author Jake Rocheleau

Jake is a passionate writer & digital designer frequently researching the latest trends in UI/UX design and user behaviors. You can find work samples on his portfolio and follow his tweets @jakerocheleau.