Navigation design for Windows Store apps
Learn how to 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, such as tabs. This lets people focus on the current content.
Hierarchical system
Most Windows Store apps in Windows 8 will use a hierarchical system of navigation. This pattern is common and will be familiar to people, but is made even better by the Hub navigation pattern. This pattern makes Windows Store apps fast and fluid while still being easy to use.
This pattern is best for apps with large content collections or many distinct sections of content for a user to explore.
Layers in the hierarchy
The essence of Hub design is the separation of content into different sections and different levels of detail.
Hub pages
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. Each Section should bubble up content or functionality. The Hub should offer a lot of visual variety, engage users, and draw them in to different parts of the app.
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
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 system
Many Windows Store apps in Windows 8 use a flat system of navigation. This pattern is often seen in games, browsers, or document creation apps, where the user moves between pages, tabs, or modes that all reside at the same hierarchical level.
This pattern is best when the core scenario involves fast switching between a small number of pages or tabs.
Content pages
The essence of the Flat system is the separation of content into different pages.
Top app bar
The top app bar is great for switching between multiple contexts. Examples include tabs, documents, and messaging or game sessions.
This bar is a transient element that resides at the top of the screen, and is made visible when users swipe from the top or bottom edge. While formatting of items in the bar can vary, a typical treatment is the use of a simple thumbnail.
Switching
Unlike the hierarchical system, there is typically no persistent back button or navigation stack in the flat system, so moving between pages is usually done through direct links within the content or the top app bar.
You can choose to include other functionality within the top app bar, such as adding a ‘+’ button to create a new tab, page, or session.
Navigation anatomy
The following show the anatomy navigating between sections in an app, between different levels in the hierarchy, and within a single app page.
-
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.
-
Hub page
The Hub page pulls information from different areas of the application onto one screen. It gives the user a bird’s-eye view of everything available in the app.
-
Content sections, or categories
Content sections can be formatted to best display the functionality or items they promote.
-
Semantic zoom: navigating between levels in a hierarchy
Semantic zoom makes scanning and moving around a view fast and fluid, especially when the view is a long panning list.
-
Top app bar
The top app bar contains transient access to navigation controls or to other areas of the app.
-
Header menu
The header menu is available from anywhere in the app, and allows users to quickly jump from one section of the app to another
-
Home link
The home link, located at the bottom of the header menu, is a quick way to get back to the root of the app.
-
Bottom app bar
The bottom app bar contains transient access to commands relevant to a particular view.
-
View/Sort/Filter
These commands change the way in which content is displayed within a specific view. The best place for them to reside is in the app bar.
-
Edge
Swiping from the edge of the screen is what makes the app bars and charms appear.
Navigating with the edge swipe
Users can navigate within apps and throughout the system by swiping a finger or thumb from an edge. In order to use Windows Store apps efficiently, users learn what each of the following edge swipes does:
- Swiping from the bottom or top edge of the screen reveals the navigation and command app bars.
- Swiping from the right edge of the screen reveals the charms that expose system commands.
- Swiping from the left edge cycles through currently running apps.
- Sliding from the top edge toward the bottom edge of the screen closes the current app.
- Sliding from the top edge down and to the left or right edge snaps the current app to that side of the screen.
Navigating with header menus and section labels
We will use a sample app called Food with Friends to illustrate a pattern for using the back button, header menu, and content sections to navigate a Windows Store app.
The header menu contains a link to each section page (level 2) as well as a link back to the hub (level 1), enabling users to move around the app quickly. The menu appears at each level and on every page of the app, making it an efficient and reliable way for users to get where they want to go.
Users can tap on the section label to drill in to the corresponding page for that section. Provide a visual cue, likeView all (x), to indicate to users that there are more items in this section that what is shown in the hub. Using this pattern avoids the need to use a tile space or place a link within the content.
Using this pattern, this is what the navigation diagram would look like for the Food with Friends example. This is a simplified diagram showing only canonical examples of navigation elements, used as representatives of everything that’s interactive.
Navigating with filters, pivots, sorts, and views
Another part of app navigation is determining when, where, and how to give users more control over the way they experience content. Filters, pivots, sorts and view switchers are all things to consider in your app design.
TermDefinitionExampleFilterRemoving or hiding content within a data set, based on some criteria.When looking for a game to play, you might choose to view only those games categorized as “adventure.”PivotReorganizing content within a data set, based on some criteria.When looking at a music collection, you might choose to organize songs by artist, album, or genre.SortChanging the order in which content is displayed within a data set.When browsing for an article to read in a news app, you might choose to see the most recent articles listed first.ViewChanging the style or method in which content is displayed.When browsing for a place to eat in a restaurant-finding app, you might choose to view restaurants on a map instead of in a list.
On-canvas
Use on-canvas controls for filtering, pivoting, or sorting when finding an item is a primary task, like in a collection or search result page.
Controls should go into the app bar, if the focus of the app is on browsing for content, like a magazine or shopping app.
Page filters and sorts
For filtering and sorting content within a collection view, filter and sort commands can be placed in a row between the header and content. In the following example, the view is filtered to show only TV episodes, sorted and grouped by series.
In this example for a marketplace app, drop-down selection controls filter the content for the current view. As the menus show, the currently active filter appears selected in the drop-down list.
The top app bar
The top app bar is used primarily for navigating sections or pages of an app that use the Flat navigation pattern. Sometimes called a navigation app bar, it can also be used along with the Hierarchical pattern, in lieu of the header menu, to provide global navigation controls. The top app bar should show up on every page and at all levels of the app to provide users with a convenient, consistent way to get around.
In this finance app example, the hub (L1) promotes sections of the app (Headlines, Watchlist) to the hub, and the section headers link in to them. At the section level (L2), when the top app bar is invoked by swiping the top or bottom edge, the user has access to the root and all other sections of the app.
App bar view switching
The app bar is used primarily as a commanding surface, but it can also be used to alter the way in which content is being viewed. Switching views, pivoting, filtering and sorting can all be done by using the app bar. Don’t use the app bar for navigating from one place in the app to another. All app bar items should act on the content currently in view.
In this calendar app example, the view defaults to a month view, which this app has optimized for. Commands to choose other calendar views are in the app bar, accessed by swiping from the top or bottom edge. Other commands, such as making a new appointment, may appear in the bar as well.
In the All Restaurants page of the Food with Friends example, options for viewing items as a list or map are available, as are filtering and sorting the view based on certain criteria such as cost, location, and rating. Here, filtering options are exposed as controls in a menu Flyout.
