Converging on Microsoft

Mitchell Ashley

Previous Article Next Article

Photoshop Templates Divulge More About Windows Phone 7 User Interface

If you don't have access to a prototype Windows Phone 7, these Photoshop templates provide insight into the new "Metro" UI.

By Mitchell Ashley on Wed, 07/21/10 - 4:56pm.

. What's this?

Microsoft's taking bold risks with Windows Phone 7, sporting the new "Metro" user interface that's designed from the ground up. No Windows Mobile 6.5 makeover here. While I'm pretty much holding back judgment on the new Microsoft phone OS, many are giving WP7 and Metro a thumbs up. (I'm still nursing the wounds from my last (epic fail) phone OS prediction... "Apple iPhone Doomed To Fail" - http://www.networkworld.com/community/node/23744). The WP7 UI is not "visually stunning" but once reviewers have it in their hands for a test drive over a couple of days, the overall feedback is very positive. Kudos for WP7 typically range from the simple but quick responsiveness to the integrated user experience across applications. The biggest critiques center around lack of cut-and-paste, no multitasking (except for select Microsoft apps), and missing features in the email app such as no threaded emails and lack of an integrated inbox for multiple email accounts. Again, this is why I'm holding judgment until I actually get to see and use a Windows Phone 7 device.

Short of reading reviews and watching videos of those in possession of a Technical Preview device, the next best thing to dive into is a set of design resources Microsoft offers application designers and developers. You can find these Windows Phone 7 design resources on MSDN at http://msdn.microsoft.com/en-us/library/ff637515%28VS.92%29.aspx. Included is a PDF walk through of Metro UI design philosophy and its seven (pun intended?) areas of differentiation.

What's most striking about the WP7 Metro UI to me is that it clearly was created by user experience designers, not developers. Your first hint is the description of what Metro is...

"METRO IS OUR CODE NAME FOR 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." << from Windows Phone Design System - Codename Metro.pdf

The best word I can find to describe Metro is that it's "typographical". Its a visual language built around the stylistic language of typography. That's not to say Metro isn't fully multimedia -- but most UI elements use black backgrounds and solid color visual elements, or display text on top of a vibrant image. Its aim appears to be simple rather than slide or busting with attention grabbing wiz bang features.

The good news / bad news about Windows Phone 7 is the designers got to start from scratch. There's no Windows Mobile 6.5 legacy design left in Metro, it really comes across as a bottom up redesign, with the exception of the Zune app which borrows heavily from the Zune mp3 player interface. WP7 designers were given a great deal of freedom in designing the UI, which means Windows Phone 7 and the Metro UI succeeds or fails on its own. Personally, I hope Microsoft's designers got this one right.

Customers will either grow to love WP7's new Metro UI approach (I don't think it will be love at first sight), or they'll stick to proven and more established SmartPhone paradigms. There's no Windows Vista "kitchen sink" disaster to WP7 can blame they are fixing (Microsoft's Mobile OS Rip Van Winkle moment not withstanding), but rather a new concept in SmartPhone user interface with Metro that will have to prove itself to users and the market.