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.

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
  • 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.

 

If you liked this article, subscribe to the feed by clicking the image below to keep informed about new contents of the blog: