An overlay is one of the primary surfaces for app content. Overlays are different from complications or Tiles, which are glanceable representations of app content. Overlays display more information and support richer interactivity. The user often enters an overlay from another app surface, such as a notification, complication, Tile, or voice action.
Principles
Keep the following principles in mind when designing overlays
Focused
Focus on critical tasks to help people get things done within seconds.
Shallow and linear
Avoid creating hierarchies deeper than two levels. Aim to display content and navigation inline when possible.
Scrolling
Overlays can scroll. This is a natural gesture for users to see more content on the watch.
Guidelines
Follow these guidelines when designing overlays.
Optimize for vertical layouts
Simplify your app’s design by using vertical layouts, which allow users to scroll in a single direction to move through content.
Do
Don't
Show the time
Users tend to spend more time in overlays, so it’s important to provide quick access to the time.
Do
Don't
Accessible inline entry points
Ensure all actions are displayed inline, using clear iconography and labels for accessibility. This includes entry points to settings and preferences.
Do
Don't
Elevate primary actions
Make it easy for users to take action in your app by pulling primary actions to the top of the overlay.
Do
Use labels to orient users
For longer overlays, help orient the user with labels as they scroll through the content.
Do
Don't
Show the scrollbar
Do
Content containers
See the following examples of content containers.
