Tiles design guidelines

Tiles are one of the most accessible surfaces on Wear OS.

Tiles provide quick access to information and actions users need to get things done. With a swipe from the watch face, a user can see how they are progressing towards their fitness goals, check the weather, and more. Launch an app or get essential tasks done quickly from tiles.

Users can choose what tiles they want to see on their watch. Wear OS allows users to manage their tiles both on the watch and from the companion app.

UX principles

The following table describes Tile UX principles.

Immediate

Predictable

Relevant

Tiles are designed to help users quickly complete frequent tasks. Display critical content with a clear information hierarchy so content is easy to understand. Content within each tile should always focus on a user task. This enables users to predict what information they will be able to see on the tile, and improves recall. Users take their watches wherever they go. Consider how the content in the tile is relevant to the user’s context.

Guidelines

Keep the following guidelines in mind when creating Tiles.

Focus on a single task

Focus each Tile on a single task, such as start run.
Support too many different tasks on a single Tile.

Create separate tiles for each task

If your app supports multiple tasks, consider creating multiple tiles for each task your app supports. For example a fitness app could have both a goals tile and a workout activity tile.

Tiles

Show glanceable representations of graphs and charts

Show quick, glanceable representations of numerical or statistical information and allow the user to tap to see more in an app if needed.
Show detailed numerical or statistical information on the Tile.

Indicate latest data updates

Ensure the user is aware of how recent data shown on their watch is. Show cached data with an indication of when it was last updated when relevant to the user.

Tiles

Use an appropriate data refresh rate

Choose an appropriate update rate for your tiles, considering impact on device battery life. If you are using platform data sources such as heart rate and step count, Wear OS controls the update rate for you.

Empty states

Tiles have two types of empty states. For both we recommend that you use PrimaryLayout.

Errors or permission

Tell the user that they need to update their settings or preferences from the tile.

Sign in

Provide a clear call to action on a sign-in tile.

Dialog examples

Use dialog states for errors, permissions, and settings.

Tiles

Show ongoing activities

When an app performs a long-running activity—such as tracking a workout or playing music—it should show the progress of the ongoing activity in one of more tiles.

If your app also supports tiles that allow users to start these activities, do the following to minimize user confusion:

  • Indicate that an ongoing activity is already in progress.
  • If the user taps on such a tile, launch your app and show the in-progress activity. Don't start a new instance of an ongoing activity.

Tiles

Requirements

Primary data
The main content that describes the activity.

Label
Displays the status of the activity.

Motion on Tiles

When you add animations to tiles, keep the following principles in mind:

Help users understand changes

Emphasize if you're updating information on a tile, such as progress on a step count chart.
Unexpectedly toggle between values.

Previews

Add a tile preview to help your user see what content is shown in the tile manager on their watch and phone. Each tile can have one representative preview image. That image should meet the following requirements.

Requirements

  • Export assets at 400px by 400px.
  • Provide a circular preview image.
  • Use a solid black background.
  • Save as a PNG or JPEG.
  • Add localized assets for your app's popular languages.
A tile preview displayed in tile manager on a watch. A tile preview displayed in tile manager on a phone.
Show a preview where the tile is populated with content.
Show an empty state, show the tile icon in the pagination UI, or place a stroke around the tile.

Example layouts

The following show some common use cases for tiles, utilizing our best practices for design. For more information, see Tiles.

Goal tracking

Start workout

Start workout

Start workout

Workout summary

Start timer

Current heart rate

Heart rate

Next alarm

Meditate

Meditate

News

Weather

Next event

Social

Play media