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.

Note: the tile screenshots shown on this page include an app icon at the top of the screen. This icon is drawn by the system. For more information see Tiles design system. Do not add your own app icon, even if the tile is in the empty state.

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

check_circle

Do

Focus each Tile on a single task, such as start run.

cancel

Don't

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.

Show glanceable representations of graphs and charts

check_circle

Do

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

cancel

Don't

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.

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.

Ongoing Activity tile

Ongoing Activity tile states represent the active parts of an app. These tiles replace the standard app tile to avoid repeated launches.

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

check_circle

Do

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

cancel

Don't

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 both circular and square preview images. 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.

check_circle

Do

Show a preview where the tile is populated with content.

cancel

Don't

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