Overlays

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.

overlay

This app’s goal is to take the user from point A to point B.

overlay

Don't use both vertical and horizontal scrolling, as this can make your app experience confusing.

Show the time

Users tend to spend more time in overlays and so it’s important to provide quick access to the time.

overlay

Display the time at the top of the overlay, as this provides a consistent place for the user to view the time.

overlay

Don’t display the time in a dialog, confirmation screen, or picker, as users are likely to spend only a few seconds on those screens.

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.

overlay

Use both icons and labels when possible.

overlay

Don’t rely solely on icons to prompt the user to take action.

Elevate primary actions

Make it easy for users to take action in your app by pulling primary actions to the top of the overlay.

overlay

Elevate non-ambiguous primary actions to the top of the overlay.

Use labels to orient users

For longer overlays, help orient the user with labels as they scroll through the content.

overlay

Use section breaks, labels, and other cues to organize content and help orient users as they scroll through longer views with mixed content.

overlay

Don't add a label for overlays that contain a single content type.

Show the scrollbar

overlay

Show the scrollbar if the entire view scrolls.

Content containers

See the following examples of content containers.

overlay

Figure 1. Container of fixed height.

overlay

Figure 2. Container of variable height.

overlay

Figure 3. Container of height and width greater than the viewport.

overlay overlay

Figure 4. Content pages that take the full dimension of the screen and are paginated vertically.

overlay

Figure 5. A paginated container.