The Ultimate UI Challenge: Wearable Tech
Wearable technology might be one of 2014’s most buzzworthy trends, making headlines in nearly every consumer, business and technology media source. Maybe because our fascination with being adorned in electronic devices like a 60s spy film is finally coming to fruition. Maybe because our lives are so interwoven with technology, our needs require an armor of electronics. We live in two worlds: the physical world and the web-based world. Wearable technology is the conduit that melds those lives together.
This might be the era where we see the strongest innovation in wearable tech, but its roots date back before many of its consumers were even born. Even in the 1930s, fashion designers predicted that men would wear phones on their chest and carry gadgets on a belt (like a superhero). In the 1980s, Steve Mann designed a backpack to carry a 6502-based multimedia computer—its clunkiness might be why it didn’t catch on. But by the mid-1980s, every kid in America needed the calculator watch: one of the first widely accepted pieces of wearable tech.
The pioneering days are over; we’re smack dab in the golden ages of wearable tech. Watches, glasses and even fingernails and eyelashes are being equipped with tiny, high-powered computers for communication, photography, surveillance, navigation and beyond. Consumers are lapping up innovations for both their solutions provided and their sheer novelty. This not only changes the face of interaction and (dare I say?) general living, but it also changes the way we develop and design products and software.
Now that some wearable technologies have fully-fledged developer kits available, we can start thinking about what makes for a satisfying user experience for devices like smart watches and smart glasses. Creating a UI for these devices comes with a very different set of constraints than designing for desktop, tablet, or even for a smartphone.
One of the most basic problems is one that should be familiar to mobile designers—the difficulty of creating an intuitive navigational structure when you don’t have a lot of room to play. In the world of responsive design this issue has led to rethinking the design process with content strategy in mind. This trend promotes developing navigational structures that lets users access the most relevant content most easily. However, many mobile sites/apps still tend to favor a tree-like structure. Something along these lines:
The second tree in this diagram is far too convoluted for use on a mobile device, much less a more limited space like a smart watch. It could only be usable on a desktop or tablet where there’s space for breadcrumbs or something that allows the user to backtrack. The first diagram above shows a simplified tree that works well for mobile sites and apps. Though apps would usually present choices as a set of functions rather than as page links and often in a split nav structure like this:
But, this first tree would still require too much scrolling for the many users’ taste on something like the Pebble Smartwatch, which is controlled with a few side buttons. The app-specific functions can be set from an app’s preferences on another mobile device. This goes to say that the wearable versions of any app must be pared down to the fewest and most relevant possible functions.
An organizing principle that is familiar from mobile design that is common to many smart wearables is the window stack pattern. In this pattern the selected app’s launcher fills the device’s screen and the user flips through views or recent apps and then can return to the home screen on button click. The Pebble Smartwatch is organized along these lines, with active windows moving to the top of the stack, either temporarily (for a notification) or on user input (via side buttons on the watch). This diagram showing the layers of the Pebble interface should look fairly familiar:
There are a couple of things to think about when developing the UI for a smartwatch version of an app. First, text-based content has to be very brief and you can’t elegantly display content and navigation simultaneously. Either the window is only there for making a choice—like the last two windows displayed above—or it only displays content—like a watchface or a notification. Second, the actions that can be performed at any stage have to be limited to just a few and should remain consistent throughout the app to prevent confusion.
Probably the most discussed variant on the wearables trend is Google Glass. Like Pebble, the organizational principle of Google Glass is less akin to a tree than a deck of cards. For Glass, this deck of cards is organized into the “Timeline.”
Glassware (apps for Glass) inserts cards along this timeline to display notifications and users can pin a card to their timeline to the left of the home screen for quick access to an app. When a user initiates an app they will find it organized along this same horizontal principle. Contextual menu items for Glassware can be accessed by swiping to the left or by speaking a command. This way of organizing user experience combines content and navigation with a notification or piece of content in the center, and the actions that can be done to it on the right and left.
Many of the constraints for the creating a UI are the same with Google Glass as with other wearable technologies, but an interesting added element here is that look and feel is not nearly as primitive on Glass as it is with most of the smart watches out there. There is, in fact, a standard layout for a Glass card (see below) and Glassware developers have the option of creation an “immersion” UI for the device, i.e. an interface that departs from both the timeline and the styles/methods of input it establishes. The developer kit for glass cautions against using immersions, and correctly so, considering that a schizophrenic user experience is made much worse when it is occurring right in front of your eyeball.
Wearable technology provides an interesting opportunity for UI designers because they are able to study and build for end-users who ultimately interact with themselves. Wearable technologies, that anticipate different user interactions than previous platforms, present new challenges for UI designers. Meeting those challenges will require creative thinking about what makes and interface intuitive and will, very likely, influence the possibilities we are willing to entertain for all of the devices we design for.
For more check out the UI sections of the developer kits for Glass and Pebble:
