Language: JavaScript and HTML | VB/C#/C++ and XAML

Windows Store app UI, start to finish (HTML)

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.

StumbleUpon app main page

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 Controls and layout gallery sample

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 icon

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.

step icon

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.

step icon

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.

step icon

Quickstart: Adding HTML controls and handling events

Use HTML controls, such as buttons, check boxes, and drop-down lists.

step icon

Quickstart: displaying text

Use HTML controls such as label, div, paragraph, and text area to display text.

step icon

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.

step icon

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

step icon

Laying out an app page

Learn about the grid system, headers, margins, and spacing, and how these create a consistent experience for the users.

step icon

Guidelines for window sizes and scaling to screens

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.

step icon

Quickstart: Defining app layouts

Create a fluid UI that looks good and functions well at any size.

step icon

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.

step icon

Guidelines for scaling to pixel density

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

step icon

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.

step icon

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.

step icon

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.

step icon

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.

step icon

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.

step icon

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.

step icon

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

store requirements icon

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.

stop icon

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.

 

 

Show:
© 2014 Microsoft. All rights reserved.