ux.artu.tv » Blog Archive » 24 Weeks of Windows Phone Metro Design | #1 Metro Design Principles and Metro Design Language

24 Weeks of Windows Phone Metro Design | #1 Metro Design Principles and Metro Design Language

24 Weeks of Windows Phone Design Index

Twitter

Metro Design Principles

We usually refer to “Metro” as the UI design style Microsoft is using in their platform and the one Microsoft is exposing for developers and designers to create apps for Windows Phone (I’m focusing on Windows Phone in this series). But let’s delve a bit deeper into the term “Metro” and explore what it really means. To begin with, Metro is defined by two things: Metro Design Principles and Metro Design Language.

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.

An analogy of the relation between Principles and Language could be an abstract concept like “Love” (… a Principle) which could be expressed by a concrete symbol like ♥  or the combination of four characters “l-o-v-e” which give birth to the written form of the abstract concept “love”. I’m sure you could come up with an infinite number of other concrete ways to express the concept “love” including the sound of the word itself, photos or other metaphors.

The tangible manifestation of a concept is called language.

If we had a Principle like Glass and I need to manifest it with three icons: a pencil (Edit), a star (Favorite) and a cross (Close) and a control like a button these could manifest in a visual language like this. If I give you these, I’m certain you could derive other icons or even controls.

Glass Icons

The same icons and button with Metro using a Principle like Fierce Reduction (Light, Clean) would look like this:

Metro Icons

So different Principles give birth to different expressions or Languages.

I found this video sometime ago and I think it explains well what Design Principles are (Architecture). In our case Architecture refers to Design Principles and the different cups in the video represent the Design Language.

In the examples above and after watching the video you will realize that you could also define or create different Languages from the same Principles. For example, if I had just given you the Glass Principle, I’m sure everyone would have expressed the icons and button in different ways - all matching the Glass Principle but still different. That is because there’s no single way of manifesting a Principle - their abstract nature means they will be represented or interpreted in different ways by different people (more about this below under Metro Design Language). It will be a matter of design execution to achieve a more (or less) successful interpretation of the Principles.

The Windows Phone Design Principles are:

Light, Clean, Open, Fast (Fierce Reduction)
Content, not Chrome
Typography
Motion
Authentically Digital

 
Jeff Fong is a Principal UX Lead in the Studio and one of the three designers (along with Jae Park and Bill Flora) in Microsoft that started exploring Metro before it was known as Metro in products like Media Center, Zune and others. If you want an in depth review of all the principles please watch this fantastic session from Jeff. He covers all the Principles in detail.Also, here are some ideas and observations of my own about our different Design Principles - hoping I can share these in a practical way for you guys to use on your daily practice.

Fierce Reduction

We usually think this applies only to visuals and to making things look minimalistic but that’s not all of it - in fact, first, when designing an app, apply this Principle to the application flow - then, after that apply it to visuals. We usually work hard on making our UIs nice and clean but we don’t clean up the flow or the process the user has to follow to accomplish tasks in our app. It’s not enough to have a very nice Metro looking UI while at the same time asking users to navigate to screens they shouldn’t need to go to or have them get lost in the app because the application flow is not straightforward.

“Fierce Reduction starts with the application/experience flow - only after that it goes to user interface design.”

Fierce Reduction starts with the Application Flow

Content, not Chrome

This inherits from Fierce Reduction but it is more focused on the user interface and the visual design - the way things look. The key here is to acknowledge that the star of the show is information (aka content) - both from a consumption and production points of view. We usually showcase Metro in content consumption scenarios but Content, Not Chrome applies also to content generation. People use some apps mainly to consume content, and use other apps mainly to generate content. Content, Not Chrome reminds us that no button, slider, background or layout is more important than the information we are presenting to the user. The content *is* the UI. You will find other design styles where sometimes it would seem the designer wants to be the star of the show, the borders or drop shadows, the adorners, the complex backgrounds - in Metro we believe content (consumption and generation) is king.

” The star of the show is information/content, not UI controls or interface.”

Content, Not Chrome.

Typography

Typography, typography, typography… when it comes to Metro everything seems to be about typography. Metro is not all about Typography. Typography is no more important than photos or images or icons or motion or sound. Remember the first two principles: Information is the star of the show. If it makes sense to express information with typography do it - otherwise don’t force it.

Typography can be beautiful when incorporated with design skills. For example, in Metro, we use typography in different sizes and different weights to convey structured information (beautiful example below). And this is exactly the thing that makes typography stand out from other media - it’s not typography for the sake of typography but typography as a particularly efficient and flexible tool to convey structured information. It beats icons, photos or other media on this particular area: structured information - structured information is information that has hierarchies, that shows an order, and that helps the user prioritize consumption of information. This is the reason we don’t use “bullet points” in Metro - they are not needed if you give the right size/weight treatment to text.

“Metro is not 100% about Typography. Typography in Metro is just another way to convey information. Typography however, offers unique visual design possibilities to convey *structured information* to the user.”

Typography for Structured Information

Beautiful use of typography to convey structured information.

Motion

We’ve talked before how Metro was inspired in printed media design styles. How Print Design is the Future of Interaction is a terrific post from Mike Kruzeniski, Principal UX Lead in the Studio about this topic. When the world moved from printed information to digital information a lot of things changed. Our medium is not static paper anymore. It is screens made out of dynamic pixels that allow us to convey motion. So the question is how to have Motion contribute to make information the star of the show? First is to acknowledge like in other cases, that Motion is there to serve - to make information stand out. Gratuitous motion effects would represent noise and would distract the user from consuming information. In Windows Phone we use Motion to emphasize application flow and to provide depth to the experience. For example, if we take a use from one app to another we use a Turnstile motion which is a more aggressive effect that helps convey the idea that we are taking the user “to another place”. When we want to simply display new information within the same context we could use something like a Continuum motion. It’s a more gentle, less aggressive/dramatic motion that sells the idea to the user that they will be presented with new information while staying in context.

Watch this session by Jeff Arnold, our Sr. Motion Design Lead in the Studio. He describes Metro motion in depth.

“Motion is there to serve and contribute to making Information the star of the show. Use motion to emphasize (or de-emphasize) your application flow.”

Authentically Digital

Jeff Fong describes this principle the best way: “It’s about being honest with the fact that we are designing for a screen, made out of RGBA pixels, and for a screen with a specific dimensions”. For example, imagine we were creating an application to sell books (oh oh here I go :)) so we have to expose the cover of the books to users in a menu. A particular design style like iPhone’s would recreate a metaphor from the physical world (like a bookshelf) to solve this scenario. The bookshelf is gorgeous, well aligned, book covers fit nicely and it even uses wooden texture to make it feel more “real”. This design style Iconographic. It uses metaphors from the physical world in a digital world. In Metro we are Infographic. The Authentically Digital Principle would question the need of a “wooden bookshelf” to hold “images of book covers”. After all, wood is not wood in the digital world - it’s pattern made out of pixels - it’s “fake”. If you take out the “bookshelf” the “books” will not fall down because there’s not force of gravity. So no need for a wooden bookshelf. Instead remove the chrome, the unnecessary, respecting the fact we are talking about pixels.

Let me be clear with something: I’m not saying one style is better or worse. I’m just drawing the difference. It’s simply a different Design Style based on different Design Principles. Nothing wrong with that. I can understand how translating metaphors from the physical world to a digital media has been a hot trend in the last decade - after all, when masses of users went digital in the 2000-2010 and migrated quickly into PCs (Windows and Macs!), tablets, smartphones - the feeling of preserving your “wooden bookshelf” was comforting and familiar. I can totally understand that (and relate in many cases). If you look at Windows XP or even 7 or the good ol’ Windows Mobile 5 or 6.5 - well, Microsoft was also using this Iconographic style - recreating metaphors from the physical world.

In Metro however we believe users care more about being able to consume information than having “representations of physical world objects” inside their phones.

“Design for screens that are made out of pixels, pixels that in turn convey information. Law of gravity doesn’t exist. Sorry Newton… :).”

Authentically Digital

Examples of iconographic style user interfaces. Recreating objects from the physical world in a digital screen.

 

Windows Phone Metro Design Language

To empower developers to create Windows Phone apps, Microsoft could have just announced/talked about the Metro Design Principles but of course this would have meant developers had to create their own Design Language and spend hours and hours doing so. Creating a Design Language for a modern device like a phone is a big deal and requires of many hours of design, iteration, reviews and user testing. The Windows Phone Design Studio crafted a very solid Language that everyone can use.

Based on the Metro Design Principles, Microsoft provides the Windows Phone Metro Design Language. Using it will set you up for success to craft beautiful, compelling and consistent experiences for Windows Phone. The Windows Phone Design Language is determined by these categories:

Navigation. Layout.Composition Typography
Motion
Iconography
Images & Photos
Themes & Personalization
Touch Gestures & Targets
UI controls
Hardware
Services
Marketplace and Branding

 
Compared to the Principles that are abstract, the Language is concrete. So there is a concrete navigation system in Metro called Hub & Spoke (more here). There’s a concrete set of gestures like tap, double tap, tap & hold, flick, pan. There’s a concrete typographic style using Segoe in different weights and sizes to convey structured information. There’s a concrete set of UI controls like buttons, radio buttons and checkboxes, sliders and others UI metaphors. There’s concrete application interaction metaphors like Pivot, Panoramas and Pages.

All these set of concrete elements is what makes up the Windows Phone Metro Design Language. It’s a comprehensive, end-to-end, flexible and extensible design language.

Metro Design Language

But, is this out-of-the-box Design Language the only way to manifest the Metro Design Principles? No.

For example, could I use Helvetica or Swiss fonts in my Windows Phone app and still be Metro? Of course! As sans-serif fonts these and other fonts could be used instead of Segoe.

We will talk more about how to take Metro beyond what comes out-of-the-box in a future post but check out this article on Lessons from Swiss Style Graphic Design to  explore some print design examples that follow the same Design Principles as Metro (other than Motion and Authentically Digital). They look pretty different from the out-of-the-box Windows Phone Metro Design Language (to be clear those are print examples…) but they are based on the same Principles. This could give you an idea of how the same Principles could be expressed in different ways beyond what we provide out-of-the-box.

 

The 3 Sources

The Metro Design Language for Windows Phone is defined via three different sources:

1. The Windows Phone UX Guidelines

2. The Windows Phone SDK Control Library (and the Silverlight Toolkit for Windows Phone)

3. The out-of-box apps and services in Windows Phone (email, text messages, people hub, music/video hub, phone app)

These three sources should in theory communicate the same. We are aware of some  differences between them and we are working on them.

The Windows Phone UX Guidelines are the “Bible” of Windows Phone design. It is reference material and we continue to work on them to keep them updated and to maintain the spirit of them being used as a solid reference source.

The Windows Phone SDK contributes to the definition of the Metro Design Language by exposing a number of UI controls for developers and designers to use in Visual Studio and Expression Blend.

Now, here is one thing I think you will find really valuable. The third way we express the Metro Design Language for Windows Phone is in Windows Phone itself! - the out-of-box apps and services we all use like email, text messages, people hub and local scout. We call these Design Patterns. This is something I don’t think a lot of developers and designers are aware of: you can learn from and use these Design Patterns to craft your own applications. Ideally these patterns should be documented in the Windows Phone UX guidelines (we have this in our to do list :)). I’ve done this myself many times, launch the Phone, go to People hub or email app and see how they are solving search or list sorting or other patterns - then I go to my design (Expression Design, Expression Blend, Photoshop, Illustrator) and reuse those design patterns.

 

Next Post | #2 The Design Process of a Windows Phone App.

There’s many ways of approaching the creation of a Windows Phone app - I’ll share with you the one I’ve used and hope it helps you craft good experiences and good design from the very beginning of the process.

20 Responses to “24 Weeks of Windows Phone Metro Design | #1 Metro Design Principles and Metro Design Language”

  1. 31 Tage Windows Phone Metro Design | the-oliver.com Says:

    […] Am Tage 1 befasst er sich mit der Definition der Metro Designprinzipien und der Metro Designsprache. Link. […]

  2. bnlf Says:

    great! can wait for the next 30 posts :)

  3. bnlf Says:

    can’t * ;)

  4. Anonymous Says:

    […] 现在微软的Metro设计也说得上是路人皆知的了。而且这个设计也在微软的其他产品团队和设计社区里迅速

  5. 31 天的 Windows Phone Metro 設計歷程 Says:

    […] 8 開發者開發他們的自己的應用來說這些博文對他們應該有很大的説明。今天他發表了第一篇文

  6. Curtis Says:

    Hi,

    I’m interested in your thoughts on these Windows Phone sketch books we’ve been making with Microsoft in the UK. I’m really interested in your approach to creating a new app, if you use paper, or just software.

    http://www.stanleyjamespress.com/2011/09/19/windows-phone-book-photos/

    Thanks

    Curtis

  7. Rene Says:

    Hi,
    I think the Metro design is the most beautiful thing I saw on a smartphone for about 10 years.
    But its about the message like you told us in this article.
    In the Netherlands I cant use Bing Maps, because there are no POI’s, I cant use “we”re in”because its US only, there is no working Street View for Windows Phone, no Latitude, no Places. I can’t login on the Mobile Google Maps site, even the Nokia HTML5 Maps site can not be reached from IE9 mobile. I can’t use voice command in my country.
    No Glympse, no Wordfeud, no Google+, no…………………..

    I really love the design, but I think I’m going back to Android, because Windows Phone looks like a local US operating system. And when a man reaches that point, even Metro design can’t help you.

    A dissapointed WP Mango user!
    René The Netherlands.

  8. wetworker Says:

    Great post.

    I’m currently designing my first app for windows phone this will come in handy.
    Thanks

  9. Tim F. Says:

    This post exposes a lot of the problems with Microsoft design:

    1. I’ll start with “Content, Not Chrome” as it appears to be the worst offender. The example shows two examples with almost EXACTLY the same amount of chrome! In fact, the “bad” example has MORE content in that it actually has a statement regarding feedback response and is a bit more human in communicating with the user. Now, the “bad” example is certainly an example of ugly chrome, but this is not to say that the “good” example doesn’t have the same headers, fields, buttons, and spacing of elements forming a “chrome” and is thus somehow only reduced to content. I look at the simplicity but still 100% see spacing, headers, fields, buttons as the chrome which is the SAME! Yes, the “good” example is a good example — but I’ve seen very similar screens that actually attempt to strip away more chrome and compress more content into the screen and are fundamentally worse. In this case, the “good” example has good use of “chrome” –spacing, headers, fields, buttons.

    In other words, “Content, Not Chrome” comes across at completely meaningless language, restating fierce reduction and authentically digital. There are a few instances where Windows Phone does genuinely reduce chrome but more often than not Windows UX people seem to completely not understand what they are talking about. Just throwing out words that sound nice.

    2. “Fierce Reduction”: just take a look at your block diagram of “fierce reduction” and then take a look at your Music & Video Hub: why am I swiping past 2 screens of history and another of what’s new to get to my Music apps? You say: “We usually work hard on making our UIs nice and clean but we don’t clean up the flow or the process the user has to follow to accomplish tasks in our app. It’s not enough to have a very nice Metro looking UI while at the same time asking users to navigate to screens they shouldn’t need to go to or have them get lost in the app because the application flow is not straightforward.,” but instead you’ve decided for me that I want to be reminded what I’ve already done or be sold new crap in every single Hub without letting me actually getting to what I want to do as a user (pick my own damn app).

    (I’d also not that the background image to Music & Video is not exactly an example of “Fierce Reduction,” “Content, Not Chrome,” “Typography,” or “Authentically Digital.”)

    3. The “Typography” example provided seems far from beautiful. Yes, the general forecast is primary, but why is it so primary as to make the lesser elements absolutely puny? Why are they offset? Wouldn’t an icon taking a fixed width of 1/3 or less of the screen to express concepts like clear, overcast, raining be just as communicative? And allow for the date and temps to be larger and more readable and actually allowing an additional day to fit on screen — hence more content over chrome? What is beautiful about WEAT? Do I really think it’s “beautiful” that WEAT takes up considerable chrome space when I’ve already clearly pushed on the weather app?

    4. Motion you barely delve into here so I will just leave it at all the excessive (yes, excessive) turnstiling is off-putting whether or not it is consistent (and it’s not).

    5. It’s easy to belittle heavily skeuomorphic designs, particularly when the analog doesn’t truly exist; I’d even say it’s hip. I think it’s very hard to argue that “In Metro however we believe users care more about being able to consume information than having “representations of physical world objects” inside their phones.” In other words, if I am looking at a screen of all text or a screen of monochromatic squares looking very similar — am I really making it easy for a user to consume the data? My own experience tells me, no, it does not, and I am a very advanced user, not your mom and pop. In fact, the examples where WP7 is actually making it easy to get at content is when tiles or other UI elements heavily departs from these basic concepts and stands out.

  10. Robert Says:

    This is REALLY good. Good stuff!

  11. Joe Kelly Says:

    Great insight into what sounds like a revolutionary change in the UX that we will use in future. Will be following your posts with great interest. Tks. JK

  12. Ryan Says:

    Thank you for doing this series!
    I really love the design of the Metro UI and want to start developing for WP7, so this really helps :)

  13. James Says:

    Really great post! I’m really looking forward to reading the rest of this series! I really hope Microsoft releases an official Metro style guide as well to help with this. :)

  14. Donald Says:

    I want to show this to my boss, but the feedback colors are too bright. Can you change it? They hurt my eyes. Hard to read the text in the boxes because the background colors are too dominant. Otherwise, I totally like the new UI everywhere I see it popping up. Win8, Win8 Server, TFS 2012, etc.

  15. Iain Says:

    Gold dust! I’ve loved pure typographical design since my 1985 school paper on soviet war posters.

    I think a lot of us spontaneously realised that UI design had reached the end of a cycle back in 2009. Metro is a generational leap ahead of anything out there right now.

    Lets hope it gathers the momentum it deserves.

  16. Colin E. Says:

    A great post and introduction to Metro. As a WP7 developer I found that the framework controls do a great job of meeting the principles of fierce reduction, content over chrome etc… however, the Silverlight controls lack the motion exhibited by the native WP7 applications. For that reason I wrote a series of blog posts titled ‘metro in motion’ dedicated to brining the Silverlight Metro interface to life. Here is a roundup:

    http://www.scottlogic.co.uk/blog/colin/2011/05/metro-in-motion-5-sandwichflow/

    Regards, Colin E.

  17. Will our Iconias get the 4.0 Ice Cream Sandwhich upgrade? - Page 13 Says:

    […] different from the Windows Phone 7 OS. Are you familiar with WP7? Here’s the tip of the iceberg: ux.artu.tv

  18. rob de beir Says:

    Many thanks for the information. Will shortly start with my firs windows phone apps

  19. Metro design principles for developers | Jayway Team Blog - Sharing Experience Says:

    […] Light, Clean, Open, Fast (also referred to as Fierce Reduction by Arturo Toledo) […]

  20. 【Change 的芒果 App 專欄】Let’s Dive Deeper into the Metro’s Design Principle and Language(Part 2-1) | TechOrange Says:

    […] (資料來源:ux.artu.tv) […]

Leave a Reply