Metro: Guidelines to the Next Generation of Mobile UX

With Surface, Zune HD, Bing…and now Windows 7 Mobile it seems that Microsoft has finally embraced the design/experience side of technology. While most people will never encounter a Surface device, at least not at it’s current state, this was a huge leap for Microsoft and human/computer interactions in general. For the most part it’s a living experiment of what the future may hold. The Zune HD and Windows 7 Mobile, on the other hand, are designed to be used by the masses, in the present and take their respective markets to a new level.

Inspired by the simplicity and universality of transportation graphics Microsoft calls there new design guidelines Metro. Beyond the name is the focus on creating a modern, stripped down, easy to navigate user interface based on common elements and typography.  The use of typography as a key design element in the digital world is almost unheard of ; I would think design geeks should be overjoyed with this though I’ve barely seen any references to this from the general design world.

Along with typography here are a few of the highlights of Metro:

  • Based on transportation signage: simple, universal, easy to skim
  • General feel: Clean, light, open and fast
  • Experience: should lead the design
  • Consistent: common design treatments and transitions
  • Flexible: Inviting developers to personalize their use of the guidelines to allow them to make their apps unique yet consistent
  • User focused/Task focused: one primary action at a time
  • Panoramic: apps not locked to a single screen
  • Typography: as an element of beauty as well as to demonstrate hierarchy
  • Transitions: are as important as the static page. Guidlines request to keep them simple and related, noting “the more you use it (transitions) the less special it becomes”
  • Simplify, Simplify, Simplify: fierce reduction in unnecessary UI elements (chrome, non-related actions…)

Here is a link to a long but worthwhile video
http://live.visitmix.com/MIX10/Sessions/CL14
(Silverlight required for inline, but you can also download non-Silverlight version)

Here’s the official Window’s phone site:
http://developer.windowsphone.com/

Overall, I’m excited to see smart-phones continue their evolution and Metro looks to be a great step forward.  It’s also nice to see Microsoft (or anyone) not play catch up by porting over the status quo, but rather innovating beyond it.

Comments

One Comment so far. Leave a comment below.
  1. Thom,

    Nice article, I took a photo of the original inspiration here http://www.flickr.com/photos/thommck/5209001482/ Made me feel like the station was sponsored by Microsoft!

Leave a Reply