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.