Index of UX guidelines for Windows Store apps

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

See Design and create a Windows Store app, start to finish for a tutorial on UI design and implementation.

Microsoft design

Windows Store apps are the focal point of the user experience on Windows 8, and great Windows Store apps share an important set of traits that provide a consistent, elegant, and compelling user experience.

• Layout and navigation: Consider how the layout of your UI affects how users navigate your app. See Navigation design patterns.
• Layout and commanding: Place commands consistently to instill confidence and to ease user interaction. See Commanding design patterns and Laying out your UI.
• Layout and page design:  Use the grid to help layout your app pages to adhere to the Windows 8 silhouette.
  • Laying out an app page
  • Choosing a layout for JavaScript apps
• Animations: Purposeful, well-designed animations bring apps to life and make the experience feel crafted and polished. Help users understand context changes, and tie experiences together with visual transitions. For more info, see our guidelines on these animations:
  • Drag and drop
  • Edge-based animations
  • List animations
  • Content transition animations
  • Page transition animations
  • Transient UI animations
  • UI animations
• Typography: See Guidelines for text and typography.

Touch interaction

Use touch interactions that keep the user in control and confident, and leverage the screen or device edge so people can confidently find commands. See Touch interaction design.

• General user interaction guidance: Provide a consistent and performant set of user interactions. See Guidelines for user interaction.
• Touch targeting: Think about the size and location or your touch targets.  See Guidelines for touch targeting.
• Visual feedback: Provide clear visual feedback for user actions.  See Guidelines for visual feedback.
• Semantic Zoom: Help your users navigate large amounts of content, visually showing how "zoomed in" or "zoomed out" the content is. See Guidelines for Semantic Zoom for user interaction and see below for our SemanticZoom control.
• Swipe and cross-slide: Use this standard interaction to select items from a list or grid. See Guidelines for cross-slide.
• Optical zoom and resizing: Let users zoom in and out for better views of their content. See Guidelines for optical zoom and resizing.
• Panning: Help users navigate your app with panning. See Guidelines for panning.
• Rotation: Provide responsive feedback when your users use touch to rotate moveable content on screen. See Guidelines for rotation.
• Selecting text and images:  Make your users confident when they select text and images. See Guidelines for selecting text and images.
• Mouse interaction:  Create a great mouse experience for users without touch screens. See Guidelines for mouse interactions.
• Keyboard interaction:  Provide a complete interaction experience for users who either prefer using a keyboard or have certain disabilities that require a keyboard. See Responding to keyboard interactions.
• Pen/stylus interaction:  Support a great inking experience for users with pen/stylus devices. See Responding to pen and stylus interactions.

Scaling

These features help you create great experiences for every form factor and every viewing option your users have.

• Flexible layouts: Design for different form factors and let users manipulate the content to fit their needs and preferences. Think of landscape view first so that your app will run on all form factors, but remember that some screens rotate, and users can resize windows and place multiple apps on the screen at the same time. Design your app to adapt and be functional at different sizes and orientations. See Guidelines for resizing.
• Window resizing: Design for your users' multi-tasking needs. Users want to use your app while they chat, surf the web, watch a movie, or whatever, so make sure your app is useful and maintains context when a user resizes it and places it side-by-side with other apps. See guidelines for resizing to narrow layouts.
• Scaling to screens:  Design an app UI that looks great on devices of various sizes—from a small tablet screen, to a medium laptop screen, and all the way up to a large desktop or all-in-one screen. See Guidelines for scaling to screens.
• Scaling to pixel density: Make sure the images in your app look great when scaled. Windows scales your app to ensure consistent physical sizing regardless of the pixel density of the device. See Guidelines for scaling to pixel density.

Contracts, charms, and capabilities

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 are represented by charms. See a complete list of app contracts. Capabilities identify the device features your app uses.

• Search: Let your users search through your app's content quickly from anywhere in the system. See Guidelines for search.
• Share and data exchange: Let your users share your app's content with other people they care about, receive shared content from other apps, and display it to your users. See Guidelines for sharing content, Guidelines for clipboard commands, and Guidelines for creating custom data formats.
• File pickers: Let your users load their files from and to the local PC, connected storage devices, HomeGroup, and other apps into your app. You can also provide a File picker extension so that other apps can load your apps' content. See Guidelines for file pickers and Guidelines for file picker contracts.
• Location-awareness:  Ensure a clean, non-disruptive, privacy-respectful experience with geolocation. See Guidelines for location-aware apps.
• Device-awareness: Microphones, cameras, location providers and text messaging services can access the user's personal data or cost the user money, so Windows Store apps have features to ensure the user has control over these sensitive devices. If your app accesses sensitive devices, design it to account for how a user may enable and disable device access. See Guidelines for using sensitive devices and Guidelines for building a device picker.
• Print dialog: Create a custom UI when your users print content from your app. See Guidelines for a custom print UI.
• Proximity gestures: Let your users connect two or more devices together with a "tap." This gesture lights up experiences where you expect multiple users to be physically close, as with multiplayer games. See Guidelines for tapping.
• Multimedia: Ensure your app works well with multimedia. See Guidelines for developing audio-aware apps and Guidelines for the camera UI.

Tiles and notifications

A tile is the front door into an app. Sitting on the Start screen, it is an extension of the app and can provide much more personal and engaging information 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 let people feel connected to your app. Make sure you help your users connect with the people and devices that they care about.

• App tiles and secondary tiles: Use your app's tile to engage users, to encourage them to use your app, and to keep your app feeling fresh and relevant. You can promote interesting content and deep links from your app on the Start screen and let your users launch your app directly into a specific experience within your app. See Guidelines for tiles and badges and Guidelines for secondary tiles.
• Notifications: Help your users be aware of time-sensitive or personally relevant content through toast notifications, and invite them back to your app when it is not in the foreground. See Guidelines for toast notifications, Guidelines for push notifications, Guidelines for periodic notifications, Guidelines for scheduled notifications.

Controls

Design your app's UI to showcase the content. Minimize distraction and help people get immersed 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.

Roaming to the cloud

Create a continuous experience across devices by roaming data and settings that lets people pick up a task right where they left off and that preserves the UX they care most about, regardless of the device they're using.

• Roaming: Make it easy for users to use your app everywhere, from their kitchen family PC to their work PC to their personal tablet, by maintaining settings and states with roaming. Additional guidance on roaming can be found in Managing app data and Guidelines for roaming app data. To learn how to store and retrieve settings and files from the roaming application data store, see Quickstart: Roaming app data.
• Settings: Consolidate all of your app's settings on one UI surface, and let users configure your app via common mechanism they are already familiar with. See Guidelines for app settings.
• Single sign-on:  Ensure that users can sign in with their Microsoft account and enjoy a consistent experience on any Windows 8 device they use. See Quickstart: Connecting to an online identity provider.

Fundamentals

Every app should always have a solid foundation in order to reach as many people as possible.

• Splash screen:  Use the splash screen to smooth the transition between when people launch your app and when it's ready for use. The splash screen should subtly reinforce your brand with your users, not distract them or advertise to them. See Guidelines for splash screens.
• Suspend and resume app state:  Users will switch your app on and off the screen, and Windows will terminate it in the background when it is unused. You should save and resume the app state when possible to maintain context. See Guidelines for app suspend and resume.
• Auto-launching and "Open With": Launch the default app for a file type or protocol from your app. See Guidelines for file types and protocols.
• Globalization, localization, and app resources: Windows is used worldwide, so you need to design your app so that resources, such as strings and images, are separated from their code, to help make localization easy. See Guidelines for globalizing your app and Guidelines for app resources.
• Accessibility:  Make your app available to all users regardless of their abilities, disabilities, or preferences. If you use the built-in UI controls, you get accessibility for free. When you need to create custom controls, see Plan for accessibility.
• App help: Provide help or troubleshooting tips to your users. See Guidelines for app help.
• Store categories: Learn how to create great apps for specific Windows Store categories, like games or entertainment. See Category guidance.

Build date: 6/20/2013