Navigation Patterns to Develop Windows Store Application

Introduction

In my last article we saw essential planning for Windows Store apps. In this article we will dig into various navigation patterns available to develop Windows Store applications. As developers we all unserstand  that navigation is an important part of any application development. In this article we will see the navigation patterns best suited for each kind of Windows Store application.

To improve the user experience, navigation among application content is most important in any application. Navigation is the sole to provide a great application to users. If your application provides easy navigation then your user will feel comfortable with your application. So let's proceed with navigation patterns in Windows Store applications.

1. Hierarchical Navigation Pattern

As a developer you know what is meant by hierarchical which means putting our content in multiple levels. For example we might first have categories and then we can divide those categories into sub-categories with a description for each sub-category.


From the above diagram it is clear to you what is meant by hierarchy. In this hierarchical pattern first we have a "hub" page which is the core of the Windows Store application. Next to the hub page we have various "section" pages which are on the second level of the application and finally to describe every section of section pages we have the "details" page for every section. This pattern can be used for video and audio applications where we have large collections of movies and/or songs. In my next article I'll talk about the template to use this pattern.

Hub Page

This page is the topmost page in the Hierarchical Navigation pattern. We can say this is the start page for a Hierarchical Navigation pattern in your Windows Store application. This is a single page at the top in the system. This page describes our entire Windows Store application on a single page. Whenever the user taps or clicks in a section of the hub page it will be redirected to the corresponding section page.

Section Pages

These are the second level of the Hierarchical Navigation pattern. These pages can be no of which describe each category. These pages are mainly used to divide the Hub page contents into categories. Here on those pages we can take advantage of grouping and panorama styles of development. When the user taps or clicks on any section of the section pages then he will be redirected to the details page related to the tapped or clicked section page.

Details Pages

These pages are at the bottom of the Hierarchy. These pages are mainly used to divide the section into details. Here we can describe the section page category in detail.

2. Flat Navigation Pattern

This is the second navigation pattern for Windows Store applications. In most cases where we have a minimum of content to show in our application we can use this navigation pattern in our Windows Store application. From word "Flat" it is clear to you it's a very basic and simple navigation pattern where we are simply giving a link to navigate to specific content in the application. We all are familiar with the pattern if you have developed Windows Forms applications or ASP.NET websites you most use this navigation pattern to redirect the user to pages or a form using menus.



From the above diagram it is clear to you what the Flat Navigation Pattern is. We are very familiar with this navigation pattern. Generally we see a direct link to another page or tabs on the page; that is nothing but the Flat Navigation Pattern.

Content Pages

Content pages are the heart of Flat Navigation systems where each content page shows some content related to the title specified on tabs or menus.

Top App Bar

In a Windows Store application we have the navigation control "Top App Bar". This control is mainly used to provide the flat navigation to our Windows Store application. Like menu controls in ASP.Net we Top App Bar in Windows Store application. We will discuss the App Bar control further in future articles.

3. Split Navigation Pattern

This is one of the most popular navigation patterns used in Windows Store application development. If you are using mail applications like GMail, Yahoo etc. then you will see this navigation pattern used to display the master list on the left side and the details about the topic on right side.



From the above diagram it is clear to you how the split navigation pattern is. Where we have a list of items on the left side and when we click on any item the corresponding item description is loaded on the right side pane.

Conclusion

Here I'm ending this description about navigation patterns. I hope you like this topic about navigation patterns. In my next article I'll come back with the templates provided by Visual Studio for each navigation pattern.