Windows Phone 7: The "Metro" user interface

At the MIX 2010 session entitled, Windows Phone UI and Design Language, Microsoft discussed the thought process behind Windows Phone 7's user interface and how it came to be. Metro is a UI vision/guidance across all of Microsoft's consumer products. The overall concept of using Metro in Windows Phone 7 came about because Microsoft wanted to help users "find their way" across their phones and the information it leads them to. The inspiration came from public transportation. If you look at the fonts and graphics used in a place like the London Underground or New York's subway system, you'll understand what Microsoft is referring to.

The entire OS uses a custom Microsoft made font, the name of which has not been mentioned. Microsoft decided to put a heavy emphasis on text and the beauty that it embodies. Instead of using a scrollbar to show that more content is available, as most phone OSes do, WP7S utilizes text for this function by running it off the screen (as seen in its titles and tabs).

With regards to app development, Microsoft doesn't want developers to focus on the UI and style of their apps, but rather the content. Instead of worrying about the design, they should utilize Microsoft's UI overall style. Microsoft aims to provide users with a consistent UI throughout the entire phone experience. However, this does not mean that developers who don't use Microsoft's UI layout will have their apps rejected from the Marketplace. The above is simply a suggestion for developers to better the overall WP7S experience.

Although the OS requires screens that can handle at least 4 simultaneous touches, gestures available in WP7S are limited to two. Games will probably be a place where we could see further touch points needed. The available gestures are tap, double tap, touch and hold, pan, flick, and pinch and stretch.

Microsoft also limits app bar (that's the bar you pull up at the bottom of the screen by swiping upwards) icons to a maximum of four, with three being preferred. Most apps will be developed as single page apps that span the width of multiple screens. To navigate the app, a user will pan side to side using tabs. Microsoft is pushing this as the preferred method for app development.

Microsoft also confirmed the old Windows Mobile 7 UI that leaked several times during development. Originally codenamed "Photon"

Check out the new promo video that was shown at the session. Below, there is also a gallery of photos taken from the slideshow presentation. The company scrapped the "Photon" plans and moved on to using the "Metro" UI which we have seen implemented in Windows Media Center, Xbox 360, Zune HD and now Windows Phone 7. Neowin revealed the original Windows Mobile 7 UI last month.