Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Navigation patterns (Windows Store apps)

Applies to Windows only

Organize the content in your Windows Store app so your users can navigate easily and intuitively. Using the right navigation patterns helps you limit the controls that are persistently on screen. This lets people focus on the current content.

The navigation in Windows Store apps is based on two patterns: hierarchical and flat. An app can use one or the other or a combination of these patterns.

Hierarchical pattern

This pattern makes Windows Store apps fast and fluid. It is best for apps with large content collections or many distinct sections of content for a user to explore. Most Windows Store apps use a hierarchical system of navigation.

Explore this functionality in more depth as part of our App features, start to finish series:  Hierarchical navigation, start to finish (HTML and XAML)

Hub, section, and details pages in a Windows Store app

Hub pages are the user's entry point to the app. Here content is displayed in a rich horizontally panning view allowing users to get a glimpse of what's new and available.

The Hub consists of different categories of content, each of which maps to the app's section pages.

 

Section pages are the second level of an app. Here content can be displayed in any form that best represents the scenario and content the section contains.

The section page consists of individual items, each of which has its own detail page. Section pages may also take advantage of grouping and a panorama style layout.

 

Detail pages are the third level of an app. Here the details of individual items are displayed, the format of which may vary tremendously depending upon the particular type of content.

The detail page consists of item details or functionality. Detail pages may contain a lot of information or may contain a single object, such as a picture or video.

 

Flat pattern

Many Windows Store apps use a flat navigation pattern. Apps such as games, browsers, or document creation apps use this pattern to let the user move between pages, tabs, or modes that all reside at the same hierarchical level. Unlike the hierarchical pattern, there is typically no persistent back button or navigation stack, so moving between pages is usually done either through direct links within the content, as in the first example below, or through the nav bar, as in the second example below.

Explore this functionality in more depth as part of our App features, start to finish series:  Flat navigation, start to finish (HTML and XAML)

flat navigation examples

 

This pattern is best when the core scenario involves fast switching between a small number of pages or tabs, for example, in web browser apps like Internet Explorer, ebooks, and games.

On-canvas navigation

 

header, back button, section headers, and tiles as navigation elements

 

  1. Header and back button

    The header labels the current page and is useful for wayfinding. The back button makes it fast to get back to where you were.

  2. Section or category labels

    These labels move the user to different sections or categories of content.

  3. Other targets

    You can use tiles, arrows, buttons, search results or other customized targets as navigation elements. In some games you can find examples of navigation elements with interesting shapes.

 

Bing News app showing header, section label, and link to more details

 

The top app bar

By swiping from the top or bottom edge of the screen, a user reveals the app bars. The top app bar is also called the navigation bar, or nav bar. You can place navigation elements in the top app bar so that more screen area is available for the content in your app to shine. Alternatively, you can place navigation elements on the canvas if users frequently need them when using your app, and if having them on the canvas doesn’t negatively impact the app experience. You decide if navigation elements belong in the top bar or on the canvas.

 

accessing the nav bar

 

Commonly, section or category labels are in the navigation bar, as in Hulu Plus.

 

hulu plus app nav bar

 

Many apps use the top app bar to provide shortcuts. For example, in the ESPN app, a user can navigate to a gamecast page by clicking a scoreboard above the section labels in the top app bar.

 

espn app nav bar

 

The top app bar can also give users a preview of the content on the target page. In the following shopping app example, you can preview the product images in the app bar before diving into a product detail page.

 

vevo app nav bar

 

We encourage you to push your design further by using the app bars in creative ways. In Fresh Paint, the top app bar goes beyond its dedicated navigation function and doubles as a painting toolbox.

 

fresh paint nav bar

 

Semantic zoom

Semantic zoom makes scanning and moving around a view fast and fluid, especially when the view is a long panning list.

 

sample app in zoomed in view, then zoomed out view

 

For example, in Great British Chefs, the hub page has a spotlight section followed by five visually rich, horizontally panning sections. The app uses semantic zoom to make it easier to jump to each of the five sections.

 

semantic zoom in Great British Chefs

For more info, see Guidelines for semantic zoom.

Related topics

For designers
Command patterns
Layout
Back button
Guidelines for hub controls in Windows Store apps
Guidelines for hub controls in Windows Phone Store apps
Guidelines for app bars
Making the app bar accessible
For developers (HTML)
WinJS.UI.Hub object
WinJS.UI.AppBar object
WinJS.UI.NavBar object
WinJS.UI.BackButton object
HTML Hub control sample
HTML AppBar control sample
HTML NavBar control sample
Navigation and navigation history sample
Your first app - Part 3: PageControl objects and navigation
Adding app bars
Adding nav bars
Navigating between pages (HTML)
For developers (XAML)
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
XAML Hub control sample
XAML AppBar control sample
XAML Navigation sample
Your first app - Part 3: Navigation, layout, and views
Your first app - Add navigation and views in a C++ Windows Store app (tutorial 3 of 4)
Adding app bars (XAML)
Navigating between pages (XAML)
For developers (Windows Runtime apps using DirectX with C++)
Creating an app bar or Setting

 

 

Show:
© 2014 Microsoft