NavigationNavigation guidelines on Windows Modern UI
Maria NasiotiUI Designer at BugSenseMicrosoft Trainer for Windows 8Expert Mobile Designer
Within Windows 8 apps,there are new gestures andnew navigation features.How can I organize the content in my app so users can move easilyfrom one page to another?What commands and other UI can I use to help users ﬁnd their wayaround?
Hierarchical system An essence of the Hierarchical system is the separation of content into different sections and levels of detail.Flat system This pattern is best when the scenario involves fast switching between a small number of pages or tabs. Like games, browsers etc where the user moves between pages, tabs, or modes that all reside at the same hierarchical level.
Hierarchical systemAn essence of the Hierarchical system is the separation ofcontentinto different sections and levels of detail.
Hub pages are the users entry point to the app. Here content isdisplayed in a rich horizontally panning view allowing users to get aglimpse of whats new and available.The Hub consists of different categories of content.Hub should offer a lot of visual variety, engage users, and drawthem in to different parts of the app.
Navigation AnatomyThe following show the anatomy navigating between sections inan app, between different levels in the hierarchy, and within asingle app page.
A. Header and Back button The header labels the current page and is useful for wayﬁnding. The back button makes it fast to get back to where you were.B. Content Section orCategories Content sections can be formatted to best display the functionality or items they promote.
C. Hub It gives the user a birds-eye view of everything available in the app.D. Semantic zoom Semantic zoom makes scanning and moving around a view fast and ﬂuid, especially when the view is a long panning list.
E. Header menu, G. Home link The header menu is available from anywhere in the app, and allows users to quickly jump from one section of the app to another. The home link, located at the bottom of the header menu, is a quick way to get back to the root of the app.F. Top app bar The navigation bar contains transient access to navigation controls or to other areas of the app.
H. View/Sort/Filter These commands change the way in which content is displayed within a speciﬁc view. The best place for them to reside is in the app bar.I. Bottom app bar The bottom app bar contains transient access to commands relevant to a particular view.J. EdgeSwiping from the edge of the screen is what makes the app bars andcharms appear.
Navigating with the edge swipe Users can navigate within apps and throughout the system by swiping a ﬁnger or thumb from an edge.1. Swiping from the bottom or top edge of the screen reveals thenavigation and command app bars.2. Swiping from the right edge of the screen reveals the charmsthat expose system commands.3. Swiping from the left edge cycles through currently runningapps.4.Sliding from the top edge toward the bottom edge of the screencloses the current app.5. Sliding from the top edge down and to the left or right edgesnaps the current app to that side of the screen.