Design media experiences on Wear OS by applying core principles that prioritize
user control and efficiency.

## Consistent and predictable

Verify that users don't need to relearn interaction basics from one media UI to another so that users can control media across different contexts.

<br />

Align UI patterns and avoid creating new UIs for common interactions.

![](https://developer.android.com/static/wear/images/design/media-music.png)

<br />

## Glanceable and critical

Help users complete tasks quickly by elevating critical controls and showing correct status.

<br />

Display critical controls and content in a clear information hierarchy so that
users can control media browsing and playback on their watch.

Reflect the dynamic status, such as the current device volume or the connected
output device.

![](https://developer.android.com/static/wear/images/design/media-glanceable.png)

<br />

### Quick and consistent

Verify that users can quickly control media on the wrist.

<br />

Avoid hidden gestures or interaction patterns that require onboarding and
spatial memory capacity. Provide visual affordances inline that clearly guide
users to additional functionality.

Verify user journeys that involve system and app UI integrate seamlessly to
avoid duplicative screens for users to navigate between surfaces across
contexts.

![](https://developer.android.com/static/wear/images/design/media-quick-and-easy.png)

<br />

## Common design patterns

The following sections describe common design patterns for media experiences on
Wear OS.

### Overflow button

Use the overflow button to provide consistent navigation and more
functionalities.  
![](https://developer.android.com/static/wear/images/design/media-overflow-dont.png)

<br />

**Don't**

Rely on hidden gestures that require users to memorize the navigation.

![](https://developer.android.com/static/wear/images/design/media-overflow-do.png)

<br />

**Do**

Provide visible overflow button to guide users to access additional
functionality.

<br />

### Consistent access to media options

Provide consistent access to functionality across media surfaces and contexts.  
![](https://developer.android.com/static/wear/images/design/media-consistent-dont.png)

<br />

**Don't**

Inconsistent patterns for media controls across media surfaces and contexts
cause user confusion and cognitive load.

![](https://developer.android.com/static/wear/images/design/media-consistent-do.png)

<br />

**Do**

Provide consistent patterns across media surfaces and contexts.

<br />

### Volume control

Use the key volume control interaction such as tap affordance, volume bar, and
hardware controls to make sure critical volume tasks can be done.  
![](https://developer.android.com/static/wear/images/design/media-volume-dont.png)

<br />

**Don't**

It's confusing when users can't control volume with the hardware.

![](https://developer.android.com/static/wear/images/design/media-volume-do.png)

<br />

**Do**

Let users control the volume with the hardware crown.

<br />

### Output device

Use an icon that clearly shows users which device they're using to listen to
media playback.  
![](https://developer.android.com/static/wear/images/design/media-output-dont.png)

<br />

**Don't**

Icon doesn't reflect where will the sound come from and where to control volume

![](https://developer.android.com/static/wear/images/design/media-output-do.png)

<br />

**Do**

Reflect the output device status with the indication of volume controls

<br />

## Extend across devices

Consider cross-device consistency and use existing patterns for more predictable
and consistent user experience.