August 2013

Volume 28 Number 8

Modern Apps - Navigation Essentials in Windows Store Apps

By Rachel Appel | August 2013

Ensuring that users can quickly and painlessly access the content they want, when they want, is an essential part of any modern app. This means navigation has to stay out of the way until it’s wanted and not force users into hard-to-reverse choices. This is a UI design technique called “content over chrome.” The best way to enforce this design paradigm is to bake most of the navigation directly into the content. This is easy to do in Windows Store apps, as they follow this navigational design principle.

Windows Store App Navigation Overview

In Windows Store apps, developers bake navigation into the content, creating a smooth, flowing experience for users while they’re wading through content, using one of these navigation patterns:

• Hierarchical
• Flat
• Split/single-page application (SPA)

Visual Studio 2012 supports all three navigational models through a set of basic app templates: Grid, Split and Navigation (HTML only). In HTML apps, each template contains a navigator.js file with code that performs navigation between pages as well as code that manages the back button. In XAML apps, navigation is built into the event model.

The Hierarchical Navigation Pattern

Relational data makes a great candidate for hierarchical navigation. This is because most often you must traverse relational content in a particular order—for example, in a master/detail scenario—or it doesn’t make sense. This isn’t always the case, though, and that’s where flat navigation comes into play (more on this shortly). Even though related data can be several levels deep, putting more than three levels directly into a navigation system makes it extremely difficult on users, according to usability studies. After carefully researching navigation usability, the Windows Design Language team created the hierarchical navigation system consisting of these three navigational levels:

• Hub: This is the opening stage of data containing master data at the front and center. This is usually a list of master items, such as music artists. From this list, the user can drill into the specifics of each artist. Upon its release, Visual Studio 2013 (currently in preview) will introduce a new Hub template for creating robust navigation scenarios.
• Section: This is a level-two view that includes all members of a specific group that the user selected from the Hub page. An example of section navigation would be browsing all the albums of a particular artist.
• Details: This includes the nitty-gritty details of one particular item—for example, information about one particular song in an album or an individual photo in a collection.

Examples of these three styles are shown in the context of a CNN app in Figures 1, 2 and 3, respectively.

Figure 1 The Hub Navigation Level

Figure 2 The Section Navigation Level

Figure 3 The Details Navigation Level

If you still believe you need more levels of navigation, consider using the navigational helpers such as semantic zoom or dropdown menus, or other UI components for content filtering and sorting in addition to your regular navigation. I’ll look more closely at these navigational aids later in this article.

The Visual Studio Grid template has the hierarchical navigation with all three levels built right in. All you need to do is retrieve data and plug it into the template for it to work. The data can be as simple as a WinJS.Binding.List or a plain old CLR object (POCO) in C# apps, the same structures as used in the Grid, Split and Navigation app templates in Visual Studio.

Notice that all sections of apps that use a hierarchical pattern contain a back button, which is a critical part of navigation in Windows Store apps, as well as Web apps. Having a way to back out and undo the previous navigation command enhances and eases the UX.

The Flat Navigational Pattern

Sporting a navigation bar at the top of the screen, flat navigation apps simply show several individual choices that take you directly to some content that might or might not be related. Figure 4 illustrates a great example of this in a weather app, with tabs at the top of the screen. As you tap or click one, you go directly to the associated page. Flat navigation is great for nonrelational content. For example, the tabs in the weather app take you to unrelated pages of your choosing, rather than applying any formal structure.

Figure 4 Flat Navigation in a Weather App

If you’ve determined that you need deep levels of hierarchical navigation, starting with the flat navigation system could help. Use the top navigation bar as a hub page. When the user makes a choice, the app should navigate to the requested place. Using this technique adds just one level of navigation, so you might want to incorporate navigational helpers as well.

The Blank template in Visual Studio is the most conducive to flat navigation, although you can add a top nav bar to any project type to institute flat navigation.

Incorporating flat navigation into your app is as easy as adding a Windows Library for JavaScript (WinJS) NavBar control, a new control from Windows 8.1. Figure 5 shows an example in HTML.

Figure 5 Using the WinJS NavBar Control

<div id="NavBar" data-win-control="WinJS.UI.NavBar">
  <div id="GlobalNav" 
    data-win-control="WinJS.UI.NavBarContainer">
    <div data-win-control="WinJS.UI.NavBarCommand" 
     data-win-options="{
      label: 'Home',
      icon: 'url(../images/homeIcon.png)',
      location: '/html/home.html',
      split: false
    }">
    </div>
    <div data-win-control="WinJS.UI.NavBarCommand" 
     data-win-options="{
      label: 'Your apps',
      icon: WinJS.UI.AppBarIcon.favorite,
      location: '/html/yourapps.html',
      split: false
    }">
    </div>
  </div>
</div>

The NavBar control is available in WinJS only, so to create a top nav bar in XAML, you must code an app bar and style it for display at the top of the page, as this example demonstrates:

<Page.TopAppBar>
  <AppBar x:Name="topAppBar">
    <Grid>
      <StackPanel Orientation="Horizontal" 
            HorizontalAlignment="Right">
        <Button Style="{StaticResource SaveAppBarButtonStyle}"
          Click="Button_Click"/>
        <Button Style="{StaticResource UploadAppBarButtonStyle}"
          Click="Button_Click"/>
      </StackPanel>
    </Grid>
  </AppBar>
</Page.TopAppBar>

You can have both a top nav bar and a standard bottom app bar, and you can add menus, dropdowns, and other navigational helpers to both.

The Split/SPA Navigational Pattern

Just as it sounds, an SPA app consists of one page for the entire app. Technically, SPAs aren’t really just one gigantic page; rather, they consist of one main page where the app loads sections of content and commands at run time, dynamically, driven by user activity. In Windows Store apps built with JavaScript, you can implement SPA apps by managing app components called page fragments.

The Split navigation template in Visual Studio 2012 reveals an SPA template similar to the Grid template; however, the Split template contains two—rather than three—levels of navigation. This means instead of hub/section/details, the Split template starts at the section level, showing a listing of items, and as the user selects one, its details load into the page alongside the other items.

SPA navigation in HTML apps is done by first creating a <div> or container element into which the other pages can load themselves. You can use the WinJS PageControlNavigator control (defined in navigator.js) to create this container:

<div id="contenthost" 
  data-win-control="Application.PageControlNavigator"
  data-win-options="{home: '/pages/home/home.html'}"></div>

Once the PageControlNavigator is in place (by default in the Grid, Split and Navigation templates), the code from \js\navigator.js does all the work of loading pages into the PageControlNavigator without modifications on your end.

The SPA pattern discussed here works great in Web sites and other app types—including Windows Store apps, of course—and the SPA app is fast becoming a favorite of modern app developers, including those on other platforms.

Navigating with Semantic Zoom

Have you ever used a data-intensive app in which menus or links don’t seem to help get you to the data you need? That’s where semantic zoom comes into play. Using semantic zoom allows you to repurpose and visualize data in a different and more navigable way. This could be either looking at data from a 13,000-foot overview (this is how the Windows start page itself works), or it can be showing the data in aggregate groupings so users can find what they’re looking for quickly. Netflix, as demonstrated in Figure 6, makes good use of semantic zoom to indicate movie categories. Semantic zoom is particularly useful when you have a large volume of data.

Figure 6 Netflix Makes Great Use of Semantic Zoom

You can implement semantic zoom in Windows Store apps as a control in both WinJS and XAML apps. Here’s an example in HTML/JavaScript:

<div data-win-control="WinJS.UI.SemanticZoom">  
  <!—Original view of the data, for example, the list of all movies -->
  <!-- The zoomed-out version of the data, as shown in Figure 1. -->
</div>

Here’s an example in XAML/C#:

<SemanticZoom>
  <SemanticZoom.ZoomedInView>
    <!—Original view of the data, for example, the list of all movies -->
  </SemanticZoom.ZoomedInView>
  <SemanticZoom.ZoomedOutView>
    <!-- The zoomed-out version of the data, as shown in Figure 1. -->       
  </SemanticZoom.ZoomedOutView>
</SemanticZoom>

Users can invoke semantic zoom by using a pinch gesture with two fingers on touchscreen devices or with the mouse+scroll wheel. For more on the SemanticZoom control and other Windows Store app controls, see my column, “Mastering Controls and Settings in Windows Store Apps Built with JavaScript,” at msdn.microsoft.com/magazine/dn296546.

Navigation by Sorting, Filtering and Searching

Sure, you could argue that filtering isn’t true navigation, but being able to sort data will most certainly help users limit their selections and find desired data quickly with less hassle, which is the point of navigation. At the very minimum, sorting and filtering can provide much-needed enhancements to standard app navigation. In the case of Windows Store apps, filtering is a means to enhance the app’s primary navigational scheme. Fine-tuning the visualization via small UI controls really makes the UX precise and enjoyable for the user. 

In Windows Store apps built with JavaScript, you can implement dropdowns for sorting and filtering by using the standard HTML <select> element, like this:

<select>
  <option>Appels</option>
  <option>Bananas</option>
  <option>Grapes</option>
  <option>Oranges</option>
  <option>Pears</option>
</select>

In XAML apps you call the same control a ComboBox, and it looks similar to this code:

<ComboBox x:Name="Fruits" 
    SelectionChanged="Fruits_SelectionChanged" >
  <x:String>Appels</x:String>
  <x:String>Bananas</x:String>
  <x:String>Oranges</x:String>
  <x:String>Grapes</x:String>
  <x:String>Pears</x:String>
</ComboBox>

The Windows Store app itself makes great use of dropdowns to filter out apps. Navigate to any category and you’ll find filters for price and relevance as illustrated in Figure 7. During searches in the store, even more filters appear.

Figure 7 The Windows Store App Filters

Finally, let’s not forget how search is an important part of navigation. Everybody uses search—and not just through the popular Web search engines. Everybody loves getting specific content delivered right to their fingertips, so make sure that your apps provide this door-to-door service for users. Because search, like the settings charm, is part of the OS, in Windows Store apps you can implement search through a contract.

Other Navigational Helpers

Horizontal scrolling might not seem like it’s part of navigation, but it can be. In Windows Store apps, the panoramic view means that you can add completely separate sections of data all into one, organized, single view. This allows users to scroll to different sections without actually navigating, per se, and is often a staple of news apps where some content is text and other is video. Combine panorama with semantic zoom, and users can jump right to sections of the data they need. Consider apps such as the CNN and ABC news apps, Bing Finance, Netflix and others that extensively scroll long horizontally.

In addition to these navigation helpers, using built-in features of Windows 8 for some activity will cut down on the required amount of navigational elements in the app. For example, rather than building into the app an about, settings or other informational page (traditionally located in the Windows Help menu in programs in previous versions of Windows), you can take advantage of the settings charm to display help and app info. This means you don’t have to supply yet another navigational menu and option, and users benefit by having a consistent theme throughout all Windows Store apps to get to settings and the like.

No More Lost and Confused Users

A rock-solid navigational scheme is an important aspect of modern app—and particularly Windows Store app—development. Without easy-to-use navigation, users will become lost and confused. Fortunately, the built-in templates of Windows Store apps in both HTML and XAML help you create easy-to-use apps for users.

Rachel Appel is a consultant, author, mentor and former Microsoft employee with more than 20 years of experience in the IT industry. She speaks at top industry conferences such as Visual Studio Live!, DevConnections, MIX and more. Her expertise lies within developing solutions that align business and technology focusing on the Microsoft dev stack and open Web. For more about Appel, visit her Web site at rachelappel.com.

Thanks to the following technical experts at Microsoft for reviewing this article: Megan Bates, Ross Heise, Maria Kang and Eric Schmidt