The Metro Invasion!: A Supremely Brief Article About Microsoft’s Dream Interface

Posted by on June 9, 2011 at 9:56 pm

The wide world of Metro UI (Clockwise from Top Left): Windows Phone, Windows 8, Zune 4.0 software, Xbox 360 Fall 2011 dashboard

You can blame Steve Ballmer all you want for Microsoft’s stagnancy. In the past decade, their revenues have cooled (allowing the once dwarf-ish Apple to surpass them in size), their employee count has exploded, their stock has stalled, and there’s been more than a few calls for Ballmer’s resignation. But, one thing we are going to see is the graphical unification of all of Microsoft’s products, the first time it’s ever happened across such a broad range, including phones, PCs, and video game systems. By the end of next year, the text-and-tile Metro UI interface system may be the most visible in the world, surpassing even iOS. While Metro is hardly perfect from a usability or preferential standpoint, it’s still a great interactive solution. So we have to wonder: where did this thing come from and why is Microsoft embracing it whole hog now? Let’s take a look, shall we?

What Is Metro?

While Metro wasn’t officially Metro until Windows Phone 7 was unveiled early last year at the Mobile World Congress in Barcelona, it’s existed in various forms for years. Metro is a minimalist interface design system, driven by text as buttons, a “chromeless” implementation, “twist” interface for moving in and out of content more easily, a panoramic display that keeps more information just off-screen, and a relaxed use of visual real estate. Metro was inspired by text-only, heavily informative signage featuring simple iconography on London subways. It’s not difficult to see the parallels State-side:

Or, for those of us who live out west, we see a similar standard across our interstates.

Metro gives plenty of real estate to headers while making buttons plain and easy to see. Microsoft refers to these as ’tiles’ in that they’re not just buttons, but feature glanceable information, making them far more important than a splashy icon with a name underneath. In the example below, we see how the new Windows 8 tablet interface allows you to not only access information like weather and stock information, but gives you enough information at a glance that it’s not required to “drill” into the app to see it. Also, notice the next page of tiles is hanging just to the right, creating a single panoramic ‘page’, like an infinitely scrolling canvas.


With the advancement of technologies like display resolution and color, we’ve gotten into elaborate, almost distracting methods of displaying information on our screens. Not only do we need to take up valuable real estate with the amount of buttons we can put on screen, the amount of grey area we can lay to put those buttons on, but also the strange necessity to add tacky flourishes to them. For example, why did we need to move beyond the classic blue screened VCR interface?

Always a beauty!

Well, let’s be fair, that’s not exactly pleasing on the eyes and as far as that tech goes, it’s a pain to navigate. An interface doesn’t need to be ugly to be functional, instead the “chrome” of an interface is the interface itself. The more real estate it requires to be functional, the more chrome it has. Let’s look at some other mobile interfaces and see how it breaks down:

Mobile interfaces (From Left to Right): Metro on Windows Phone, iOS 4 on iPhone, and Android 2.3

The first thing you’ll notice is how spartan Metro looks compared to the others; you’ll also notice how much more information is available from first glance while not being nearly as intimidating visually. In this example, Metro reveals the number of calls, text messages, and e-mails you have. iOS does this as well but only for specific items, like Mail at the bottom. Microsoft is encouraging developers to create Live Tiles for their apps, allowing you to get information like when your flight is coming in, what the weather’s like, so on. In order to access that information on iPhone, much of that information has to be acquired by drilling into an app. (It should be noted that while that Calendar icon on iOS is dynamic, the Weather app isn’t, meaning it’s always 73F and sunny no matter where you go.) On Android, this is alleviated a bit with widgets that perform in much the same way that Metro’s Live Tiles do.

Graphically, Android and iOS include a daunting amount of clustered icons. iOS also features a number of graphical flourishes like drop shadows, the signature “Aqua” glare on virtually all of the icons, and the reflective baseplate below to indicate that the bottom four icons are, in fact, stationary. Both iOS and Android have mandatory top bars for all their information, such as signal strength and battery life. Metro keeps that information tucked away, leaving only the time and a top row that doesn’t need to call much attention to itself. Android works harder to keep chromeless, but still features oversized menus and unnecessarily large icons.

The “Twist”

When you have a lot of content, it gets very easy to spend a lot of time accessing it. Starting with Windows Media Center, Microsoft created the Twist interface to make it easier to flip through content without requiring extra clicks drilling in and out of menus. Rather than giving you an “up” and a “down”, you can use “left” and “right” to scroll through lateral content. Example 1 below is the classic example of how you would drill through a menu tree to access a particular album on almost any standard MP3 player.

Example 2 then shows us the advantage of the Twist when you would need to access another artist. In this case, we’re trying to get out of Incubus’ “Make Yourself” album and go to the Matthew Good Band. The red line shows the traditional approach in which we would need to go up to the Artists level of the interface, select another artist, then drill back down. Four clicks. The blue line shows us the twist method in which we can drill back up to the artist level immediately and scroll right down. Two clicks. We’re only saving two clicks overall, but over a period of time, it saves a lot of time and alleviates fatigue.

Because of this model’s efficiency, we can access a lot of information fairly quickly without, again, drill fatigue. Microsoft turned this simple case of switching artists in the Zune days into entirely new interfaces for accessing People or Xbox Live in standalone hubs in Windows Phone.

Metro panoramics are really just elaborate “twists”

So now that we’re kinda familiar with what Metro is, let’s look back and see where all that came from, starting with Microsoft’s humble days…

Pages: 1 2 3 4ALL

Don't Keep This a
Secret, Share It

  • Great piece.

  • Anonymous

    Excellent Article.. This is how anyone should write article (specially so called tech journalist) , not to just put whatever comes in mind. Facts, figures everything is penned down beautifully.

    • Anonymous

      Thank you, sir!

  • Anonymous

    *Slow clap*

    The massive amounts of information and the fun and interesting style of the article made me want to read it all the way, even though it’s four pages. 

    It’s amazing to see the origins of the Metro design language, and how it became a reality. Personally, I think that with the Kinect, Windows 8 and WP7 Microsoft has a streak of hits on their hands. Let’s just hope they play it correctly.