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.
글쓰기