Flat navigation pattern
[This documentation is preliminary and is subject to change.]
Use a flat navigation pattern for your Windows Store app when it has a small number of pages and an information architecture with no organizational hierarchy. In other words, when the pages, tabs, and modes are logical peers.
Your app should let users focus on the importance of what is in the app, not the where or the why. if your app doesn’t have a lot of information density, many pages, or scenarios that need hierarchy and structure, consider a flat structure that lets users quickly navigate between pages in your app.
Here's a diagram that shows a basic implementation of the flat navigation pattern.
Sometimes you want to go where everybody knows your name: As shown in the previous image, the flat content structure defined by this pattern requires that each page in the app be accessible from every other page. A user can move forwards and backwards randomly through the pages, but there is no branching.
The navigation app bar is useful for switching between pages in flat navigation apps. 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).
Here's a screen shot from the sample app that accompanies this topic. The sample demonstrates how the navigation app bar and the flat navigation pattern work best together for fast switching between a small number of pages or tabs.
Here's how our Calculator app implements the flat navigation pattern. Note how it uses a persistent navigation bar instead of the standard transient navigation bar. This is an example of how the Windows Store app platform can adapt to specific scenarios unique to your apps.
 |  |  |
| Standard calculator page | Scientific calculator page | Converter calculator page |
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.
Prerequisites
If you're new to developing Windows Store apps using JavaScript, have a look through these dev center topics to get familiar with the technologies discussed here.
-
Create your first Windows Store app using JavaScript
Use JavaScript with HTML5 and Cascading Style Sheets (CSS) to build a basic Windows Store app.
-
Developing Windows Store apps using JavaScript
Get familiar with everything from the Start screen to UI layout and controls, in Windows Store apps using JavaScript.
Flat navigation sample
Coming soon!
In addition to the samples and code snippets included in the topics we reference below, we'll work with the "Flat navigation sample". This Windows Store app sample demonstrates all the features and concepts discussed here in an app that meets all basic Windows Store certification requirements. The sample includes principles, recommendations, and implementation details for the flat navigation pattern, app bars and commanding, settings charms, app state, roaming, text and image assets, view states and orientations, and globalization. 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's a wireframe diagram that shows the basic functionality of the sample. It includes two pages: a home page that introduces the app, and a second page where you can lay out your wares. Extend the app with additional pages, as required.
Check back soon for the sample app!
For now, here's a loose outline of tasks to help you build a basic app that follows the best practices for building a Windows Store apps using the flat navigation model. We cover navigation details, and the minimum functionality required for store compliance. Each task links to corresponding info in the Windows Store app dev center.
We recommend that you review each step if you're new to Windows Store app development, or you are unfamiliar with the various aspects of store compliance. You'll find related details grouped together.
The guidelines, tasks, and sample code here are specific to developing Windows Store apps using JavaScript. For the Windows Store app using C++, C#, or Visual Basic version, see Flat navigation pattern.
Prep and learn
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.
These steps are an introduction to the concepts of navigation and store compliance.
 |
Choose the best navigation pattern for your app and its content. For more information, see Navigation patterns. For this tutorial, we use the Basic flat navigation companion sample. Download the sample and try things out as you follow the steps here, or jump right in and use it as a template for the design and development of your own app. |
 |
Ensure you consider all Windows 8 app certification requirements and try to avoid common certification failures as you develop your app. |
 |
Let the navigation examples in these case studies and idea books inspire you:
|
Now we review some of the details for the UI and functionality included in the flat navigation companion sample.
Some of these details might not apply to your app. Pick and choose the details that apply to you.
Navigation
|
Covers the recommended navigation models for Windows Store apps using JavaScript. |
|
Learn techniques for navigating between pages in your app. |
|
The companion sample for this topic is derived from the Navigation App project template in Visual Studio, so it might be helpful to also review these topics.
|
Image resources
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 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.
|
Optimizing images for different screen 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.
|
|
Quickstart: Using file or image resources Follow these instructions for naming and organizing your file resources in folders. |
App bars
The companion app provides navigation commands that are accessible from the navigation bar. Other commands are included in the standard app bar.
|
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. |
Settings
Depending on the capabilities and declarations in your app manifest, your app might be required to provide a privacy statement through the Settings charms.
The Private Networks (Client & Server) capability is set in the companion app, which requires that a privacy statement be provided. See certification requirement 4.1.
The companion app includes both a privacy statement and help content that are accessible from the Settings charm. The privacy statement must also be accessible from the Description page of your app.
|
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. |
Localization
Be consistent with localization 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.
|
App resources and localization 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. |
|
Localizing the package manifest 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. |
Accessibility
Declare your app as accessible only if you have specifically engineered and tested it for accessibility scenarios.
|
Testing your app for accessibility. 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. |
|
Declaring your app as accessible in the Windows Store If you have tested your app for accessibility, indicate that by checking the Accessibility checkbox on the Selling details page. |
Wrap up
 |
Certify your app with the Windows App Certification Kit. Run the Windows App Certification Kit to help ensure your app fulfills Microsoft 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. |
Want to know more?
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.
Design for different form factors
Learn more about handling different devices, input methods, and screen orientations.
Browse the full list of user experience guidelines.
Samples
- 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
Build date: 6/20/2013
