Android users engage with different media types such as audiobooks, music, podcasts, and radio. It's important to design apps that allow users to conveniently access media on their watch. The watch is a unique surface on which ease and speed of interactions is a high priority, as users spend much less time interacting with their watch than their phone or tablet.
For more information, see the Media Toolkit on GitHub.
Media app architecture
Create media apps with certain constraints and requirements. Media apps often include Browse and Entity pages. Browse allows users to find media to play. Use Entity pages to give users more information about what a media item contains. They can also contain additional actions such as manual download, play, or shuffle.
Media apps should also include media control screens. Create media controls using a five button layout. This is to ensure that minimum tap targets are met. The following are examples of media controls for a music app and a podcast app.
Adapt the media controls that you display, depending on the type of content. Use a three-dot overflow icon to take users to an additional page if you want to include more than five actions. You can use custom icons and fonts for your app.
When creating entity pages, make sure important context and actions are readily available, such as downloading media for offline playback, or playback speed.
|Example entity page for a music app.
|Example entity page for a podcast app.
Most Wear OS devices have a rotating side button (RSB) or a bezel. Certain wear devices may also have additional hardware buttons to control volume. Use the RSB, bezel, or the additional button to control the volume. Show the indicator only when the RSB or bezel is rotated, as shown in the following example.
Reduce your app hierarchy and expose media for the user. Design with a flat information architecture that allows users to quickly access lists and showcase thumbnails for users. Consider using custom design components for Wear OS. For more information, check out design recommendations for Cards and Chips.
Common use cases
When designing media apps, be sure that you prioritize the following important use cases.
Allow the user to:
- Listen to downloaded media
- Stream music from the watch
Listen to downloaded media
Users should be able to manually download media items from an entity page.
Communicate to the user where they are downloading content, the progress of the download, the time it takes, and the size of the download, as shown in the following example:
When the user browses media, display the most recently downloaded media.
If content is already downloaded, make this clear by showing an action to remove the download from the watch. In this case, you must also show how much space the download is taking up on the phone, as shown in the following image.
If the source device is the watch, prompt users to connect a headset before they begin listening to music. Once a headset is connected, play the media and open media controls.
Stream music from the watch
Streaming from the watch can drain the watch battery. Prioritize downloaded content when users choose to listen on the watch by exposing recently used downloads on the browse list. Consider adding a button that takes them to a full list of downloads as shown in the following images.