Metro Pass 0002 – Leveraging the Metro Design Style

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920

In the previous post in this series we learned the eight traits common to great Metro apps. In this post we’ll look at the first trait, leveraging the Metro design style, in depth.

When it comes to making use of the Metro design style, there are really two things you need to keep in mind:

1. How your app presents content to the user
2. How users interact with your app’s content

Presenting content
Design your app’s UI to focus on the content, while ensuring your UI is accessible to users with disabilities. This can be accomplished with a clean and open layout, a clear information hierarchy and utilizng the Metro style silhouette.

Clean and open layout
Minimize distraction. (It’s all about content not gradients and other visual trickery)
Use space to frame your content. (Empty space is OK!)
Limit navigational chrome that is persistently on screen. (Get rid of the buttons, tabs, etc!)

Clear information hierarchy
Use typography in place of lines and boxes to help establish structure and hierarchy.
Use size, weight, and color in text consistently to convey information on a piece of content’s importance.

Metro style silhouette 
Your app should align with the Metro style silhouette to provide a sense of familiarity and confidence.

Interacting with content

Direct interactions
The most natural way for people to interact with content is directly. Whenever possible, let people complete actions through direct manipulation of the content rather than indirect manipulation with controls. For example let people tap an image to view detail information rather than have to select an image then tap a button.

Leverage the edge
Some actions can’t be accomplished with direct content manipulation. For these interactions, show commands contextually, to avoid cluttering your canvas. Leverage the screen or device edge so people can confidently find commands using the app and charms bars.

That’s it for today. Next up, being fast and fluid.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920