8

Microsoft's Metro design language is moving into the mainstream with Windows 8.

There are several online references that talk about the theory of Metro design, including the wikipedia page Metro Design Language (Wikipedia) and the Windows Phone 7 Series UI Design & Interaction Guide, a pdf linked from the Windows Phone 7 blog.

With public availability (from February 29 2012) of the Windows 8 Community Preview (aka Beta), we can now get our hands on, and interact with, Metro style desktop applications for the first time.

This opportunity gives us the chance to see how Metro style has been practically implemented - to identify practices work well (and which should be emulated), as well as practices that work less well (and which should be avoided).

What lessons about effective Metro user experiences can we learn from Windows 8?

Given the influence that Metro is having, where websites and conventional applications are becoming Metro-style, which features of Metro do we leave for use on Windows 8 and Windows Phone 7, and which do we reuse more widely?

[Editorial note: I'm seeking answers that will help myself and others to create authentic and effective user experiences in the Metro style, not a debate on whether Metro is a good idea or not. Please see my meta question to see some of my concerns in posting this question.]

Improve this question
2
  • 1
    Great question! Now I have to read your links and make an answer later on since I have a Windows Phone 7. BRB
    – Benny Skogberg
    Mar 11, 2012 at 9:30
  • note that the link to the "Windows Phone 7 Series UI Design & Interaction Guide" PDF has been broken by Microsoft but the PDF is available elsewhere for reference: v1.0 (sha1:60d583f3b3995690b78c837bbcba8149bf631156 "UI Design and Interaction Guide for Windows Phone 7 Series.pdf" 69 pages) or v2.0 (sha1:95d134ebeeefdf9ad6183ab08b471aaaa292e6e4 "UI Design and Interaction Guide for Windows Phone 7.pdf" 101 pages)
    – Dan D.
    Mar 11, 2012 at 12:22

3 Answers 3

Reset to default
3

Lessons about Style:

Mike Kruzeniski (Creative Director Windows Phone Design team) argues at his blog about the benefits of the new Metro UI Style, which is short the new Bauhaus. Personally, I think he is trying to put to much history in "the new branding" as Bauhaus is not only about ornaments (here UI Chrome) or not (no Chrome just typo). Bauhaus is form follows function and I do not see any benefit of chromeless buttons, because you loose you affordances.

In my opinion the new Metro UI Style is a clean, beautiful, typo interface, which looks modern and good. But nothing more.

Lessons about interaction:

One key features of Metro UI are the so called charms (dev center and UX video at min 50). It is a predefined toolbar in all apps and enables you to share data between apps, between people or between devices. All by means of a cloud system. And you can store aka save the app situation if you leaving it. As designer you have to define which data you are willing to share in your app, actually which data makes sense to become available to other apps.

An other one is the chromelessness of all apps including the IE browser. This will have impact on security of websites (how to identify pishing sites?) as well as different feel ie. notification bars and sticky headers let you customize the browsing experience more comprehensive than now. IE is chromeless at classical desktop-style either! (I have used Dev Preview in autumn, so might be outdated)

to be continued...

Improve this answer
2

The silverlight for Metro Style Apps leaves out the DataGrid that has been a staple UX component in Windows Forms and WPF applications. This forces developers and UX designers to come up with more clever ways to display large amounts of rich data.

Many people seem to be building dashboard-like views featuring tiles with only data important to identifying and comparing items, and then allowing the users to naturally flow into more detail by using a whole new full screen view for the user to carefully inspect one item's data at a time.

This is a great step up from datagrids because they still allow for comparison and indentification of interesting items without distracting the user with loads of data. Without the crutch of the datagrid, we can build friendlier (and touch enabled) rich data applications.

Look at the Finances app that comes preinstalled with the consumer preview for a good example of what I am saying. There is also a template for this pattern that comes with the beta of visual studio 11.

Improve this answer
1

Metro Design Principles:

The Metro Design Principles are the pillars (usually abstract concepts) that guide the creation of experiences for Windows Phone.

The Metro Design Language is a set of concrete user interaction, visual design, motion and application flow elements and rules.

The Windows Phone Design Principles are:

  • Light, Clean, Open, Fast (Fierce Reduction)
  • Content, not Chrome
  • Typography (we can use multiple font family)
  • Motion
  • Authentically Digital

Navigation Model:

Abbreviated Nomenclature:

  • Pivot
  • Panorama
  • Page

You can get more details about Metro UI/UX here: http://ux.artu.tv/?page_id=190

Improve this answer
1
  • Good summary of the principles - but my question is about what we can learn by examining the way those principles have been applied in Windows 8.
    – Bevan
    Mar 12, 2012 at 21:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.