Interface Navigation in Apple Watch Apps

On the small face of an Apple Watch, your app won't have much space for displaying icons and navigation symbols. To solve that problem, the WatchKit includes navigation controls that give your Watch apps ways to be more useful to users. Wei-Meng Lee shows how to add maneuverability to your Apple Watch apps with navigation.

Like this article? We recommend

My previous article “Getting Started with the Apple WatchKit” showed how to get started writing your first Apple Watch application. In this article, we'll continue with our examination of the WatchKit API by examining how to implement page navigation in Watch apps.

Navigation Styles on the Apple Watch

Unlike iPhone and iPad applications, Apple Watch apps run on pretty small screens. At the time of writing, the Apple Watch comes in two screen resolutions:

The 38mm Apple Watch is 272 x 340 pixels.

The 42mm Apple Watch is 312 x 390 pixels.

Both screen sizes have the same 4:5 aspect ratio, and Apple classifies them as retina displays (2x resolution).

Screen navigation of the Apple Watch is obviously pretty constrained. The WatchKit supports two navigation styles:

Hierarchical navigation is suitable when you want to let users know more information about an item. Tapping an item drills down on the details of the selected item.

Page-based navigation works well when you want to interrupt the user to ask for input or simply to display a dialog.