Intro

Navigating on the smartwatch should be quick and easy. To help users find their way around, it is important to keep the number of taps to complete an action and the overall app hierarchy to a minimum. 

Choose a suitable navigation concept for smartwatch apps with more than one screen. Page-based and hierarchical navigation are best used for smartwatches.

A. page-based navigation B. hierarchical navigation
A. page-based navigation B. hierarchical navigation

Usage

Do
  • Use no more than two to three hierarchy levels.
  • Divide information across multiple screens.
  • Let users complete important actions and tasks without scrolling. 
Don't
  • Don’t include unnecessary steps to complete an action or task. 
  • Try not to use more than three hierarchy levels. 
  • Try to avoid long scrolling areas on the smartwatch. 

Page-Based Navigation

Page-based navigation is recommended if the available pages are hierarchically on the same level. Users can navigate between the screens by swiping left or right. The number of available pages and the current page can be displayed by a page control. 

Page-based navigation
Page-based navigation

Hierarchical Navigation

Hierarchical navigation is useful when content needs to be split up across more than one level or for parent-child relationships of pages. Try to use no more than two to three hierarchy levels. 

Hierarchical navigation
Hierarchical navigation

Back Navigation

To return to the previous view or to close the current view, use the lefttoright swipe gesture. Swiping from left to right is also the primary gesture to close an app.

Information
Some smartwatches like Samsung’s Galaxy Watch offer the ability to reprogram the home button and back keys to better suit the user’s daily needs or workflows.

Resources

SAP Fiori for watchOS: Navigation

Material Design: Navigation