Metro design principles for developers

Purpose of this post

The Metro design principles for Windows Phone are:

  • Light, Clean, Open, Fast (also referred to as Fierce Reduction by Arturo Toledo)
  • Content, not Chrome
  • Typography
  • Motion
  • Authentically Digital

These sound great and look amazing, when they are demonstrated by great UX people, and there is already a million (give or take) blog posts repeating and explaining these principles.
But for a developer such as myself with no formal background in graphics and UX, it is quite difficult to translate these principles into an actual app.

The purpose of this blog post is to demonstrate how I understand these principles in a way, that I hope will be easier to understand for us programmers, by providing examples. A similar approach to explaining Metro on Windows 8 can be found in this case study on Windows Dev Center.

This post covers my understanding of “Fierce Reduction” and “Content, not Chrome”.

Content, not Chrome (+ Fierce Reduction of elements)

In my opinion, this is the principle that is most intuitively understood, when you first look at iOS vs WP7, because iOS has so much chrome and WP7 has so little.
But I have since then come to learn that it goes beyond the initial impression.

My first impression

My iOS start screen with lots of chromeMy Windows Phone start screen with very little chrome

When you compare my iPhone start screen to my Windows Phone start screen, you’ll notice a huge difference in the use of chrome.

iOS has round corners, gloss effects, drop shadows, all the colors of the rainbow, etc.

WP7 has very few colors (you can’t even assign a background image!), no round corners, no gloss effects. What it DOES have in this screenshot is the “People” tile in the lower left corner of the screenshot, which features photos of my contacts (content).

This other example is from the “Sista-minuten” app from the swedish website where you can search for and find offers on travelling. We did the WP7 version of this app, but let me make it clear, that I am not attempting to belittle the iOS app. I’m simply pointing out how the design language differs.
Sorry for choosing a swedish app as example, hopefully the point is clear even for non-scandinavians.

Screenshot of the reseguiden app search screen on iOS Screenshot of the how a single search result is shown in iOS

Screenshot of the reseguiden app search screen on WP7 Screenshot of the how a single search result is shown in WP7

This is app is a good example of the design language on each platform.

iOS has lots of Chrome:

  • Top-statusbar which shows network connection strength, cellular provider name, wi-fi network strength, clock, battery and bluetooth status with multiple colors and background gradients.
  • A background image of a beach with blue sky to set the mood.
  • Drop shadows behind the controls, where you select date, destination etc.
  • A heading with round corners and gradient background to provide a place for the back button. (Yes, a button is also a piece of chrome, no matter what it looks like!)
  • Big buttons on the result screen for placing phone call, booking online or mailing a link.
WP7 has very little chrome and fewer elements on the screen (Fierce Reduction of elements on the screen)
  • The result screen (the screenshot on the right) displays the same information, but the WP7 version does it with fewer elements and more emphasis on the basics.
  • Notice how there is no national flag? It is fair to assume that the user knows which country the destination is in, he chose it himself on the search screen!
  • Information is grouped into Pivot items (info, weather, images), instead of being shown all at once.
  • The heading “INFORMATION OM RESAN” (information about the trip) is not strictly necessary, because it can be deduced from the context (the user searched for a trip and this is the result screen), so it can safely be removed.
  • The “Uppdatered…” text (Updated time) is much smaller than the rest to draw attention to the most important stuff.
  • It is a detail, but the “>” on buttons on the search screen is also chrome, that one might argue is unnecessary.
    The pro-argument would be that is tells the user, that he can tap on the button to see more options.
    But on the other hand, the WP7 version doesn’t have it, and I don’t think anybody is confused for that reason.
  • There are still buttons for calling, maling and going online, but these are integrated in the app-bar at the button, making them less intrusive.
  • The “back” button is integrated in the WP7 handset, so we don’t need this piece of Chrome at all.

In fact, the WP7 app has so few graphical elements, that I had to add a black border to the screenshots for clarity in this blog post.

I have to admit, the first time I was WP7, my initial thought was something alon the lines of “ughh..”. But I must also admit, that I have quickly come to love the simplicity.

My epiphany

At first I thought that Content, not Chrome only referred to the use of graphical chrome (colors, gradients, shadows etc).

After working a bit with both platforms, I realized that it also refers to the use of on-screen buttons to carry out actions, which in WP7 is either unnecessary or can be replaced with a tap-and-hold context menu.

This example shows how the presence of the back-stack and back-button on the handset allows me to reduce both complexity and chrome quite a bit, when performing a the fairly common task of opening a weblink.

Screenshot of a tweet with a link in iOS Screenshot of the result of tapping the link in a tweet on iOS

Tapping a link in an app in iOS typically opens a page, showing the web-content inside the app. On the top we have a back-button and on the bottom we have a bar with a button that allows me to open the page in Safari.
If the link was opened in Safari directly, there would be no easy way for the user to go back to the tweet, so the chrome is necessary on iOS.

Screenshot of a tweet with a link on WP7 Screenshot of the result of tapping the link in a tweet on WP7

Tapping a link in an app in WP7 typically opens IE in full screen directly, because the back-stack makes it so easy to step back in to the app, that the user doesn’t realize he ever left it.
And since we can step directly into the browser, we don’t need a button for opening the page in the browser either.

Another aspect of Fierce Reduction is, that once you have the complete list of ALL the stuff you would like your app to do, you should “fiercely reduce” until your app only does the really important thing. This will make it easier to create an app, that does, whatever it does, really well.

This Post Has 2 Comments

Leave a Reply

Close Menu