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 understand 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 that 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 of 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 the 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 the 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 panel.
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.