Tiles design guidelines

Stay organized with collections Save and categorize content based on your preferences.

Tiles provide easy access to the information and actions users need to get things done in a matter of seconds. With a simple swipe from the watch face, a user can see how they are progressing towards their fitness goals, check the weather, and more. For more information, see Tiles.

Tile 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.

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 overlay if needed.
Show detailed numerical or statistical information on the Tile.

Wear displays the app icon automatically

Leave out the app icon from your tile in the tile carousel. Wear displays the app icon automatically as the user scrolls through the tile carousel.
Put the app icon on the tile design.

Set a black background color

Set the Tile background color to black.
Set the background as a full bleed image or block color.

Use dialogs

In some cases, the user needs to grant a permission, set a preference, sign in, or resolve an error to see content on a Tile. Use dialogs to prompt users to take an action.

Tiles

Figure 1. Use dialog states for errors, permissions, and settings.

Tile previews

Add a tile preview to help your user see what content is shown in the tile manager on their watch and phone.

See the following requirements for tile previews:

  • Each tile can have 1 representative preview image.
  • Export assets at 400px by 400px.
  • Crop your image in the shape of a circle.
  • Use a solid black background.
  • Save as a PNG or JPEG.
  • Add localized assets for your app's popular languages.

Figure 2. A tile preview displayed in tile manager on a watch. Figure 3. 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.