The system defines two navigation models you can use to present content on multiple screens: hierarchical and page-based. Choose the model that fits best with the way you organize your content and functionality.

Hierarchical navigation works well for a primary-secondary interface, in which items have parent-child relationships, or for presenting a navigable list of options. When people tap an item in a hierarchy, a new page appears that displays the item's information and may list additional child pages.

Diagram showing four watch screens arranged in a two-row hierarchy with one screen at the top and three screens on the bottom row. The top screen is labeled Parent and the three screens on the bottom row are each labeled Child page. Arrows show that the parent screen has three child screens.

Page-based navigation is a way to present a flat collection of information in which all items are peers. In page-based navigation, each item is displayed on a single page that may scroll vertically. People swipe horizontally to navigate from page to page, and dots indicate their place in the set of pages.

Diagram showing three watch screens on one row, each labeled Page and each including a page indicator at the bottom of the screen. An arrow points from the right edge of the leftmost screen to the middle screen and another arrow points from the right edge of the middle screen to the rightmost screen. The arrows, combined with the page indicators, show that the screens are ordered from left to right.

You can support a vertical type of page-based navigation within a hierarchy when a parent item has several detail pages, none of which contains scrolling content. In this case, you can let people swipe vertically or use the Digital Crown to move directly from one detail page to another, without having to return to the parent page in between.

Diagram showing four watch screens arranged in two columns. The left column contains one watch screen and the right column contains a vertical stack of three watch screens. The screen in the left column displays a three-row list with rows labeled one, two, and three. The top screen in the right column contains the number one, the middle screen contains the number two, and the bottom screen contains the number three. An arrow points from row one in the left column's screen to screen one in the right column. A second arrow points from screen one to screen two and a third arrow points from screen two to screen three.

The Workout app uses both hierarchical and horizontal page-based navigation: the top-level screen displays a long list of workouts, each of which contains child pages that provide details.

Screenshot of the Outdoor Run goal button in the Workout app.

After people start a workout, their focus shifts to the controls and metrics that are relevant during the session. To support this shift, the Workout app switches to page-based navigation for the child pages, so that people can easily swipe among workout controls, metrics, and playback controls while they're moving.

Screenshot of the Lock, New, End, and Pause workout controls.

Workout controls

Screenshot of current time, calories, and heart-rate metrics during an indoor cycling workout.

Metrics

Screenshot of a current song playing during a workout.

Playback controls

Focus on essential content. Regardless of the model you choose, including too many pages of content can make navigation time-consuming and confusing. Design your app for quick and convenient interactions. If your watchOS app has an iPhone companion app, design the watchOS app to complement your iPhone app, not mimic it.

Avoid creating hierarchies deeper than two or three levels. Shallow hierarchies make it easier for people to find what they want quickly. Including more than two or three levels of information might cause people to lose their place during navigation.

IMPORTANT Although you can display a modal view in both hierarchical and page-based apps, avoid using a modal view as a core navigational component in your app.

For developer guidance, see WKInterfaceController.