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.
The following are some principles of designing for Tiles.
Tiles are designed to help users complete frequent tasks as quickly and easily as possible. Display critical content with clear information hierarchy.
Each Tile should focus on a single task in order to help set expecations and increase user engagement.
The watch travels with the user everywhere they go. Consider how the content in the Tile is relevant to their time, activity and context.
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.
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.
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.
Use dialog states for errors, confirmation, and feedback.
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.
Use brand colors for primary and secondary actions. Don’t use more than three colors per Tile.
Set the background color to black.
Don't set the background as a full bleed image or block color.
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.
Tiles layouts that work well
The following sections provide examples of Tile layouts that work well for specific use cases.
Circular button with text and images can be combined with a small primary button for an additional secondary action.
Show a progress ring and large text to put focus on one clear goal.
Use gradients in progress rings.
Use text hierarchy to show the difference in information value.
Combine chip with icons and circular icon buttons for separationn of actions.
Show full screen, clear, text snippets.