Tiles

Tiles provide easy access to the information and actions users need to get things done. 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.

Users can choose what Tiles they’d like to see. Wear makes it easy for users to manage their Tiles both on the watch and from the companion app, so that users get the most out of their watch.

Principles

The following are some principles of designing for Tiles.

Immediate

Tiles are designed to help users complete frequent tasks as quickly and easily as possible. Display critical content with clear information hierarchy.

Predictable

Each Tile should focus on a single task in order to help set expecations and increase user engagement.

tile tile

Relevant

The watch travels with the user everywhere they go. Consider how the content in the Tile is relevant to their time, activity and context.

tile tile

Display relevant content updated for the user’s time, place, and activity. For example, the next event Tile aims to show the user’s upcoming events. If there are no events, it will display an empty state.

Guidelines

The following are guidelines to keep in mind when creating Tiles.

Focus on a single task

Each Tile should focus on a single task, for example, "show me my next event."

Don't support too many different tasks on a single Tile.

Take action in an overlay

If further interaction is required for the user to complete their task, the Tile should serve as a glanceable entry-point into the overlay, in which there is support for rich interactivity.

Launch an overlay when the user needs further interaction to complete their task.

Don’t offer controls directly on the Tile.

Tap for more

If the user needs more information than what can be displayed on a Tile, consider allowing the user to tap to learn more in an overlay. Overlays provide more space, by enabling the user to scroll.

Create separate Tiles for each important task

If your app supports multiple tasks, consider creating separate Tiles for each task. For example, Fitness apps might have a goals Tile and a workout activity Tile. Create consistency with the use of brand colours.

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

Don’t show detailed numerical or statistical information on the Tile.

Avoid live updates

Tiles are re-rendered on a best-effort basis to ensure energy efficiency. Elements that require frequent re-rendering will not be efficient in rendering the information.

Update the Tile less than once per minute.

Don't update the Tile more than once per minute.

Help the user take action on dialogs when relevant

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. Help the user take action from the Tile when needed.

tile

Use dialog states for errors, confirmation, and feedback.

Brand identity

Keep the following in mind to express your brand identity within your Tile.

Wear will show your app icon automatically

Wear displays the app icon automatically as the user scrolls through the Tile carousel.

Express your brand identity through your content

Use content, color, and iconography to express your brand identity on the Tile.

Don’t show additional app names, icons and other non-functional branding on the Tile. Your app icon is automatically displayed when a user views your Tile.

Colors

Use brand colors for primary and secondary actions. Don’t use more than three colors per Tile.

Background color

Set the background color to black.

Don't set the background as a full bleed image or block color.

Imagery

Place images within cards, pills, or rounds buttons.

Don’t use full bleed images as a background.

Buttons and chips

Use different button styles to provide different interaction patterns.

tile tile

Tiles layouts that work well

The following sections provide examples of Tile layouts that work well for specific use cases.

Circular buttons

Figure 1. Alarm Tile.

Figure 2. Workout Tile.

Figure 3. Timer Tile.

Circular button with text and images can be combined with a small primary button for an additional secondary action.

Progress rings

Show a progress ring and large text to put focus on one clear goal.

Figure 4. Goal progress Tile.

Figure 5. UV index Tile.

Use gradients in progress rings.

Chips

Use text hierarchy to show the difference in information value.

Figure 6. Event Tile.

Figure 7. Media Tile.

Figure 8. Workout Tile.

Figure 9. Commute Tile.

Combine chip with icons and circular icon buttons for separationn of actions.

Figure 10. News Tile.

Show full screen, clear, text snippets.