NAVIGATION Patterns

WINDOWS 8

Hierarchical system
Most Metro apps in Windows 8 will use a heirarchical system of navigation. This pattern is common and will be familiar to people, but is made even better by the Metro style Hub navigation pattern. These patterns make Metro apps fast and fluid while still being easy to use. The hierarchical pattern is best for apps with large collections or many distinct sections for a user to explore.

Layers
1 HUB PAGES

An essence of the Hierarchical system is the separation of content into different sections and levels of detail.

The Hub consists of different sections, each of which maps to the apps 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.

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

SECTION PAGES

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

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

DETAIL PAGES

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.

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.

NAVIGATION Patterns

WINDOWS 8

Flat system
Many Metro apps in Windows 8 will 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 heirarchical level. This pattern is best for apps where the core scenario involves fast switching between a small number of pages or tabs.

Pages
1

An essence of the Flat system is the separation of content into different pages.

NAVIGATION BAR

The Nav Bar is a transient

The navigation bar is great for switching between multiple contexts. Examples include tabs, documents, and messaging or game sessions.

elment 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

You can choose to include other functionality withing the nav bar, such as adding a + button to create a new tab, page, or session.

Unlike the hierarchical pattern, there is typically no persistent back button or navigation stack in the flat pattern, so moving between pages is usually done through direct links within the content or the Nav Bar.

Edge swipe
Swiping from the bottom or top edge of the screen reveals the navigation and command bars. In order to use Metro apps efficiently, users will want to learn what each of the edge swipes do. In addition to the bottom and top edges, swiping from the left edge switches to previously used apps and swiping from the right edge reveals the system commands. Swiping all the way from the top edge down toward the bottom edge of the screen docks or closes apps.

NAVIGATION Anatomy

WINDOWS 8

BACK BUTTON & HEADER

CONTENT SECTIONS

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

Content sections can be formatted to best display the functionality or items they promote.

Header

HUB PAGE

2 12 3
D

SEMANTIC ZOOM

The Hub page pulls information from different areas of the application onto one screen. It gives the user a birds-eye view of everything available in the app.

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

HEADER MENU

NAVIGATION BAR

The header menu is available from anywhere in the app, and allows users to quickly jump from one section of the app to another
E
Header

The navigation bar contains

F

transient access to navigation controls or to other areas of the app.

HOME LINK

G I J H

The home link, located at the bottom of the header menu, is a quick way to get back to the root of the app.

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.

APP BAR

EDGE

The app bar contains transient access to commands relevant to a particular view.

Swiping from the edge of the screen is what makes the app bar, nav bar, and charms appear.