You can use this handy checklist to be sure you’re covering what you need to create a great Metro style app.

The basics

These are the design basics for every app:

  • App tile: Use your app’s tile to engage users, to encourage them to use your app, and to keep your app feeling fresh and relevant. See Guidelines and checklist for tiles.
  • Splash screen: This is a great branding moment! Use color and a graphical logo to help reinforce the impression of your brand with your users. See Guidelines and checklist for splash screens.
  • Lifecycle management: Your app will be switched on and off screen, and be terminated when it is unused in the background. Save and resume state when possible to maintain context. See Managing application lifecycle.
  • App bar: Place your app’s commands in the app bar so users know where to look for them. See Guidelines and checklist for app bars.

Views and form factors

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

  • Full screen: Design for landscape first so your app will run on all form factors.
  • Snapped view: Design for your users’ multi-tasking needs. Users want to use your app while they chat, surf the web, watch a movie, do their taxes, or whatever, so make your snapped view useful and maintain context when going between snapped and unsnapped views.
  • Filled view: Account for reduced horizontal real estate when your app is the filled view. See Guidelines for snapped and fill views.
  • Portrait: Some screens rotate, so optimize the layout of your content for a taller-than-wide view and retain functionality.
  • Scaling: Use a fluid layout and make sure the graphics you use 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.

For more info, see Defining layouts and views.

Windows application contracts

These features help your users engage with their content in meaningful ways:

  • 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.
  • Search: Let your users quickly search through your app’s content from anywhere in the system.
  • Share: 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.
  • Play To: Let your users enjoy audio, video, or images streamed from your app to other devices in their home network.

For more info, see Windows application contracts and Searching, sharing, and connecting.

Make your app great

These features make your app stand out from the crowd:

  • Notifications: Let your users be aware of time sensitive or personally relevant content through toast notifications and invite them back to your app when you are not in the foreground.
  • Content tiles: Promote interesting content and deep links from your apps on Start and let your users launch your app directly into a specific experience within your app.
  • Semantic zoom: Help your users navigate large amounts of content. Your app can display different kinds of information to users based on how “zoomed in” or “zoomed out” they are.
  • File picker and picker extensions: 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 other apps can load your apps’ content.
  • Animations: Use animations to make your app feel fast and fluid. Help users understand context changes, and tie experiences together with visual transitions.
  • 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 multi-player games.
  • User tiles: Make your app more personal to your users by loading their user image, or letting users set content from your app as their personal tile in Windows.
  • 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.

Learn more about what makes Metro style apps so different from desktop apps in What are Metro style apps?

Validate

When you have a prototype going, use the Windows App Certification Kit to test for any technical requirements you may not be meeting.

Related articles

Advertisements

4 thoughts on “Metro style apps: Using the design checklist

Share your thoughts

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s