Patterns Interactive watch faces

Interactive watch faces

Watch faces may be interactive and display unique styles.

Style

Watch faces may express distinct styles while displaying useful and actionable data.

Style

A range of watch face styles

Interaction

Watch faces may engage users in interactions that create delightful and informative user experiences.

Interaction

Interactions can change aesthetics, reveal new information, and open activities.

Creative vision Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Android Wear devices provide a digital canvas to reimagine ways to tell time. Android Wear also lets you integrate data on watch faces for a higher level of personalization and contextual relevance.

Glanceability is the single most important principle to consider when creating a watch face design. Watch face designs should deliver a unique expression of time and related data. Experiment with bold, minimal, and expressive design directions that are highly readable at a variety of distances and while your user is moving their body.

Square and round devices Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Android Wear devices come in different shapes and sizes. Consider both square and round faces and different display sizes to optimize a certain format. These guidelines help your concepts align across devices:

Create flexible concepts

Ideally, the visual functionality of the watch face works for both round and square formats. However, other design concepts require different executions for square and round screens.

The visual functionality of the watch face is flexible enough to work well in either
format without any adjustment.

Use a common design language

Try using a common set of colors, line weights, shading, and other design elements to draw a visual connection between your square and round versions.

The overall appearance of square and round can be appropriately customized while still
feeling like part of the same visual system.

Adjust for analog concepts

Some of your concepts will naturally take the shape of an analog clock, like a center dial with hour and minute hands.

Try extending and exploring the extra space of the exposed corners of a square format.

Display modes Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Android Wear devices operate in two main modes: always-on and active. Take both modes into account when designing watch faces. Generally, if your watch face design looks great in ambient mode, it will look even better in interactive mode. The opposite is not always true.

Active mode

When the user moves their wrist to glance at their watch, or touches the display, the screen goes into active mode. Your design can use full color with fluid animation in this mode.

Watch in active mode

Always-on mode

Always-on mode helps the device conserve power. Your design should make clear to the user that the screen is in always-on mode. The background color scheme is limited to black, white, and grays. Your watch face may use some color elements on screens that support it if it is clear that the device is in always-on mode. As a rule of thumb, use color elements for up to 5% of total pixels. In this mode, the screen is only updated once every minute. Only show hours and minutes in always-on mode; do not show seconds, it will look like time has stopped. Your watch face is notified when the device switches to always-on mode, and you should thoughtfully design for it.

Watch in always-on mode

Special screens Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Android Wear devices feature a variety of screen technologies, each with their own advantages and considerations. When designing the always-on mode display for your watch face, consider how it affects battery life and screen burn-in on some screens. Configure your watch face to display different always-on designs depending on the kind of screen available on the device.

Always-on screen

Always-on mode allows your app to stay open when the device display is dimmed, without compromising the battery. In always-on mode, the number of lit pixels on the display is drastically reduced, all interactivity is disabled, and the display switches to power-saving mode.

Read more about designing for the always-on screen.

For analog watch face designs, hollow out the center where the hands meet to avoid pixel burn-in in this mode.

System UI elements Expand and collapse content An arrow that points down when collapsed and points up when expanded.

To keep critical aspects of your watch face designs from being obscured, include Android Wear UI elements in your designs. These elements show the watch status and display notifications from services on the user's phone.

Indicators

Indicators show users the status of the watch, such as battery usage and airplane mode.

Before choosing one of the fixed locations to place the indicator, consider how it will display over the watch face. Locate indicators on the top or center of the screen if the designs use large peek cards. If the status icons or the hotword appears on the bottom of the screen, the system forces the watch face to display small peek cards. If the edge of the watch face contains strong visual elements, such as ticks or numbers, place the indicators on the center of the screen.

This indicator shows battery usage and connectivity.

The hotword

The hotword "Ok Google" alerts users that they can use voice commands to interact with the watch. When a user turns the watch on, the hotword appears on the screen for a few seconds.

Since the hotword disappears after the user says "Ok Google" 5 times, its placement is not as critical as indicators but still should not be covered up on the watch face. Turn on background protection for the hotword and the indicators unless your design is tailored to have these elements appear on top of them, for example using dark solid colors with no patterns.

This hotword signals when to use voice commands.

Data-integrated watch faces Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Your watch face can show users contextually relevant data and highlight it by changing styles and colors in your design.

What do users need?

What do you want users to know after they glance at your design? The first step in designing a data-integrated watch face is to define a conceptual user outcome based on available data. Generate a strong concept or outcome that is supported by real user needs. Then, determine how to obtain the required data.

Watch face showing goal accomplishment of 5000 steps

Watch faces as timelines

Your watch face concept may include use of data beyond time, such as weather, calendar, and fitness data. Consider integrating data creatively through the lens of time, instead of using a time-based watch face with just an extra data overlay.

For example, instead of designing a weather-related watch face as a clock with an overlay of current temperature in degrees, design a watch face that describes how the temperature will change over the course of the day.

Wear 2.0 offers a whole new way to integrate data on your watch faces. Read more about Watch face complications.

Watch face showing how temperature changes during the day

Stick to one message

Once you solidify a concept or desired goal, begin visualizing your watch face. The strongest designs are highly glanceable and deliver a unique expression of data.

To find one main message, identify the most important supporting data point. For instance, instead of showing an entire month of calendar events, display only the next upcoming event.

Glanceable data

Begin with some insight and test as you go

Make sure your approach begins with insight into the needs and expectations of users.

  • Test designs with users to check any assumptions you may have made.
  • Make a rough sketch on paper and ask a friend to tell you what it means.
  • Try your concept out with lots of different types of data and scenarios.
  • Test designs with an actual watch screen before you start coding.

Interactive watch faces Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Your watch face can respond to a single-tap gesture from the user, as long as there’s not another UI element that also responds to that gesture. Some possible use cases for interacting with the watch face include:

  • Causing an aesthetic change on the watch face, for example inverting the color scheme
  • Showing more information inline on the watch face, like displaying a detailed step count
  • Completing an action inline or in the background, such as starting a timer
  • Launching a specific activity, like starting a conversation in a messaging app

Available gestures

Only single taps are available. This restriction is important to maintain clear and consistent system interactions and to make watch face interactions as simple as possible. Neither you nor the user should think of watch faces as full-fledged apps. Figure 1 summarizes the categories of gestures and their uses.

As a rule, watch face interaction should be lightweight, with the user completing their desired action within one or two touches.

Tap targets

If you want to cause a simple state change on the watch face, such as a purely aesthetic change, you can use the entire canvas of the watch face as the tap target.

For a more significant change or action, like launching an activity or sending a message to a friend, keep targets smaller, between 48-90 dpi, to avoid false-positive taps. There should be a gap between targets of at least 8-16 dpi. For an optimized tappable experience, display a maximum of 7 to 9 targets at once.

Tap regions

You can also use different regions of the screen to trigger different changes to the watch face. For example, tapping on the entire canvas could toggle states for the entire face. Tapping a specific target could produce an inline display of information related to the target. Last, tapping outside the target could restore the watch face to its default state.

Visual feedback

Provide visual feedback when the user’s finger touches down on the watch face. The tap event does not trigger until the user lifts their finger, but visual feedback on touchdown helps indicate that the system has received the touch, and also helps the user know where the touch landed.

Warning: Do not immediately launch a UI on touchdown. A UI that you launch on touchdown conflicts with gestures for interacting with system UI elements including the watch face picker, notification stream, settings shade, and app launcher.

Visual feedback acknowledges the user’s touch and shows where the touch lands.

Design examples

Here are some examples of approaches for interactive watch faces:

Applying an aesthetic change

Toggling states

Changing a targeted UI element

Revealing information inline

Launching an activity with a single tap

Launching an activity with two taps

Android Wear companion app Expand and collapse content An arrow that points down when collapsed and points up when expanded.

The Android Wear companion app gives the user access to all installed watch faces and their settings.

Watch face

Watch face settings

Don't use a launcher icon

All available watch faces are accessible from the Android Wear companion app or from your bundled third party app. There is no need for a standalone launcher icon for Android Wear watch faces.

A new option in Wear 2.0 is to install your watch faces directly on the watch, not leaving any footprint on the phone. We recommend this if you don’t rely on the phone’s sensors or data for your watch face, or if you are not bundling your watch faces with a phone-side app.