An overlay is a focused view that should handle tasks that are too complex for a complication, Tile, or notification. Overlays are immersive. In some ways they are similar to a mobile app's main user interface, but they do have some differences.
Other surfaces (Tiles, complications, and notifications) that accomplish simple tasks often link into an overlay to allow users to carry out more complex tasks.
Review the following principles and use cases for a better understanding of overlays.
UX principles for an overlay
Design overlays with the following principles in mind:
- Focus overlays on critical tasks to help people get things done within seconds to avoid ergonomic discomfort or arm fatigue
- Shallow and linear
- Avoid hierarchies deeper than two levels. Show navigation inline
- Views can scroll. This is a natural gesture for users to see more content on the watch
When to use an overlay
Use overlays in the following situations:
- For additional info
- Focus overlays on critical tasks to help people get things done within seconds to avoid ergonomic discomfort or arm fatigue.
- For richer interactions
- To provide richer interaction than can be provided by a complication or Tile.
- For adjusting preferences
- To provide access to education and preferences.
Guides for creating overlays
- Use the Wear UI Library
- Learn how to import the Wear UI Library and the main classes.
- Handle different watch shapes
- Learn how to create layouts that look good on round, rectangle, and square Wear OS devices.
- Single screens, vertical containers and other screen options
- Learn how to construct the most common UI layouts for overlays.
- Create lists
- Learn how to create lists that are optimized for wearable devices.
- Learn how to construct your Wear OS app.
- Exit full-screen activities
- Learn how to exit full-screen activities.
- Show confirmations
- Learn how to show confirmation animations when users complete actions.
- Ambient mode
- Learn how to keep apps visible.
- Learn how to handle sound on Wear OS.
- Wet mode
- Learn how to disable touch screen using wet mode.