Index of UX guidelines for Windows Runtime apps

Applies to Windows and Windows Phone

Use this index to quickly find the user experience (UX) guidelines that can help you design a great Windows Store app. If you haven't already, start by reading Meet Windows Store apps and Defining vision.

For a tutorial on UI design and implementation, see Windows Store app UI, start to finish (JavaScript and HTML or C#/C++/VB and XAML).

Click to download a Portable Document Format (PDF) file that contains all the UX guidelines.

Click to download the guidelines

In this article

Animations

Purposeful, well-designed animations bring apps to life and make the experience feel crafted and polished. Tie experiences together and help users understand context changes by using visual transitions.

 

Contracts and charms

Weather app and Search pane

Contracts are the glue that binds Windows Store apps together and to the system UI. Two apps that have implemented the same contract can work together to complete a broad or complex scenario. Some contracts, such as the Share contract, are represented by charms. In addition, the Search, Devices, and Settings charms provide a consistent menu for common tasks.

See a complete list of app contracts.

 

Controls

Video player app with controls

Design your app's UI to showcase its content. Minimize distraction and help immerse users in the content by leaving only the most relevant elements on screen. Following these guidelines will help you provide a consistent, elegant, and compelling user experience.

 

Files, data, and connectivity

A file picker used to open a file from a folder on the DesktopAccess folders, files, and data from you app. To allow users to access data from an account or in cloud services like Microsoft OneDrive, you can provide them with a signed-in experience. Include app-data roaming in your app to give a seamless experience across devices.

 

Globalization and localization

bi-directional UI on a tile

Windows is used worldwide, so design your app with that in mind. Separate resources like strings and images from their code, to help make localization easy.

 

Help and instructions

Instruction to deliver candy to Om Nom in Cut the Rope app

Provide help or troubleshooting tips to your users, and teach them to interact effectively with your app.

 

Launch, suspend, and resume

Splash screen for People app

Create an inviting launch experience with a customized splash screen. And design your app to suspend when the user switches away from it and resume when the user switches back to it.

 

Layout and scaling

grid layout of an app

Design your app's layout to promote easy navigation, and choose the best place for all your UI elements. Create great app experiences for every form factor and every viewing option your users have.

 

Text and input

Segoe UI

The proper use of font sizes, weights, colors, tracking, spacing, and text-box controls can help give your Windows Store app a clean, uncluttered look that makes it easier to use.

 

Tiles and notifications

Tiles on the Start screen

A tile is the front door into an app. Sitting on the Start screen, it's an extension of the app and can provide much more personal and engaging info than a traditional icon. Invest in designing a great tile to draw people into your app. Provide fresh content through live tiles and notifications to help people feel connected to your app.

 

User interactions

Windows Store app touch interactions

Design interactions that keep the user in control, and make use of the screen or device edge to help users find commands with confidence.

 

Related topics

Windows Store app UI, start to finish (HTML)
Windows Store app UI, start to finish (XAML)

 

 

Show:
© 2014 Microsoft. All rights reserved.