Flat navigation, start to finish (HTML)

Article
04/19/2016

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Use a flat navigation pattern for your Windows Store app when it has a small number of pages and its information is not organized in a 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. However, if your app provides a variety of experiences and content with organization and structure that should be traversed in a preferred sequence or order, have a look at the Hierarchical navigation, start to finish.

Here, we cover how to create a Windows Store app using JavaScript that uses the flat navigation pattern and meets all basic Windows Store certification requirements, from start to finish. This includes:

Image resources to expose your app throughout the operating system
App bars to support navigation and commanding
Settings to provide privacy, help, and other app info
Data roaming to sync your app across sessions and devices
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 flat structure alongside a wireframe of the flat navigation pattern in a Windows Store app.

A basic implementation of the flat navigation pattern

Wireframe of the sample app.

As these images demonstrate, 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, with no branching.

Use the navigation app bar (shown in the wireframe above) for fast 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 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 (see App UI, start to finish), helps you eliminate the clutter of persistent controls and lets users focus on the important content in your app.

The basic Flat navigation sample is a starting point for you to fill with your content and experiences. It demonstrates the principles, recommendations, and implementation details discussed here in an app that meets all basic Windows Store certification requirements. As you can see below, the sample contains two pages: a home page that introduces the app, and a second page where you can lay out your wares. See how we put our guidance into practice. Then you can save some time, and use this sample as the foundation for your inspiration!

Sample app showing page 1

Sample app showing page 1 with the navigation app bar

Sample app showing page 2

Windows Store compliance

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

As you develop your app, consider the Windows and Windows Phone Store Policies and try to avoid common certification failures.

Open the Flat navigation sample or start with the Navigation App project template in Visual Studio. If you like, you can review these template overviews:

JavaScript project templates for Windows Runtime apps summarizes the implementation details about the navigation model, data model, handling of view state, and so on.
JavaScript item templates for Windows Store apps: includes commonly used code that can reduce development time.

Add single-page navigation

Goes into detail about how the PageControl object supports single-page navigation. Adding Page controls explains the various ways they can be implemented.

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.

Add UI and images

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.

	Choose images to represent your app 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. Store logo Displayed with your app's listing in search results and with the app's description in the listing page. Logo Displayed in the square tile for the app on the Start screen. See Creating tiles and badges and App tiles and badges sample. Small logo The small logo appears with your app's display name in search results that are returned on the Start screen. It also appears in the list of searchable apps, and when the Start page is zoomed out. Splash screen Displayed when an app is launched, and dismissed as soon as the app is ready for interaction. The splash screen is composed of an image and a background color, both of which can be customized. See Adding a splash screen and Splash screen sample.
	Add file or image resources Follow these instructions for naming and organizing your file resources in folders.
	Optimize images for different screen resolutions Create image resources for your app, add them to your project, and identify them in the application manifest.
	Add app bars Present 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. For a more detailed example, see HTML AppBar control sample.
	Add app settings Provide access to all settings relevant to the user's current context. Customize as required. See Application settings sample. The companion app includes both a privacy policy and help content that are accessible from the Settings charm.

Roam app data

Manage app data

Manage application data, including runtime state, user preferences, and other settings. This data is created, read, updated, and deleted when the app is running.

Roam application data

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.

Globalize

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.

Learn about 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.

Localize the package manifest

Localize your app's display name, description, and other identifying features, which are described in the application manifest.

Globalize your app

Adapt your software for additional languages, markets, cultures, and regions.

Support accessibility

Declare your app as accessible only if you have specifically engineered and tested it for accessibility scenarios.

Test 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.

Declare 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 Windows Store requirements. Do this whenever you add major functionality to your app.

You’re done with development tasks and are ready to submit your app to the Store!

Target your app to the right audience before you submit.
Make your app's description as detailed as possible so that it clearly represents what your app does.
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.