Designing better Apple Watch apps

UX principles to make wearable apps more intuitive.

Since Apple’s first watch launch 4 years ago, everyone felt that the incredible hardware was lacking features because of software hurdles. Over these years, the hardware capabilities of the watch have improved so much and with the new launch, Apple released Watch OS 6 for the developer community with revolutionary improvements. Few of them are:

• The apps need not have an iPhone component anymore. This makes it easier for the dev community to create standalone watch applications. These are called as Watch-Only Apps.
• Applications can now take advantage of new APIs to connect your JavaScript apps to watch seamlessly.

There is a large need for developers to understand how Watch apps must be designed in a way that is more enjoyable and intuitive.

In this tutorial, you'll be learning about the best design principles to consider when designing a wearable app for a watch. I will also be looking into designing a sample application on adobe XD. For the tutorial purpose, we are just going to look at a few screens of the app instead of all the screens in the flow. Let us try to create an apple watch app for uber eats in this example.

Here are some of the themes we can look at when considering the design principles.

Layout Guidelines

1. Minimal content — One must avoid displaying a lot of content on the screen at once. The wearable users want to access the most useful information. Since there is not a lot of real estate on the watch screen, you don't want to clutter the interface with details that are secondary or not needed. This kind of information can always be presented by scrolling or an additional click. Now, for the uber eats app let’s create a page where we have the favorite restaurants stored in the form of cards & since this is a page with a lot of content we should try to show just 2 cards at once to improve the visibility as shown in the figure 1A.
2. Maintain Visual Hierarchy — Always design in such a way that a visual hierarchy is maintained. This helps the users to find the information they are looking for easily. For instance, you can make use of negative space or separator lines to make sure that the elements related to the same group are presented intuitively. This helps in glancability and readability of your app. To maintain a visual hierarchy in the contact page of the restaurants, spacing is maintained between the two icons on the page and also negative space is used as shown in figure 1B.

Space is Valuable — As previously discussed, there is not a lot of space that is available on the wearables. So, make use of all the width on the screen and design your app in a way such that the content goes from one edge to the other. Do not worry about the padding because the wearables provide natural padding around the content of the app. One must also make sure to reduce the spacing between internal elements. This is the Order Again page 1C, on the app where there are cards representing the items that are ordered previously. As you can see, the cards are designed in a way that they are spanned across the interface of the watch so no space is wasted.

Contextual Menus — Menus must be used to replace the buttons whenever possible. Menus are more effective in providing a dedicated place to the actions. Make sure you do not have more than 4 actions in a menu. This will also free a lot of space in the interface by getting rid of the buttons. 1D shows the example of a menu where you have the 4 most important items accessed by the user.

Alignment — Always Left align your elements on the wearable interface. According to usability principles, Left-aligned text is way easier for reading. Also, when there are lots of vertical stacks of buttons with text labels, left aligning makes it easier for scanning the information quickly. Notifications, 1E page is an example where the left alignment of the content is clearly shown where it is easy to read.

Navigation Guidelines

Just like any other interface, wearable apps have more than one screen. There are 2 different styles of navigation patterns one can follow when designing an app. These are called page-based and hierarchical and often times one can use a mix of both depending on the need. An example of both these navigational patterns is shown in 2A and 2B.

The Hierarchical navigation is well suited for interfaces or a section of the app where you need to present a list of options that can be scrolled and clicked. One such example is Settings which is present in almost any application. When the user clicks on any item in the list, a new screen is presented which contains more details about the particular item. Also, this kind of navigation makes it easier to navigate swiftly using the swipe interaction or the digital crown.

In contrary to the above way of representing the information, Page-based navigation can be used when there is a smaller list of pages that needs to be presented to the user. This makes it simple for the user to swipe through these pages and view the content. The dots at the bottom of the page dots indicate it’s placed in the set of pages.

One important thing to remember when designing a wearable app is that the app should always complement the iPhone/Android app but not mimic it. Because phone apps usually tend to include a number of pages but wearables apps must be designed for quick and convenient interactions.

Interaction Guidelines

Digital Crown

This is one of the most essential pieces of wearable interfaces and it allows the users to scroll content without any distraction to their content. Whenever the app is being designed make sure you provide visual feedback to the user when the user interacts with the digital crown. For example, showing the location of the scroll when the crown is rotated to scroll as shown in the figure below 3A.

Haptics

A haptics engine in a wearable device uses force upon the skin to create real-time tactile feedback. This is very essential in creating an intuitive experience for the user whenever something significant happens in the app. One can customize the available haptics for an apple watch to make the app experience more meaningful. Always use each haptic only for its intended purpose. For example, Notifications, Confirmation and error scenarios can each be linked to a specific haptic. The TAPTIC engine of the apple watch which is responsible for the haptics on the watch is shown in the figure above.

Gestures

Gestures are an important piece of wearable technologies but are limited to very few choices. Generally, there are few systems generated gestures in the wearables which should not be usually changed. This will create confusion for the users. The most common gestures are taps, vertical and horizontal swipes and left edge swipes. However, when you create a custom gesture such as double tap — make sure that they are recognizable.

Interface Elements Guidelines

Alerts and Action sheets

These interface elements are generally used to communicate when an error has occurred or to gather some feedback from the user. Always make sure to use the alerts sparingly and use the action sheets to give the user a list of options to respond to an event. For example, in our uber eats app for messaging functionality, the action sheets can have the option of responding or dismissing the notification as shown in figure 4A.

Images

Images in the wearables can be either static or a series of images that are animated with time. Make sure the format of the image which is being used or exported to the design is a PNG element.

Also, since there is always a loading time associated with the images, use a placeholder image in the place of the actual image to give the user a visual cue. An example of the images as icons is shown in image 4B where they are 4 items each associated with a colorful logo.

Videos

Media are essential to any kind of interface and they can just be audio files or video files. Make sure that the audio/video clips are not more than 30 seconds as they consume more disk space. Always, include a poster image that is associated with the video so that the user can make informed decisions.

Pickers

These are the interface elements that display a list of items that are scrolled or navigated via the digital crown. This is one way of providing the user to make selections. List Pickers should be used whenever the selection needs to be text/image. A simple example of this is the date picker. Sequence pickers are generally used to replicate an image to create a custom interface like Rating etc., Image 4D represents how to give a rating to one of the orders you received using a customer rating picker.

Useful Resources

These are some of the useful resources and case studies that the designers and developers of wearable apps can make use of to get a better understanding of making their app more intuitive and useful to the end-user.

Apple Watch Affordance Decomposition Study

https://humanfactors.com/downloads/whitepapers/apple_watch_case_study.pdf

In this case study by Human Factors International, they perform a technique called affordance decomposition that helps predict how the wearable product or service fits into people’s lives, in addition to identifying opportunities for innovation and obstacles to its widespread success.

Design Principles for Wearables

https://fuzzymath.com/wp-content/uploads/2015/08/Fuzzy-Math-UX-Design-Principles-for-Wearables.pdf

In this case study, the main focus was on designing the best three groups of wearables: activity, awareness and sleep patterns. Also, there are targetted recommendations and included insights into designing the physical hardware, creating desirable functionality, and ensuring the entire device is pleasantly easy to use.

For any work-related queries check www.vamsibatchu.com or email me @vamsibatchuk@gmail.com