Basics of navigating in Windows store applications

Ensuring that users can quickly and easily access the content they need is an essential feature of any new application. This means that navigation does not interfere with user actions before users need to navigate, and it is not necessary to force users to make choices that are difficult to reverse. This is a UI design technique called "content is on top of layout". The best way to enforce this design pattern is to place most of the navigation directly into the content. This can be easily achieved in Windows store applications because they follow this navigation design principle.

Windows App Store Application Navigation overview

In the Windows store application, developers place navigation into content to gain a smooth and fluent experience by using one of the navigation modes as users struggle to read content:

Layered

Plane

Split/single-page applications (SPA)

Visual Studio 2012 supports all three navigation models through a set of basic application Templates: Grid, split, and navigation (HTML only). In an HTML application, each template has a navigator.js file that contains code to perform navigation between pages and to manage the back button. In a XAML application, navigation is built into the event model.

Layered navigation Mode

Relational data is ideal for layered navigation. This is because, in general, you must traverse the content of the relationship in a particular order (for example, in the master/detail scenario), otherwise there will be no meaning. But this is not always the case, and the plane navigation is useful here (this will be covered in more detail later). Although related data can exist at multiple levels, depending on usability research, placing more than three levels directly into the navigation system can make it difficult for users to use the data. After careful study of navigation availability, the Windows design language team created a tiered navigation system that includes the following three levels of navigation:

Center: This is the startup phase of the data (including the front and center main data). It is usually a list of main items, such as music artists. From this list, users can drill down to specific information about each artist. The officially released Visual Studio 2013 (currently previewed version) introduces a new "center" template for creating reliable navigation scenarios.

Section: This is a level two view that contains all members of a particular group selected by the user on the center page. For example, browsing all albums for a particular artist is part of the navigation.

Details: This contains the basic details of a particular item-for example, information about a particular song in the album or a picture in a set.

Examples of these three styles are shown in the context of the CNN application in Figure 1, figure 2, and Figure 3.

Figure 1 "Center" navigation level

Figure 2 "partial" navigation level