Few months ago, one of our members, Jasna, got invited to be a speaker at the Macedonian Mobile UG monthly meeting in Skopje, Macedonia. She spoke on a very interesting User Experience topic, the Navigation Patterns in Windows 8 applications. Considering the interest for the topic, we decided to share it with you in the shape of a blog post.
Have you faced the challenges of the new, modern and different navigation presented in Windows 8? We believe you have – both as a user and as a creator of Windows 8 applications. Have taken your time to think how to navigate back to the previous page or how to link pages and yet keep the simplicity? If so, you are at the right place. Keep reading!
Navigation Pattern is a concept in User Experience which revolves around the right usage of navigation for the right User Interface/Design elements in order to avoid unnecessary functionality complications. Knowing about navigation patterns helps in the limitation of controls that are persistently on screen (think: tabs). One important benefit of appropriate navigation patterns in Windows 8 apps is that it lets the user focus on the app content by making use of intuitive navigation.
There are 3 types of navigation patterns in Windows 8: Hierarchical, Flat, and Split Navigation Pattern:
Hierarchical Navigation Pattern
This is the most used (and also most inappropriately used!) navigation pattern because it comes from the older apps and
Windows versions, so a lot of people are used to using this one.
Here are some characteristics:
-Also called Hub Design
-Layers in the app hierarchy
-Content is separated into different levels in the layer hierarchy
-Main Hierarchy Elements:
-Hub Pages – entry point in the app, general content level
-Section Pages – individual second level items of the app, divisions, blocks, etc.
-Detail Pages – details of individual items are displayed in the third layer level, i.e. page content
Usage convenience: apps with large collections of content or apps with a lot of different sections
Example: Parcelgenie Windows 8 app
Flat Navigation Pattern
The flat navigation pattern is much simpler than the hierarchical pattern and it makes use of a sequential method
of displaying pages and page information within an application, so it therefore very convenient for simple and small apps.
Some key points:
-Separates content into different pages
-No layers
-Content is displayed by straight selection of a different page
-Main Navigation Elements:
-Navigation Bar (or top App bar) – easy way to switch between multiple contents
-Switching – no Back button – moving between pages is done through direct links
Usage convenience: games, browsers, document-creation apps, etc. where there is a lot of switching between pages of the same level
Example: Bing News Windows 8 App
Split Navigation Pattern
In this pattern, there is one app level – and this level is used both for ordering of content and for content display. The Master List
shows general content items which are displayed in the Item Description page. As you can notice here, there is no navigation from one
page to another – everything happens at the same place.
Characteristics:
-Content is shown on the same level with individual items
-Makes use of switching between individual items into the same item description page
-Content is displayed into the item description page by selecting an item from a master list
-Main Navigation Elements:
-Master List – a list of individual items, usually shown on the left of the page
-Item Description Page – used to display content from a selected Master List Item
Usage convenience: mail applications and applications with simple content and structure
Example: Twitter app for Windows 8, mailing apps, etc.