[This documentation is preliminary and is subject to change.]

You can use these detailed user experience (UX) guidelines to be sure you're covering everything you need to create a great Metro style app. If you haven't already, you should start by reading Making great Metro style apps.

Metro design style

Metro style apps are the focal point of the user experience on Windows 8 Release Preview, and great Metro style 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.
• Layout and page design:  Use the grid to help layout your app pages. See Understanding the Windows 8 silhouette
• 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.
  • Guidelines for drag and drop
  • Guidelines for edge-based animations
  • Guidelines for list animations
  • Guidelines for transition animations
  • Guidelines for 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 and Guidelines for touch input (general).
• 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.

Snapping and 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, so optimize the layout of your content for a taller-than-wide view that retains functionality. See Designing flexible layouts.
• Snapped and fill views: 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 your snapped view useful and maintain context when going between snapped and unsnapped views. See Guidelines for snapped and fill views.
• 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 Metro style 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.
• 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 Metro style 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, Guidelines for 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.

• App bar: Place your app's commands in the app bar so users know where to look for them. See Guidelines for app bars.
• FlipView: See Guidelines for FlipView controls.
• SemanticZoom: See Guidelines for SemanticZoom controls.
• Text boxes: See Guidelines for text input.
• Login controls: See Guidelines for login controls.
• Spell checking:  See Guidelines for spell checking.
• Thumbnails: See Guidelines for thumbnails.
• Flyouts: See Guidelines for Flyouts.
• Message dialogs: See Guidelines for message dialogs.
• Context menus: See Guidelines for context menus.
• Tooltips: See Guidelines for tooltips.
• Buttons: See Guidelines for buttons.
• TimePickers: See Guidelines for TimePickers.
• DatePickers: See Guidelines for DatePickers.
• Check boxes: See Guidelines for check boxes.
• Radio buttons: See Guidelines for radio buttons.
• Select control: See Guidelines for the Select control.
• Sliders: See Guidelines for sliders.
• Toggle switches: See Guidelines for toggle switches.
• Rating controls: See Guidelines for rating controls.
• Progress controls: See Guidelines for progress controls.

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. See Guidelines for 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.

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 and checklist for globalizing your app.
• 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: 5/22/2012