Metro UI – A brief story

FIG. 1 Metro UI in Windows Phone 7

Metro UI is definitely one of the most beautiful UI I’ve ever seen. It’s simple, clean and elegant. It follows the philosophy: less is beautiful, less is better. When the first time I’ve seen the concept of Metro UI and its implementation in Windows Phone 7, I am amazed by its fluidity and simplicity. Even though lots of people think that Metro is a new concept, actually Microsoft has started to implement this design language in Zune Media Player. So, let’s see more about Metro UI in this short article.

FIG. 2 Microsoft Zune interface. The Metro UI is in its infancy stage.

 The history of Metro UI

FIG. 3 Metro UI is inspired from beautiful, simple and clean transportation cards and signs.

Like I’ve said earlier that Metro UI took its cue from Zune HD interface (there is no Metro UI name, yet) but before that Microsoft actually has began applying their Metro (at least conceptually) to their products. One of them is Media Center. Not familiar? You’re not alone. You will not get it anyway if you have certain version of Windows. This is how it looks:

FIG. 4 Microsoft Media Center

So, Microsoft originally started to use the Metro design language in their Media Center for Windows XP in 2005. The interface relies more on typography and less on chrome and buttons. The contents became the UI itself. First time I use Media Center, I feel amazed. Honestly, I never associate Microsoft’s product with a stylish one, like Apple. Its products usually centered on the functionality and less about the looks. So, I can say I’m kind of surprised in the way Media center looks back in the day.

And then Microsoft Zune PC software was born. To those of you who never use Zune, here is the easy one. It’s iTunes by Microsoft. It has similar function to iTunes though it looks radically differently than iTunes. At least, Microsoft didn’t steal ideas from Apple this time.

FIG. 5 Zune PC Software

I personally use Zune (sometimes) as my music player. I must admit it looks amazing and definitely similar to Media Center beautiful user interface. It’s a must anyway if you use Windows Phone devices as it need Zune to sync its content to your PC (just like iDevices need iTunes).

FIG. 6 Xbox 360 Start Screen

Do you play Xbox? I don’t. So I’m used to be unfamiliar with its interface but when I see it. I also start to sense Metro design language footprint here and there (although it is not called Metro back then). Xbox is introduced in 2005 as competitors to the Playstation 3 and Nintendo Wii. The original interface for Xbox, however, is not Metro (not shown here). It is called Blade interface. But in 2008, Microsoft changed its interface to Metro-like. It is called New Xbox Experience (top left picture) and then the menu is flatten in 2010 (see top right picture). In 2011, Microsoft once again refined the interface with more Metro influences (bottom center picture).

FIG. 7 Zune HD interface

After Xbox, Microsoft released Zune media (music) player in 2006. The software of the final Zune (before Microsoft decided to quit making Zune), the Zune HD (released in 2009), has the interface much more similar to what we see as Metro UI in Windows Phone. It’s the first (and the last, maybe) the full touch screen Zune. It was touted as the competitor of the mighty iPod touch from Apple. The Zune HD has a very capable hardware (it use the first generation of Tegra microprocessor) and beautiful software. I admit I never see the Zune HD myself because it is eclipsed by the runaway success of iPod touch, which is the iPhone minus telephony capability. The Zune UI is beautiful with its typography shines in the interface.

FIG. 8 Windows Phone 7

Then Windows Phone was born in 2010. Microsoft decided to refresh its mobile OS and they didn’t plan for a small change. They decided to create a new mobile OS, completely new and unrelated and not backward compatible with its previous mobile phone OS, the Windows Mobile.

FIG. 9 Windows Mobile. The latest version is 6.5. Microsoft has decided to change its mobile OS with much more refined and modern Windows Phone

I must say it is a brave and necessary move for Microsoft. Yes it’s kind of late decision but I’m glad they decided to make the switch. They were willing to sacrifice the backward compatibility with its old OS and decided to do a fresh start. Windows Mobile (or used to be known as WinMo) is intended for business users. It has ugly and complicated UI that confuses a lot of people, including me. With the emergence of iOS (back then known as iPhone OS) with its slick, intuitive and elegant interface, WinMo was facing its death (as other mobile OS, like Symbian). I personally love the Windows Phone UI. It doesn’t try to mimic iOS. Other mobile operating systems still look similar to iOS in certain degree. Windows Phone is the only one that stands out differently. One thing they did try to copy Apple is how they treat their mobile OS in a close nature. They do license this OS but they have strict criteria of the hardware specification so all Windows Phone devices will have similar look and feel to it. It actually a nice thing because it will be able to avoid the messiness of Android by letting manufactures tweaked too much and loaded it with bloatware. With Windows Phone, users can uninstall any manufacturers and carriers bloatware apps. And with its close nature, you can expect much smoother and more polished experience.

Next year, Microsoft is expected to release its latest version of Windows OS, Windows 8. The home screen will have the Windows Phone (live) tiles, although users can opt to have a regular, more traditional desktop looks. Microsoft envisions Windows 8 as a universal OS for tablet and desktop PC and it is also the first time, Windows 8 will support ARM architecture.

FIG. 10 Windows 8 Start Screen

FIG. 11 Windows 8 brand new lock screen

Besides that, Microsoft also already implemented Metro UI design language to its website and Windows Live Messenger. I’m definitely sure that Microsoft will implement Metro in more products in the future.

FIG. 12 Windows Live Messenger 2011 with its Metro design language

What is Metro?

FIG. 13 Metro UI explained in MIX10

So, what is Metro UI? Metro is design language. It relies on typography and content, not the chrome. This is the main differentiator with other OS.

FIG. 14 iOS UI. Notice that iOS use chrome in its UI as one of its main parts.

FIG. 15 Android Ice Cream Sandwich in Galaxy Nexus. Android actually has improved a lot in term of style in this version.

One thing about Metro is it isn’t just about Windows Phone but Metro is Microsoft future design language. Here are some Metro principles:

1. Clean, Light, Open, Fast

• Feels Fast and Responsive
  
• Focus on Primary Tasks
  
• Do a Lot with Very Little
  
• Fierce Reduction of Unnecessary Elements
  
• Delightful Use of Whitespace
  
• Full Bleed Canvas
  

Metro is minimalist. It removes all the unnecessary elements and keeps it as simple as possible (fierce reduction concept) but still keep its functionality. It focuses only on its primary tasks. By this approach, it can make the UI feels fast and responsive. Chrome is present sometimes, but it’s not intrusive. Reliance on typography is there, but at the same time it approaches in a manner that befits the task at hand.

FIG. 16 An example of Windows Phone mail apps that utilize Metro UI

2. Celebrate Typography

• Type is Beautiful, Not Just Legible
  
• Clear, Straightforward Information Design
  
• Uncompromising Sensitivity to Weight, Balance and Scale
  

Metro UI (at least in Windows Phone) using the new font called Segoe. To me personally, it’s nice looking font. The placement, the size, the font, the weight of the text and use of color make the interface cleaner, simpler and looks elegant.

FIG. 17 Metro inspired interface. Notice the use of color to highlight parts.

FIG. 18 Facebook apps for Windows Phone. Notice the color and font size is used to highlight different parts of the interface.

3. Alive In Motion

• Feels Responsive and Alive
  
• Creates a System
  
• Gives Context to Improve Usability
  
• Transition Between UI is as Important as the Design of the UI
  
• Adds Dimension and Depth
  

If you see the transition animation in Windows Phone UI, you can feel its fluidity and it’s not overbearing. Animation is not added just for the cool factor or distraction.

4. Content, NOT Chome

• Delight through Content Instead of Decoration
  
• Reduce Visuals that are Not Content
  
• Contents is the UI
  
• Direct interaction with the Content
  

The content on the phone is the one that is emphasized, not the buttons. By reducing the visuals on the phone that aren’t content will create a more open UI and promotes direct interaction with the content. Chrome is actually can be a important part too, but the idea here is the use of chrome is limited. Chrome is used to create necessary separation.

FIG. 19 Chrome is use here (see the WP start screen) but the use is limited. In the contacts page, you can see the use of color and font size become the prominent way to create separation/categorization (see the picture in the middle).

5. Authentically Digital

• Design for the Form Factor
  
• Don’t Try to be What It’s NOT
  
• Be Direct
  

Metro user interface is apparent for lacking skeumorphic shading and glossiness used in some UI’s that try to mimic real world materials and objects. It’s plain and simple.

FIG. 20 Notes apps in iOS for iPad. See how it emulates the real note book. iOS is known for emulating real objects in its applications.

FIG. 21 Metro inspired note taking apps for Honeycomb. See how it differs with iOS notes app.

So, that’s five principles of Metro that are given in MIX10 events. In my personal opinion, Metro UI concept is brilliant. I hope Microsoft will make all of its apps and products more coherent to this design language so Metro will be Microsoft future distinctive and recognizable style.

Metro UI Implementations

FIG. 22 Website page that has Metro UI design language

FIG. 23 Metrotwit. An excellent twitter client for Windows that utilize Metro UI concept. It’s a freeware.

FIG. 24 Windows Phone apps concept that utilizes the panoramic, flat surface interface.

FIG. 25 Nokia Lumia 800. Dubbed as the real Windows Phone.

You can see other implementation of Metro UI here.

Sources:

1. Windows Phone UI and Design Language
   

   http://channel9.msdn.com/events/MIX/MIX10/CL14
   

2. A Walkthrough the History of the Metro UI
   

   http://www.windowsphonemetro.com/2011/07/11/a-walkthrough-the-history-of-the-metro-ui/
   

3. From Transportation to Pixels
   

   http://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/02/16/from-transportation-to-pixels.aspx
   

4. The principles of Microsoft Metro UI decoded
   

   www.riagenic.com/archives/487
   

5. Google images