Making it HOT with Metro–What does Metro mean in Windows Phone 7?
Posted: July 1, 2011 Filed under: Metro, Students, Windows Phone 7 | Tags: "Windows Phone 7", Metro, Microsoft Student Partners, MSPTeam2011 1 Comment »
Windows Phone is a complete 180 from Windows Mobile. On mobile it seems like the API allowed the developers to do whatever they wanted, when they wanted, the hardware was a bit scrambled and you had to make sure which devices you actually support. Then the graphical side was full of high-fidelity icons, gradients, icons and “stock images”. On the phone the game changed for all of these parts and Metro is defining the look-and-feel of the next Windows Phone applications. Just keep in mind, Metro isn’t just blue rectangles with white icons, it’s much more.
I’ve always been a fan of minimalistic design so for me it was extremely exciting to see the new Windows Phone for the first time. The “design language” for Windows Phone is called Metro and it’s strongly inspired by the metropolitan area and its public transportation signage. So the basic concepts and ideas for the new Windows Phone were taken from people and their everyday lives instead of PC’s and mobile devices. This resulted in a creative, simple and intuitive experience that is Metro.
Let’s go back a bit
Minimalistic design definitely isn’t something that Microsoft came up with just now nor are the principles of Metro. Metro is actually a result of design in various applications and services. The Zune software and Media Center were applications that strongly influenced and created the base for Metro. In these applications typography and negative-space had strong meaning and they created a more personalized experience. All this is pretty simple and obvious, but many applications are missing these relevant details.
As stated previously metro draws it’s inspiration from typography and transportation graphics. A user interface that consists of text and simple images can create a solid experience. But if you want to take it to the next level you need the 3rd secret ingredient, motion. In Microsoft’s world, what’s the product that has the most motion and interaction? It’s the Xbox, that’s why taking motion and the design principles from Xbox was important to the development of Metro. In your applications you’d use motion to connect different screens and provide a whole experience throughout the system. You’d also use it to inform the user where they are going.
Motion matters
I think one of the best example of this is the Outlook-application. Let’s see how motions works over there.
Flip - You select your email application from the start experience and the tiles flip when you move to the Outlook-application. This clearly signifies that you’re opening a door – moving to another application.
Grow - Inside Outlook you select an email and the message appears with subtle fade and slide effects from predefined directions. Telling the user that they are going deeper inside the application.
Slide - Once you’ve read the message you might want to reply to it. Once you hit reply the message slides from the top and the SIP from the bottom, nicely “composing” you a new window. When you delete a message it slides down and “throws it in the bin”.
METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO BECAUSE IT’S MODERN AND CLEAN. IT’S FAST AND IN MOTION. IT’S ABOUT CONTENT AND TYPOGRAPHY. AND IT’S ENTIRELY AUTHENTIC.
I’m a developer, why should I care?
Before we go forward I want to mention something. Often developers think that design is something that isn’t important to their work. But it’s important to understand what are the basic ideas behind Metro and how should you take it into consideration when designing your applications.
You should understand Metro so you know why some restrictions exist on the phone and how should you work with them. To be able to provide a consistent experience with the system you need to understand Metro. This will allow you to connect your application with different services and applications on the phone, not just from a technical point of view but from a design side as well.
The principles of Metro
Feels Fast and Responsive – When you think about it from a technical standpoint of course having less gradients and high-fidelity icons to draw the faster the application is. From a design standpoint having less “clutter” on the screen will make it feel much faster and lighter.
Focus on Primary Tasks –The Windows Phone API is quite restricted and the applications live in a sandboxed model. It’s interesting to see that some API restrictions come directly from Metro-guidelines. Metro encourages, and in some cases even forces applications, to focus on primary tasks. The best example of this might be the ApplicationBar. It can contain only 4 icons, making you choose the 4 most important tasks for your app. Technically it’s a StackPanel and it could contain more items, but because of the design thinking in metro the ApplicationBar can contain only 4 items.
Do a Lot with Very Little – You don’t need a lot of images and icons around your content to make it look pretty. It’s enough to balance font weights, sizes and colors to create a efficient and a great user experience. The magic words that you should keep in mind: Focus on Content not Chrome.
Fierce Reduction of Unnecessary –The Metro approach might different from something that you’re used to. It’s often suggested to reserve a separate stage in your design phase where you’ll remove all unnecessary elements from your design. Another simple example of this would be a list. Often we place horizontal lines to separate items in a list, when really all we need is clever typographic choices to accomplish the same task. Taking the horizontal lines off and changing the size and color of the text will make the list feel more airy, fluid and bigger.
Delightful use of Whitespace – You don’t need to fill-up every empty space with an icon, picture or video. Leave empty space and with the combination of text guide to users eye to focus on the most important parts. Again using whitespace will create an airy and light experience.
Focus on individuals and their tasks
Windows Phone 7 wasn’t designed for everyone it was designed for…”life maximizers” (my God..trendy word alert!) They defined two personas Anna and Miles and designed the phone for those persons. The personas approach is in its simplest form: Create imaginary friends that would be a representation of your end-user and design the application only for them. In your design you should concentrate on how individuals use your application to accomplish their tasks and how do they find the information they want.
Always keep in mind that you should focus on getting things done. Great examples of these are the lock-screen and the start experience.
Lock-screen –Shows you the most important things, why you take your phone out of your pockets? To check the date, clock and your next appointment. It also shows you if you have any missed calls, messages or emails.
Start experience– The start experience is the next step. It shows you notifications from your favorite applications and allows you to quickly scroll through them. The screen isn’t too flashy, but it feels alive and personal because of the subtle animations and images. It gets you to the application fast, to accomplish your task and continue with your life outside of your smartphone.
Taking a picture– Yesterday I woke up and went to the balcony to have my morning coffee. When I sat at the table I saw a bunch of dolphins swimming in the sea. I mean this was pretty cool because you don’t see them too often around here. My first thought was “Aww cute dolphins” and the second thought was to take a picture and send it to my friend who’s stuck at work and rub my awesome vacation in his face. I know I’m nice like that 
Normally this would mean, press the unlock button –> swipe to unlock your phone –> go to camera application –> take a picture. On smartphones you can of course press and hold the camera button take a picture even if the phone is locked, but the interesting part in Windows Phone is that even when you take a picture your phone is still locked. This means that you have to explicitly unlock it to view or delete your images and so on. This is pretty cool and is a great example of getting things done in a safe way.
Red threads
These are brand promises to the end-user and guidelines for the application developers. When designing your applications you should make sure that you’ve thought about these things.
Personal– Each device is personal, there are differences between the devices, the operators and you select which is the right one for you. The applications should also allow the user to make it feel like their application instead of being just Mr. X’s application. A great example of this is the people hub where by default I see my recently connected friends images instead of a boring list of names and icons.
Relevant– You should present your user with just the relevant information, if you plan to use photos, those should be relevant to the user. The same goes for functionality, define the 4 most common tasks for your app and provide the user with just the functions they need. A classic example of this is the weather application that ask for your location. I’m on a fricking smartphone you’d think it can determine my location automatically. Of course you can allow the user to select the location, but as default it could be my current location.
Connected – We are now connected more than ever before. Many of use social media and many different services to keep in touch. Our applications should be connected with other services that I use and with the other applications on the phone. They might even show us what our friends recommend, use or listen.
Pivots and Panoramas
Bill Buxton tells in his book that the branding behind iPod was brilliant, when you saw white headphones you would automatically assume the person is listen to a iPod. No matter what the device actually was you’d think of iPods just because of the wite headphones. Panoramas are definitely the iPod headphones of the Windows Phone. When you see a panorama you automatically think it’s cool and think of Windows Phones. Okay okay we’re not completely there because it’s not as widely spread, but we’re getting there!
Panoramas are technically nothing new, but from a design standpoint it’s pretty damn great. I mean with some really small details you create a stunning, new and yet intuitive experience. For example the way each panorama item is cropped let’s the user automatically know that there is more content if the swipe to the left. This removes the need for a arrow-icon saying “swipe this direction” to see more content.
In my honest opinion pivots are just pimped out tabs. I’m still quite unsure why they are called pivots and not just tabs, I mean we have pivots in Excel, Silverlight and now the phones. It’s just too much! The only difference between tabs and pivots seems to be that in pivots you can navigate either by tapping on the header or by flicking.
Here is a little comparison chart taken from a Metro-presentation by Jaime Rodriguez:
| Pivot | Panorama |
| Supports a larger number of “items” because the layout is simpler | Tends to create more visually stunning experiences |
| Supports programmatic selection for rich code-behind scenarios | DefaultItem property makes matching operating system restore behavior easy |
| LoadingPivotItem and UnloadingPivotItem events make it easy to defer content creation | Background images of any size automatically wrap properly |
| More efficient use of screen space | Horizontally-oriented PanoramaItems allow variably-sized content to flow smoothly |
Well designed apps
I want to finish by showing a couple of well designed applications that have been praised around different Microsoft blogs and conferences.
WoodGrove
This one isn’t actually and application in production. It’s a concept by Microsoft but it shows how you could use the panorama in a new way. In this example the panorama has a graph in the background that provides the user with a fun and interesting way of inspecting data. The application is fun and interesting because the background is somewhat interactive. Of course presenting business critical data in this way wouldn’t be smart, you might present simple data.
CocktailFlow
This application has a ton of images and a lot of color, but that doesn’t make it “un-metro”. The images that are used are not only relevant by extremely important. I mean people usually recognize their favorite bottle before the they can find it from a text list. Also it’s extremely important to see what your cocktail should look like when your done, because it’s all about the looks.
Curbside Cuisine Locator
This application is somewhere in the middle, it’s pretty minimal but still uses many pictures and it uses typography in a smart way. It’s also connected and shows where your friends eat and what do they recommend. You have the ability to scroll thought different media, suggestions and the locations on map. The design is pretty minimal but powerful and it has a powerful combination of pivots and panoramas.
Summary
My goal here was to present you with some basic information about the design thinking behind Windows Phone and show you the principles of Metro. The idea of Metro is to help the user get their tasks accomplished through a personal and responsive user experience.
I’m guessing that you’re starving for more information about Metro, so here are some cool resources to continue learning.
Windows phone Design Days – Personas – Tracey Lovejoy explains the thinking behind personas and Windows Phone
Application Design for Windows Phone – Megan Donahue gave a great talk about metro at MIX11
Redesigning an Existing UI to Suit Windows Phone – Ward Bell’s talk at MIX11
Metro Design Language of Windows Phone – .toolbox is a great website with a ton of labs and exercises, this part focuses on Metro.
Mind Bending UX – UX Lightning Series – This isn’t directly metro, but there are some extremely inspiring talks over here. I must say this was probably the best session at MIX11.
User Experience Guidelines on Windows Phone – And of course MSDN provides detailed guidance on this as well.
[...] 4. Making it HOT with Metro – What does Metro mean in Windows Phone? [...]