Use a hierarchical navigation pattern for your Windows Store app when it's content can be separated into distinct, yet related, sections or categories with varying levels of detail. This is a common and familiar pattern that works well with a relational information architecture, traversed in a preferred sequence or order.
The navigation pattern you choose depends on the scenarios your app supports. If your app provides a variety of experiences and content with organization and structure, a hierarchical pattern is likely most suitable. However, if your app doesn’t have a lot of information density or organizational hierarchy, have a look at the Flat navigation, start to finish, which is intended to let users quickly navigate between a small set of related pages.
- Image resources to expose your app throughout the operating system.
- App bars to support navigation and commanding.
- Data roaming to sync your app across sessions and devices.
- Settings to provide privacy, help, and other app info.
- Globalization to reach customers in countries and regions around the world.
- Accessibility to help users accomplish tasks regardless of physical ability and input device.
Here's a basic hierarchical structure alongside a wireframe of the hierarchical navigation pattern in a Windows Store app.
The hub is the entry page of your app and is where you can preview the full scope of your app. It showcases one or more sections of content, each with a small sample of items associated with that section. Various criteria (depending on app or user preferences) can be applied to control which sections and items are displayed. Typically, each item will display a preview, summary, or abstract of its content.
From this page, users can navigate to a section or item detail page.
We recommend that you design your hub with a lot of visual variety to engage users and draw them in to the different areas of your app.
Section pages are the second level of an app where a preview, summary, or abstract for items associated with the section are displayed. The items on this page can be displayed in any form that best represents the scenario and content of the section.
Typically, you display more items on this page than on the hub page. Each item links to a detail page.
Detail pages are the third level of an app where most, if not all, content or functionality is displayed for the particular item selected on the hub or section page. Some apps, such as feed readers, might link off to source articles and sites if the content is considered too extensive to display in-app.
Detail pages can contain a lot of information, a single object, such as a picture or video, or other app functionality.
The navigation bar, typically used in flat navigation apps, can also be useful for traversing the content of a hierarchical app. This bar is a transient element that can be revealed at the top edge of the screen when users swipe from the top or bottom edge (right-click with a mouse, Windows Logo Key+Z, or menu key with a keyboard).
Try to build your app such that the content structure itself leads users intuitively through your app without the need for the navigation bar. In cases where this is not possible, use the navigation bar in lieu of the section headers on the hub page and to provide global navigation controls. It should show up on every page and at all levels of the app.
Using the correct navigation pattern, along with the appropriate UI layout, helps you eliminate the clutter of persistent controls and lets users focus on the important content in your app.
Before you start designing and developing your app, plan your app. Take the time to think about who your audience is and what features and activities your app supports. Use the UX guidelines to help you with this.
In addition to the samples and code snippets included in the topics we reference below, we developed a Hierarchical navigation sample. This Windows Store app sample demonstrates the principles, recommendations, and implementation details discussed here in an app that meets all basic Windows Store certification requirements.
See how we put our guidance into practice. Then you can save some time, and use this sample as the foundation for your inspiration!
Here's a brief description of the sample
In the sample, we provide a Windows Store certification-compliant shell, or template, for you to customize as you require. It's a starting point for you to fill with your content and experiences.
Here are screen shots from the sample app that show the basic functionality of the sample. It includes a hub page with various sections, one data-driven section page (Section 3), and item detail pages for that section. Extend the app with additional pages, as required.
For now, here's a loose outline of tasks to help you build a basic app that follows the best practices for building Windows Store apps using the hierarchical navigation model. We cover navigation details, and the minimum functionality required for store compliance. Each task links to a corresponding topic with more detail. Where appropriate, we also identify relevant code in the companion sample.
We recommend that you review each step if you're new to Windows Store app development, or if you are unfamiliar with the various aspects of store compliance. You'll find related details grouped together.
The Windows Store is the primary means of distributing Windows Store apps to customers and connecting those customers to as many great apps as possible. Apps in the Store must comply with the Windows and Windows Phone Store Policies.
The companion sample implements the functionality discussed here and the basic requirements of all Windows Store apps to pass certification, including:
- Splash screen and tile images
- Full support for touch, mouse, and keyboard input
- Support for various window sizes, device orientations, and display sizes
- Roaming and session state
- Optimized for globalization, localization, and accessibility
Here are some general pointers to help guide you and take your little (or not so little) app to market.
Get a Microsoft account and a Windows Store developer account if you don't already have them. You'll need both to get your apps in the Windows Store.
Follow the steps here to create your own flat navigation app. You can start with the accompanying Flat navigation pattern template or you can create a Hub App Windows Store project in Microsoft Visual Studio.
When you've set up your account and built your app, get it into the Windows Store.
Target your app to the right audience before you submit.
Begin the distribution process.
Use the promotion tools available through the Windows Store to help customers discover your app.
Use telemetry data to analyze usage data and improve app quality and performance.
Now we move on to the details of how to implement the UI and functionality for the hierarchical navigation pattern in a Windows Store app.
The companion sample implements all the following items, but to keep things flowing we won't walk through the code here. Each step has a "Find it in the sample" call out to help you find the code quickly.
Some of these details might not apply to your app. Pick and choose the details that apply to you.
With the basics of getting your app to market covered, it's time to review the various navigation patterns commonly used by Windows Store apps and included as templates in Microsoft Visual Studio 2013. These are:
- Flat navigation (discussed in Flat navigation pattern)
- Hierarchical navigation (discussed here)
- Split navigation
Choose the best navigation pattern for your app and its content.
We use the Hierarchical navigation pattern companion sample to show the concepts discussed here, so download the sample and try things out.
After you've confirmed that the hierarchical navigation pattern is the most suitable structure for your app, continue following these steps, or jump right in and use the sample as a template in the design and development of your own app.
Be inspired by the navigation examples in these case studies and idea books.
The companion sample for this topic is derived from the Hub App project template in Visual Studio, so it would be helpful to also review these topics.
Find it in the sample: The PageControl is defined in the file \js\navigator.js and used in \pages\home\home.js and \pages\page2\page2.js.
Specify image resources (visual assets such as splash screen and tile images) for your app on the Application UI tab of the application manifest. To do this, open package.appxmanifest from the Solution Explorer. See Using the Manifest Designer.
Note The companion app includes placeholder images that meet Windows Store requirements. For demonstration purposes, additional images that support accessibility with varied contrast settings, and localization in French (fr-FR) have been included with the template. Most images are provided at multiple resolutions.
Create image resources for your app, add them to your project, and identify them in the application manifest.
Specify images that provide the best experience possible. Include scaled versions for different screen resolutions.
Your app requires a basic set of images to pass store certification.
Follow these instructions for naming and organizing your file resources in folders.
The companion app implements a single command in a standard app bar.
Remember: Try to build your app such that the content structure itself leads users intuitively through your app without the need for the navigation bar. In cases where this is not possible, use the navigation bar in lieu of the section headers on the hub page and to provide global navigation controls. It should show up on every page and at all levels of the app.
Give navigation, commands, and tools to users on demand. The app bar shows commands relevant to the user's context, usually the current page, or the current selection. Customize as required. See HTML AppBar control sample.
Manage application data, including runtime state, user preferences, and other settings. This data is created, read, updated, and deleted when the app is running.
Keep your app's data and state in sync across multiple devices and reduce setup tasks and repetitive work for the user on their other devices. Windows replicates data to the cloud when it is updated, and synchronizes data to the other devices on which the app is installed.
Provide access to all settings relevant to the user's current context. Customize as required. See Application settings sample.
Make your app's description as detailed as possible so that it clearly represents what your app does.
Be consistent with globalization and make sure your screen shots demonstrate that you've localized your app. Keep in mind that languages are not the same as markets. See Globalizing your app for more help.
Design Windows Store apps so that their resources can be independently maintained and localized, and also customized for different scaling factors, accessibility options, and other user and machine contexts. See Application resources and localization sample.
Localize your app's display name, description, and other identifying features, which are described in the application manifest.
Adapt your software for additional languages, markets, cultures, and regions.
Declare your app as accessible only if you have specifically engineered and tested it for accessibility scenarios.
Discover the accessibility testing tools, included with the Windows Software Development Kit (SDK) for Windows 8, that help you verify the accessibility of your app.
If you have tested your app for accessibility, indicate that by checking the Accessibility checkbox on the Selling details page.
Run the Windows App Certification Kit to help ensure your app fulfills Windows Store requirements. Do this whenever you add major functionality to your app.
You’re done! Your app should be compact, free of clutter, and easy to navigate.
Sit back and bask in your success.
Learn more about what experience you want to provide your users.
Learn more about the wide range of abilities, disabilities, and preferences of your users.
Learn more about handling different devices, input methods, and screen orientations.
Browse the full list of user experience guidelines.
- HTML AppBar control sample
- Navigation and navigation history sample
- App tiles and badges sample
- Splash screen sample
- Application settings sample
- Application resources and localization sample