Patterns Hardware buttons

Hardware buttons

Android Wear watches may have different hardware button configurations.

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

Button types

Power button

Power button example

All Android Wear watches have a power button. It is reserved for system-defined actions such as power on/off, showing the app launcher, and opening the microphone.

Multifunction buttons

Multifunction button configurations

Any buttons other than the hardware button can be mapped to actions. This varies based on location:

  • On the watch face or stream: OS- and user-configurable
  • In apps: App-configurable (optional)

Press states

Single press

Animated example of hardware button single press state

Button is pressed and released quickly

Press & hold

Animated example of hardware button long press state

Button is held for 500ms or longer

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

Multifunction button mapping Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Multifunction button actions are optional

Multifunction buttons can be assigned to actions if it fits your app's use case. Apps are not required to assign actions to multifunction buttons.

Only use multifunction buttons in your app if:

  • Your app has an obvious, binary action (such as, play/pause)

and

  • Your app is primarily used without the user looking at the screen
Do: Button mapping example 1

Do.

Do assign binary actions to multifunction buttons. This fitness app has assigned a pause/resume action to a multifunction button, which allows the user to perform the action without looking at the screen.

Don’t: Button mapping example 2

Don’t.

Don’t assign actions to multifunction buttons if your app doesn’t include simple, binary actions. This messaging app includes a Reply action, which requires multiple steps and can’t be complete with a single button press.

Binary actions

Binary actions, or actions that allow only one of two choices, help users understand what will happen each time they press a button. For example, buttons on stopwatches usually only perform a “start” or “stop” action. Give multifunction buttons to binary actions like start/stop or play/pause.

Multifunction button 1 example

Pressing the multifunction button starts the clock, and pressing it again pauses the clock.

Secondary actions

Additional multifunction buttons can be assigned to an obvious secondary action or left unassigned.

Additional multifunction button mapping example

A fitness app may use a second multifunction button to initiate heart rate measurement.

Paired actions

Some watches will have 2 multifunction buttons organized in a mirrored fashion, or equidistant from the center of the watch on opposite sides. This arrangement may lend itself to paired actions, such as volume up and down.

When to map paired actions to hardware buttons example

In this case, a phone call app can assign volume actions to the two vertically mirrored buttons. Volume UP could be assigned to the top-most multifunction button, and volume DOWN to the bottom-most multifunction button.

When considering paired actions, check that the watch has 2 multifunction buttons organized in a mirrored fashion. If they are not mirrored, disable the paired actions to avoid confusion.

When to disable paired button actions example

Disable the assignment of paired volume actions if a watch only has 1 multifunction button.

When to disable paired button actions example

Disable the assignment of paired volume actions if the buttons aren’t mirrored vertically, or equidistant from the center of the watch.

Best practices Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Use multifunction buttons for shortcuts

Multifunction button actions should also be accessible as on-screen UI elements, as some watches don’t have multifunction buttons.

Do: Button mapping best practice example

Do.

Use a multifunction button as a shortcut for a play/pause action and show it as an on-screen button.

Don’t: Button mapping best practice example

Don’t.

Don’t use a multifunction button for an action that can’t be performed using on-screen UI elements. This music app toggles the display to show Artist information, but a person using this app on a watch without a multifunction button would have no way to start this action.

Focus on simplicity and immediacy

Pressing a multifunction button immediately conducts its assigned action. To prevent users from needing to look at the screen, use actions that can be completed with a single press.

Do: Button mapping best practice example

Do.

Assign actions that can be immediately completed when pressed. In this music app, the user can quickly pause a song using the multifunction button.

Don’t: Button mapping best practice example

Don’t.

Don’t use the multifunction button for complex actions. In this email app, pressing the button begins the action of replying, but the user may need to review the message before the action is complete.

Be forgiving

Button actions should be reversible and not put users into a state where they will lose data.

Example of safe action image

Do.

Do preserve user data. If the user accidentally pressed the multifunction button and paused her workout, she can safely resume it with a second press.

Don’t: Button best practices example

Don’t.

Don’t use a multifunction button to trigger a destructive action. Pressing the multifunction button in this map app performs an action to “Stop navigation,” which can cause a user to lose directions at critical times.

Avoid mapping to UI navigation

Button actions should not replace UI navigation like swiping, paging, or scrolling. Multifunction buttons may appear in all sorts of configurations that could be counterintuitive to on-screen input.

Don’t apply to directional UI navigation example

Don’t.

Don’t assign UI navigation actions to multifunction buttons. This app assigned a page scroll action to a multifunction button but, on this watch, the button is not positioned relative to the scroll direction. This creates a confusing experience for users.

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

Button education isn’t required. If you find a need to provide some guidance around the multifunction button options, here is some guidance.

Hardware button guidance should be minimal, non-blocking, and temporary.

User education example animated

On first launch of an app, animate iconic, non-blocking hints in from the direction of the hardware buttons to assign. These clue in the user that each button is assigned a certain action. The user can then press the button to see exactly what it does.

User education example responsive

Alternatively, you could intercept the first press of the button in your app and display a one-time message explaining what the button does. You would not show this on subsequent presses.

Don’t: User education example 2

Don’t.

Don’t use full screen overlays or text to explain button actions. This is disruptive to users and is too much information to remember at once. Text strings also won’t localize well.

Don’t: user education example

Don’t.

Don’t add persistent labels to your UI to explain buttons. They constrain the space for and may be confused with on-screen actions.