24 Weeks of Windows Phone Design Index

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.

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

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

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

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

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… :).”

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.

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.

In one of the Q&A sessions during the Windows Phone Design Day in Stockholm, Petter Silfver (definitely a follow in Twitter), interaction designer based in Stockholm asked me a question about the “icons in the Windows Phone app bar” wondering why these “icons” have a circle around them. At that point I promised I’d follow up on his question and Petter was kind enough with us and the community to share his point of view in his blog. He raises valid points around design.

We see those as buttons, not icons - although I understand the question is independent of semantics :). These are buttons with a little icon inside of them. The Metro design language that Microsoft provides out-of-the-box has a consistent approach to “button-like” controls. Whether it’s a Push Button, Toggle Button, Command Button, Media Player Buttons or Icon Button - buttons in the Metro language for Windows Phone have a border that defines its boundaries. So the icon buttons in the app bar simply follow the same language as their brothers/sisters buttons - I understand there could be some confusion because I noticed everytime we (Microsoft) talk about icons, we usually present them within the circle and call them “icons”. When we talk about icons we should present them like icons (without the circle - granted, 99% of their use is as icon buttons…)

Click for larger view

While yes, the concept of saliency (thanks for the link Petter) is completely true - this would have meant doing an exception in our button design language for Metro. We went for consistency. It might seem like just semantics on my side - calling these “buttons” or “icons” but it really is a big difference. We use buttons for enabling interactivity and icons for communicating a message one-way. For example, the out-of-the-box phone app uses buttons with a phone icon next to the calls in the call history list - these are buttons, not icons.

Another example of the use of icon buttons, in the text messages app - when you want to add a new person to send a text message you get a little button with a plus sign icon but again, this is a button - not just an icon. You will find we do not use icons as buttons. While it would have been tempting to use just a plus sign icon - I know I would have proposed that initially - the right approach per Metro out-of-the-box for Windows Phone is using a icon button.

Now let’s take a look at how we use icons. For example in the status bar these are truly notification icons and they do not use a circle (they are not buttons).

We use icons as graphics that provide information to the user one-way (they are not interactive, thus not buttons). For example in the email app we use little icons (not buttons) to communicate to the user that there’s an attachment in an email or that there’s a high priority email (flag).

All this said, I want to highlight what we talked about during the Windows Phone Design Day tour - Metro is made out of two things: Metro Design Principles and Metro Design Language. Metro Principles are the design pillars that we (inside and outside of Microsoft) embrace when targeting Windows Phone . The Metro Design Language sits on top of the Principles and is a way to manifest these Principles in tangible UI elements, motion, typography, composition and other interaction aspects.

This out-of-the-box Metro Design Language is defined by three things: the Windows Phone native apps (email app, text messages app, people hub, local scout etc etc), second, by the Windows Phone UX Guidelines and third, by the control library and other resources available in the Windows Phone SDK and the Silverlight Toolkit (all these 3 should in theory be consistent between each other - I know there are slight differences, we are working on it :)). Developers and Designers can use this out-of-the-box Metro Design Language. It will set you up for success to craft beautiful, compelling and consistent experiences for Windows Phone.

That said, the Metro Principles are first, and they override any language, so designers are free to explore the Principles and come up with alternative ways in which you think these could manifest. Not only you are free to do this - we would LOVE to see this happen. The Metro Principles allow for infinite exploration and evolution. Let me give you an idea… check out this article on Lessons from the Swiss Design Style. It’s a great article that describes some of the concepts behind Swiss design (Metro has its roots in this style, also called International Typographic Style) - look at some of the posters and printed media designs in that article. All those follow the same principles Metro does! Isn’t that amazing? Other than Authentically Digital and Motion since all these are printed media examples. However, many of those posters and designs don’t look anything like the out-of-the-box Metro Design Language in Windows Phone but that doesn’t mean you as a designer can’t explore other ways to express the Principles.

  

There’s unlimited design possibilities in the Principles. We’d love to see the community push Metro, perhaps explore and dissect some of these Swiss style designs and see how some of those compositions or ideas could translate well to digital media interactions for a small screen like the one in Windows Phone devices.

And please, do continue starting conversations about Metro and about design with us - we love it! Kudos to Petter for bringing this up! - If you have any other questions, comments, ideas or wanna share with us some of the cool design work you are doing please drop me a tweet @arturo.