Windows Store app UI, start to finish (HTML)

[ 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 ]

How do you make a great user interface? What is the best layout for your app? What makes an app easy and intuitive to navigate?

Ask these questions to kick start the design phase of your app's development. Then, learn how to implement your design.

Using guidelines, best practices, and examples, we'll help you take full advantage of the UI capabilities of Windows 8.1. You can define your app's UI so that it's intuitive, beautiful, and consistent with other Windows Store apps.

The following sections are an outline of tasks to help you design the UI for your app. They follow the best practices described in the UX guidelines.

If you're new to Windows Store app development, or if you are unfamiliar with app layout, navigation, controls, and commands, you might find it helpful to review each step. Otherwise, feel free to browse around. We've grouped related aspects of app UI development. The guidelines, tasks, and sample code here are specific to developing Windows Store apps with JavaScript and HTML. For the C#/VB/C++ and XAML version, see Windows Store app UI, start to finish (XAML).

The sample

The Controls and layout gallery sample includes all the UI elements we talk about here. We'll refer to this companion sample often and point you to the places in it where specific features are implemented.

The sample app is a gallery of Windows Store app controls. With the sample, you can browse the controls and the code for implementing each control. You can also see how we implemented each of the steps in the below sections.

Step 1: Get set up and learn what goes where

Before you start to design and develop your app, make sure you do the planning. Take the time to think about what your app is great at, who your audience is, what scenarios you want to implement, and what features you'll support. For more info about how to plan your app, see Defining Vision.

Start by deciding what navigation strategy you want your app to use. In this tutorial, we start from the Hub template. To design and develop the UI of your app, you can download the template and try things out as you follow the outline. For more information, see Navigation patterns and Hierarchical navigation (HTML). Or, if you want to jump right in and explore the code, skip directly to the Controls and layout gallery sample.

Laying out your UI What goes where in a Windows Store app? Learn the guidance for laying out the UI. In the sample, we'll show how we used the guidance to design our app. On the main page, we put the following elements on the canvas: List of groups of controls. These are grouped by function to make browsing for types of controls quick. List of all controls. These are sorted alphabetically by name to make searching for a specific control easy. On each page, we added a navigation element to the top app bar so that you can quickly jump back to the home page. Each section page follows the standard hierarchical navigation pattern. It includes a list of control items and links to the detail page for each. Each section page and each detail page includes a back button that takes you back to the page you came from. On each detail page, we put the key content on the main screen of the app: Description of the control Examples of the control, if it can be displayed on the canvas Code snippets for implementing the control

 

Step 2: Choose controls to add

Adding controls and laying out your app go hand-in-hand. You need to know what controls to add, and you need to design your layout before you choose controls. Understanding how controls work helps you make good layout decisions.

In this tutorial, we'll first look at individual controls. In step 3, you'll learn how to arrange them in a layout. If you prefer to learn about designing the layout first, you can skip ahead to the next section and come back to controls later.

Check out the sample code to see how we added each control in the gallery.

	Controls by function Controls list Familiarize yourself with the complete list of controls that are available and the purpose of each, and then choose the controls that you'll need for your app.
	Quickstart: Adding HTML controls and handling events Use HTML controls, such as buttons, check boxes, and drop-down lists.
	Quickstart: displaying text Use HTML controls such as label, div, paragraph, and text area to display text.
	Quickstart: Text input and editing Use HTML controls such as text box, text area, password input box, and rich edit box/rich text box to enter and edit text.
	Quickstart: Adding WinJS controls and styles Use controls in the Windows Library for JavaScript, such as the ListView control, rating control, and flyout control.

 

Step 3: Build the layout

	Laying out an app page Learn about the grid system, headers, margins, and spacing, and how these create a consistent experience for the users.
	UX guidelines for layout and scaling A user can resize an app from the minimum width to full screen and can display it on different size screens, with different resolutions, and in different orientations. You can design your app to look great at any size. In the sample, we used the default minimum width of 500 pixels.
	Quickstart: Defining app layouts Create a fluid UI that looks good and functions well at any size.
	Quickstart: Designing apps for different window sizes Learn how to change the minimum width of an app from 500 pixels to 320 pixels and change your design so that the app looks good and functions well at narrow widths. Learn how to design a horizontally panning app to change to a vertical layout any time the app height is greater than the width.
	UX guidelines for layout and scaling As the pixel density of a display device increases, the physical size of objects on screen get smaller. When UI would otherwise be too small to touch and when text gets too small to read, Windows scales the system and app UI to a scale percentage. Learn how to ensure your app looks great when scaled.

 

Step 4: Choose where to put commands and how to use charms

	Command patterns Learn where to put commands - on the screen, in pop-ups, in dialogs, or in app bars - and decide where your app's commands should go.
	Guidelines and checklist for app bars Quickstart: Adding an app bar with commands Guidelines for navigation bars Quickstart: Adding a nav bar Learn about grouping commands, consistent placement, styles and icons, and other important guidance for command app bars and navigation app bars. In the sample, we implemented a home button on the top app bar to help with navigation.
	Guidelines and checklist for adding context menus Use context menus for immediate access to actions, like Cut and Paste. Keep context menus short and relevant to the selection.
	Guidelines and checklist for search Quickstart: Adding search to an app Learn when to use the in-app search box control and when to use the search contract.
	Guidelines for sharing content Quickstart: Sharing content If your app has content to share, it's a share source. If your app can receive content from other apps, it's a share target.
	Guidelines for app settings Quickstart: Adding app settings Be smart about how you use the Settings charm. Keep your settings simple and few. Know the right settings for the Settings pane.
	Guidelines for app help Guidelines for instructional UI Quickstart: Add app help Learn when and how to implement app Help in the Settings pane and learn when to use other means to provide help, such as tips, demos, or redesigned UI.

 

Step 5: Wrap it up

	Run the Windows App Certification Kit. Recommended. Running the certification kit helps you make sure your app fulfills Windows Store requirements, so you should do this when you've added major functionality to your app.
	You’re finished! Now that you've considered the UX guidelines and designed the UI, your app should reflect the best practices to provide a great experience for users.

 

Next Steps

Now that you understand the basics, take a look at some of the other examples in the App features, start to finish series.

Want to know more?

Index of UX Guidelines

Browse the full list of user experience guidelines.

User interaction: Touch input... and beyond

Follow the start to finish story for designing the user interaction experience for your app.

Create your first Windows Store app

Follow this tutorial series if you're new to Windows Store app development and want to get started with your first app.