Navigation

We want the navigation to get out of the way of what people really want to look at on their screen. We use three predominant navigation structures to make that happen: flat, contextual and deep.

Flat

The user moves between main views of functionality of equal importance. These views are navigated by using the tab navigation structure. navigation_flat Associated building blocks Tabs

Contextual

The user moves between different levels of detail within one view. These views are navigated by using the expansion navigation structure. navigation_contextual Associated building blocks Expansion

Deep

The user moves up and down hierarchical levels of an application. These views are navigated by using the page stack navigation structure. navigation_deep Associated building blocks Page stack

One last thing

We don’t combine flat with deep navigation in the same view. When we need to use deep navigation, for example when the user taps on a piece of content from a tabbed view, the header will update to represent the new view. The page stack (deep navigation) makes use of a back button which, when combined with tabs (flat navigation) in the same view, could be misinterpreted as another method for navigating between tabs.