Android Wear UI Overview

Wearables are for geeks, it's a Fashionable Interface!

Marcelo Paiva
6 min readMar 19, 2014

Android Wear is fashion.

With the announcement of the Android Wear SDK, I immediately decided to review the UI guidelines — and something hit me…

If we’re designing interfaces for wrist watches we shouldn’t be calling it wearable interfaces, this is a whole new dimension for interface designers, it’s fashion!

Moto360 is beautifully designed and is a testament that it’s not all about interface design, but fashion as well.

Whatever we call it a year from now, the Android Wear SDK is here and designers should be sensitive to what makes people wear a wrist watch.

Is it the color? The size? The shape? The thickness? Is it for men or women? The diamond stone on the dial? Will the user wear it during the day or night?

With global fashion partners like the Fossil Group, Inc. ($FOSL) and Motorola’s beautiful Moto 360 watch supporting Google on extending the Android platform, we should expect fashion becoming a factor in the interface design objective.

Android Wear Overview

As you start viewing all media about Android Wear, you’ll notice the rectangular and rounded form factors. It makes so much sense to work with circle interfaces for watches. Pocket and wrist watches have been around for centuries and for many families watches were passed on from generation to generation. Motorola’s Moto360 caught that spirit and wanted to keep the true value proposition of wrist watches.

Motorola went back in time to design Moto 360.

Android Ware: Information that moves you

Android Wear: Information that moves with you.

Android Wear is smart.

The new order is to design around the two main functions the user would be interacting with watch:

1. Suggest — The Context Stream

Simple Navigation: Vertical Swipe to browse cards of content categories; Horizontal Swipe to dive into the cards.

Anticipating what a user may need or want from the application will be crucial for a good interface design. Think of how you would extend Google Now with your content application.

By combining device sensors and APIs, we can anticipate what the user may need in the following minutes, then create a flow of actionable events. These events are called “Context Stream.”

Navigating the Content Stream — The way of navigating the interface is fairly simple, as it should be. Users swipe vertically to navigate through the list of contextual cards available given a particular time and geography, anticipating what the user may want or need. Here’s an example:

For the proud owners of the Nest Thermostat, as they approach home in a hot Summer afternoon, a Nest card would smartly be displayed, offering the user change from “away” to “cool” mode 10 minutes before they arrive home.

In this simple example, you will notice how the use of different APIs can assist us designing predictable applications that can improve the lives of our users: Time tells the user usually heads home at that particular time, Geography (GPS) confirms the user is heading home, Weather data indicates that it is a hot afternoon, Traffic data estimates how long it will take for the user to arrive. This equation would make the Nest Card to be triggered on the watch.

2. Demand: The Cue Card

The cue card is opened by saying, “Okay Google” or by tapping on the “g” icon on the home screen.

Whenever the context stream can’t be anticipated, the user can create an event on-demand, by browsing the list of actionable “Cue Cards”.

By simply saying “Okay Google” or by tapping the “g” icon on the home screen, a list of actionable items is presented to the user. This list of actions includes intents for voice actions, which will allow the user to interact with applications without the need to touch the interface.

Conclusion

Here’s just a quick glance on Android Wear and what designers and developers should be paying attention.

If you are like me and want to learn more about Android Wear UI Guidelines, continue on reading and learn about the navigation, view styles and voice reply interactions.

Design Principles of Android Wear

Straight from the guidelines, the design principles are clear: Timely, Relevant, Short, Immediate, Simple, Fast, Efficient, Respectful and Responsive.

Android Wear experiences are:

  • Contextually aware and smart. These devices bring a new level of awareness to computing. Rather than requiring attention and input from users, Android Wear devices are aware of their situation and state, and helpfully display the right information at the right time. Timely, relevant, specific.
  • Glanceable. Wearable devices are used all throughout the day, even when they sit in our peripheral vision. Effective apps provide the maximum payload of information with a minimum of fuss, optimized to provide tiny snippets of relevant information throughout the day. Short, sharp, immediate.
  • Zero/low interaction. Staying true to the strengths afforded by a smaller form factor, Android Wear focuses on simple interactions, only requiring input by the user when absolutely necessary. Most inputs are based around touch swipes or voice, and inputs requiring fine-grained motor skills are avoided. Gestural, simple, fast.
  • Helpful. Android Wear is like a great personal assistant: it knows you and your preferences, it only interrupts you when absolutely necessary, and it’s always on hand to provide a ready answer. Efficient, respectful, responsive.

(Background photo credit)

Notifications and Actions

All notifications are shown as cards in the context stream, usually followed by an action, which is accessed by the “Okay Google, Reply” voice command or by the horizontal swipe gesture.

Notification of a text message followed by the reply action.

Notification cards design elements consist of:

  • Background Images — HDPI images load behind the notification card and it should be at least 320x320 pixels. You can also load Google Map images, contact avatars or solid color background.
  • Application Icon — This is the visual identification for your application, that loads on the top right side of the notification card, overlaying the background image. You can choose not to display the application icon.

Note: It's not cool to use the background image or message title as application branding elements.

Big View example, where the user may scroll extended text content.
  • Title and Message — These are the gold in your interface, they’re short, straight to the point. The message should not exceed 3 lines, for extended text messages use one of the “big view” styles. On a handheld device, users can see the big view content by expanding the notification, while on Android Wear, the big view content is visible by default.
    See “Creating Notifications for Android Wear” for more information on Android Wear handles notifications.
  • Action buttons — If your notification includes an action to respond with text, such as to reply to an email, you can allow users to dictate a reply with voice input. You can also provide pre-defined text replies for the user to select.
User can dictate a reply or select one of the pre-defined text replies.
  • Pages — or should we call it “Secondary Pages”? — Pages are additional cards that can appear to the right of your main card in the stream. If your core message is longer than a short snippet, do not sacrifice glanceability by packing a lot of information into your primary notification. Instead, use pages to provide additional content.
Actionable Workflow using a card with a glance of the note followed by the additional content using Page, then the action.
  • Notification Stacks — Stacks are a way of adding multiple useful notifications without overwhelming the user’s stream. If your application may produce multiple concurrent notifications, consider combining them into a stack.
Notification Stacks or “bundles” collapsed followed by an expanded view.
  • Voice Replies — Voice replies are primarily used by messaging applications to provide a hands-free way of dictating a short message. You can also provide a up to five suggested replies or “canned responses” that are useful in a wide range of cases.
You should attempt to cover a range of simple, neutral replies in your choices. Longer voice replies may be automatically truncated in the Voice reply UI.

Keep the discussion on going

Once again, it’s an exciting time for designers and developers to add a mark on the history of Human Interface.

I hope this quick synthesis may inspire you to design and develop great stuff.

-mp

--

--

Marcelo Paiva

Creative Director at Sapient Global Markets NY focusing on financial solutions for tomorrow's investors. Passionate about Lean UX, Mobile and Data Visualization