UX Design Patterns for Wearables

From the 3-D buttons and drop shadows of the early web to current flat-design methodologies, user interfaces in recent years have gone through a rapid succession of transformations. Recently, web designs for the desktop browser have mostly shifted to mobile UX paradigms. Current design attitudes favor a mobile-first approach, one that accommodates modular and responsive behavior and interactions to facilitate mobile device usage. These design concerns must soon shift again with the relatively recent arrival of wearables, a new category of device that is poised to take the market by storm. According to recent statistics, the global wearables market was worth more than $2.5 billion in revenue in 2012 and will surpass $8 billion in 2018.

With the recent arrival of the Apple Watch, competitors will be scrambling to stake their claims on the wearables market, while likely looking to Apple for cues as the market leader. For this reason, designers should start familiarizing themselves with the UX design patterns for wearables that Apple and other players like Samsung are currently establishing.

 

Less is More

The most prominent difference between wearables and mobile phones is clearly the former’s lack of screen real estate. Because of this, messaging and display elements must be efficient and clear to understand. Device orientation is also a concern — for example, watches are strapped to the wrist and designed to be glanced at in short intervals. Interactions must be therefore be succinct and easy to dismiss. Designers should familiarize themselves with building and designing with micro in mind.

Making the most out of wearable screen real estate requires creative rethinking of app design. Apple Watch incorporates Glances, a feature that allows for viewing critical app information or announcements without opening the respective app. UX design patterns will need to incorporate creative modularity and condensation to accommodate wearable devices.

 

 

Single or No Controls or Physical Buttons

Wearables will likely have few or no external physical controls. Designers should build interfaces that can be easily navigated without buttons or switches. Apple Watch’s Digital Crown, for example, enables scrolling content without obstructing screen viewing space. Furthermore, swipes and taps must be rethought or redesigned for the micro screen.

 

New Takes on Touch

Again, the less-is-more mantra is in play when it comes to touch gestures in wearables. Applying this to all dimensions of sensory input can yield some highly creative and effective results. For example, the Apple Watch can sense both touch and force or pressure applied. With touch sensitivity, designers can take advantage of this new micro-screen optimized method of capturing user intent.

 

Designing UX for Small Screens

Limited screen real estate means designers must convey information succinctly yet elegantly, focusing on the most important items relevant to that point in time. Longer pieces of text should be summarized and/or headlines, keeping in mind that wearable screens can come in a wide assortment of shapes– round, rectangular, and so forth. Common resolutions for wearables include 128×128px, 144×168px, 220×176px, 272×340px, 312×390px, 320×290px, and 320×320px. Keep in mind also that if designing UX for a particular brand, future devices may arrive in various screen resolutions. It’s therefore advisable to focus on aspect ratio rather than resolution for posterity.

A effective approach to optimizing the UX of wearable designs is focusing on the number of interactions the user has with the interface. For example, a common desktop web design methodology is to count the clicks required to arrive at a destination. Wearables are interacted with on the go, and command very little attention span from the user. For this reason, UX in wearables can refined by streamlining the steps it takes to accomplish a task (e.g., dismiss an alert, adjust a setting, etc.).

In short, new UX design patterns for wearables will require designers to adopt innovative approaches to capturing gestures and presenting content in a diminutive view port. Fortunately, the Apple Watch is a safe bet for emerging standards — its human interface guidelines for developing apps for the Apple Watch offer some direction in building the next generation of wearables. It’s highly likely that competing products and vendors will follow Apple’s lead. In fact, the Apple Watch is expected to control nearly half of the entire smartwatch market by 2017. Clearly, one cannot design a functional screen much smaller than that of the Apple Watch. Designers should thus acquaint themselves with Apple Watch’s chief principle of doing more with less.

 

Wearable UI wireframe stencils 


applewatch_ui_stencil

We have added a full Apple Watch wearable UI stencil set to the HotGloo widget library. You can preview and download any UI stencil and widget from the widget library to your project:

1. Open the Widget Library by clicking the Widget Library icon in the sidebar.
2. Click the import button on the widget you want to import.
3. The imported element will be automatically added to the master list of your project.
4. Click on edit and copy and paste the component to any page or use it like a master element.

 

Enjoy!

 


Wolf Becvar

Wolf Becvar is COO at HotGloo, UX advocate and occasional speaker. When he is not on the web you’ll probably find him on the bike or sipping coffee whilst listening to heavy music.
You can find Wolf on Twitter and Google Plus.