Complications

Complications display timely and relevant information about your app on the watch face.

Some watch faces do not display any complications, but most display at least a few. Complications are divided into families—circular, modular small, modular large, utilitarian small, utilitarian large, and extra large—and each family determines how information is presented onscreen.

Your app provides the data for a complication in the form of a timeline. The system uses this timeline to determine which data to display based on the current time of day. Timelines are also used for Time Travel, which works with complications to let users see what’s happening — and what’s already happened — yesterday, today, and tomorrow. Apps can update their timelines a limited number of times each day, and the system stores a limited number of timeline entries for each app.

Complications are drawn using templates that define the layout and appearance of the data from the timeline, and each complication family offers a variety of templates from which you can choose.

Circular. These templates display a small image or a few characters of text in the corners of the Color watch face.

  • Ring Image
  • Ring Text
  • Simple Image
  • Simple Text
  • Stack Image
  • Stack Text

Modular small. These templates display two stacked rows of content, an icon and content, a circular graph, or a single larger item on the Modular watch face.

  • Columns Text
  • Ring Image
  • Ring Text
  • Simple Image
  • Simple Text
  • Stack Image
  • Stack Text

Modular large. These templates offer a large canvas for displaying up to three rows of content on the Modular watch face.

  • Columns
  • Standard Body
  • Table
  • Tall Body

Utilitarian small. These templates occupy a rectangular area in the top left and right corners of the Utility, Motion, Mickey Mouse, and Minnie Mouse watch faces. They occupy three corners of the Chronograph watch face and all four corners of the Simple watch face. The content can include a glyph or icon, or it can include a circular graph.

  • Flat
  • Ring Image
  • Ring Text
  • square

Utilitarian large. This template is primarily text-based, but also supports a glyph or icon placed to the left of the text. This template spans the bottom of the Utility, Motion, Mickey Mouse, and Minnie Mouse watch faces.

  • Large Flat

Extra large. These templates display text and images on the X-Large watch faces.

  • Ring Image
  • Ring Text
  • Simple Image
  • Simple Text
  • Stack Image
  • Stack Text

Support as many complication families as possible. Supporting all of the families ensures that your complication is available on all watch faces that display complications. For families you do not support, the system displays your app name or icon instead.

Display data that is useful and relevant. Watch faces have only a small number of slots available for complications. If your complication does not provide useful data, the user will likely not install it. The most interesting and useful complications are ones whose data changes throughout the day.

Decide what data to display, and when to display it. Each timeline entry has a time value that represents the time at which to display your data on the watch face, and different data sets might require different time values. For example, a meeting app might display information about an upcoming meeting before the meeting starts, but a weather app might display forecast information at the time when those conditions are expected to occur. Choose times that enhance the usefulness of the data.

Size images to match the specific template. The images you use in complication templates must be sized appropriately for that template. For a list of image sizes for each template, see Complication Images.

Provide complication bundles with realistic data. Users configure complications using the Apple Watch app on iOS, which uses complication bundles to display representative versions of your app’s complication. You supply the complication bundles for your app. When creating the bundles, use realistic placeholder data to convey how your complication will look when displayed on the watch face.

Always provide no-content images for your complication. The system displays a no-content image when the data for a complication is not available. For information about the size of no-content images, see Complication Images.

Choose a ring style that matches your data. Use the closed style to convey a value that is a percentage of a whole, such as a battery gauge. Use the open ring style when the minimum and maximum values are more arbitrary or do not represent a percentage of the whole, such as a speed indicator.


Notifications

Notifications on Apple Watch communicate high-value and immediate information through quick interactions. Notifications occur in two stages–– short looks and long looks. The short look appears on wrist raise and contains brief but meaningful information about the notification. The lowering of the user’s wrist causes the short look to disappear. If the user’s wrist remains raised, Apple Watch displays a long look that provides more details about the notification.

If your iPhone app supports notifications, Apple Watch automatically provides default short-look and long-look interfaces for you. You can customize your app’s long-look interfaces to include photos, animated images, additional content, and a custom color palette.

Whether you provide a custom notification interface or use the default interface, the content you send should be informative and helpful to the user.

Short looks

Short looks appear briefly, giving the user just enough time to see what the notification is about and which app sent it.

Apple Watch defines the appearance of short looks, incorporating the title of the notification along with your app’s name and icon into the UI. The app name is displayed in your app’s global tint color.

Make titles short and easy to understand. Space for titles is limited, so keep titles brief and put detailed information in the body of your notification.

Keep privacy in mind. Short looks are intended to be discreet and provide only basic information. Avoid including potentially sensitive text in the notification’s title.

Long looks

Long looks provide more detail about an incoming notification. The long look appears when the user’s wrist remains raised or when the user taps the short look. Long looks are dismissed automatically when the user’s wrist is lowered. The user can also dismiss them manually.

Custom long looks come in static and dynamic versions. The static interface lets you display a notification’s message along with other static text and imagery. The dynamic interface gives you access to the notification’s full content and offers more options for configuring the look of the interface.

The content area of the static and dynamic long looks is fully customizable, but the overall structure of the interface is not. The system-provided sash at the top displays the app icon and name. You can customize the sash’s color or give it a blurred appearance. Buttons for custom actions appear below the content area. The system always adds a Dismiss button to your interface and places it after your custom buttons.

Although it’s best to be succinct, users can swipe vertically or use the Digital Crown to scroll your long look as needed.

Make your long look interfaces glanceable. Place the most important information at the top of your interface so that users can find that information quickly. Use fonts, colors, and layout to make important information stand out.

Choose the sash color. Customize the color palette of your interface to match your brand. If a photo is displayed at the top of your long look’s content area, select the blurred sash option. A blurred sash has a light, translucent appearance and gives the illusion of overlapping the image.

Choose the background color. By default, the long look’s background is transparent. Set the interface controller’s background color to 18 percent opacity white to match other system notifications or select a color that matches your brand’s palette.

Add up to four custom action buttons. Apple Watch shares the actionable notification types already registered by your iPhone app and uses them to configure any custom action buttons. The system determines which of your custom buttons to display based on the notification’s type. In addition to your custom action buttons, the system always adds a Dismiss button.

Provide a static interface and an optional dynamic interface. The dynamic interface is more configurable, but both interfaces support app-specific customizations. The system defaults to the static interface when the dynamic interface is unavailable. For more information, see App Programming Guide for watchOS.

Provide rich notification content in your custom long looks. Providing rich content in your custom interfaces eliminates the need to launch your app. Use SpriteKit or SceneKit to create custom animated interfaces or include inline video.

Design static images in advance. You must create resources intended for your static interface in advance and package them with your app.


watchOS Apps

A watchOS app gives users more detailed information or functionality than they can find in notification interfaces.

Your watchOS app complements your iPhone app and is meant for quick interactions with your content. Use your watchOS app to display important information and to facilitate interactions with that information. Take advantage of Handoff to forward tasks back to iOS and macOS devices as needed.

Make your app’s interface highly glanceable. Organize text and images so that users can find the information they need quickly and easily.

Keep your app’s snapshot up to date. Your app’s snapshot is displayed in the Dock and when your app launches, so make sure it contains the most recent, relevant, and actionable information. A snapshot doesn't have to be the same view the user last saw, but it should always be instantly recognizable as your app. Don't show alerts or error states in snapshots.

Design your interface with snapshots in mind. Snapshot images in the Dock are displayed at roughly two-thirds of their normal size. Consider presenting your content differently if doing makes that content easier to read. Make sure that the font sizes you choose are legible at that reduced size.