Patterns – Complications

Complications

Complications allow users to get information at a glance.

Principles Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Glanceable

Complications should be clear and understandable.

Glaneable do

Do.

Ensure the data is large enough to read easily. Small, easy-to-read snippets of information work best.

Glanceable don’t

Don’t.

Users shouldn’t need to squint to read a complication’s data.

Time-saving

Users get the information they want quickly by elevating key information from apps to the top level. Because complications remain persistently visible, the data is always available to the user.

Time-saving

Consistency

Complications should integrate well with the style and function of the watch face. Consider adopting the style of the watch face. Be creative.

Consistent do

Do.

Align the style of complications with the watch face.

Consistent don’t

Don’t.

Complications shouldn’t feel jarring and out-of-place on the watch face.

Guidelines Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Positioning

Complications should never conflict with other watch face elements.

  • Leave sufficient space around your complications.
  • Balance watch face elements by using consistent alignment. For example, if the clock is centered, the complications should be centered too.

Positioning

Containers (optional)

Complications may house content within a container. The following container shapes work well with various data types:

  • Circle
  • Elongated circle
  • Square
  • Elongated square

Form factor

Style

  • You may tint data shown in complications with color to help to harmonize with the watch face style.
  • Complications may be displayed at different scales to achieve a balanced watch-face layout.

Strong relationship with watch face

Watch face complications
Developer documentation