Building a different kind of UI

Published by at

Metro UI is the freshest user interface design we've seen in many years - Joe Belfiore is Microsoft's vice president of the Windows Phone programme and he spoke in a small 'speaker's corner' setting at Nokia World 2011, explaining the origins and motivations behind Metro. Read on for the details and some of our impressions, including clues as to where the name itself came from...

Joe Belfiore

The standout small session of Nokia World 2011 for us was possibly Joe Belfiore, one of the architects of the Windows Phone User Interface, discussing its origins and principles. It was a quite fascinating insight into the new UI and the direction for Nokia's (and others') smartphones in the years to come. Even if, like us, you share some misgivings about some of the current under the hood limitations of Windows Phone, it's hard to disagree with Joe's arguments and with the pleasant and genuinely useable experience offered by Windows Phone right now.

Joe started with the assertion that "Windows Phone is about celebrating people", quoting core values stated by the design team:

  • People first” - your friends and loved ones (and what they're up to) should be front and centre in the interface. Being ‘people first’ is. Joe contends, fundamentally different to iOS, Blackberry, Symbian and other mobile operating systems, which all force an "application by application" basis.
  • Celebrate me” - Joe contrasted the effortless celebration of 'you' to Android’s customisability, where you have to put in quite a lot of effort in terms of homescreen tweaking and configuring. In Windows Phone, an awful lot is done for you.
  • Right here, right now” - instant display of the people, events and information that you need in real time, plus an awareness of searching for things physically close ro you in real life

Celebrating People


Metro is, as you will have observed, and as Joe contends, "completely different". It has evolved from other things that Microsoft have done. E.g., Windows Media Centre and Zune HD, and the name comes from the idea of taking the user on a journey. And, to set that up nicely, the visual style was inspired by metropolitan transportation signs - i.e. they do what they need to do, clearly and simply, "expressing typography, without unnecessary frills".


Transport sign inspiration


The same is true of Metro UI's textual elements and iconography, with the added aim to be "artistic" - Joe showed some examples of classic and modern art based on typography. Ideas above a mobile OS user interface's station? Pretentious? Maybe, but we can absolutely see what Joe means and the overall effect is undoubtedly very stylish. 


Metro design language

Metro UI certainly offers a different approach to the usual grids of largely static icons, though the cheeky resizing of the phones to give one a psychological edge made us chuckle!


Also important to Metro is "motion", whether it's your Xbox live avatar peeking out cheekily in your live tile, the lock screen bouncing when tapped to indicate what to do, the 'busy' moving dots or indeed the core kinetic scrolling of all the panes and content. Joe says that "motion makes so much difference, which is why comments based on screenshots don't represent the whole 'picture'..." He says that "the motion helps to create an emotional connection."

Perhaps unsurprisingly, the Metro UI design is "getting better feedback from women and first time users". The competing Android UI design "is like the web - it can accomodate lots of styles". Joe defends Windows Phone in a direct comparison saying that Metro isn’t as constrained as some say and that the very consistency and the ‘airyness’ helps users, plus developers can create their own design, incorporating the Metro style without it getting in their way.


Moving Forward


Bringing the talk back to Nokia at this, its own event, Joe referred to "elegant coexistence with OEMs." He said that "Nokia has pushed Microsoft to make Metro better. Nokia has helped enhance the out of the box experience and made its software based value-adds fit with Windows Phone."

Obvious to anyone who has tried Windows Phone but highlighted next by Joe was that the "highly natural feel of the UI - buttery smooth touch, real-world physics, no lag, no stutter" is made possible only by combining good software and good hardware - a lot of the UI is hardware accelerated. This has even now been applied to web-based video, as of the Mango update, used by Nokia from day one, with Internet Explorer 9 having hardware acceleration for HTML5 videos - no Flash needed and silky smooth rendering of 720p video streams.

Using hardware acceleration for the UI and video playback isn't just done for performance reasons - it also apparently "saves battery power". Trying to drive all of this graphical activity and video with a pure processor-driven solution would use up significantly more power.

Joe demonstrated the hardware rendering power of the Windows Phone specification hardware by bringing up an airline booking application with 3D-rendered visuals of each aircraft's passenger cabin - to change a seat reservation you can - literally - stroll down the virtual cabin and pick out the seat you'd like:


3D rendering in applications


One of the neat integrations that Microsoft has achieved with Windows Phone is that to its Xbox consoles - the Xbox Live hub in Windows Phone has an app called the XBox Companion. Joe demonstrated controlling Xbox media playback (in this case streamed live from the Xbox's online store) on a Nokia Lumia 800. Playback control on the phone is cool enough (in case you lose the Xbox's remote?), but the Windows Phone's display can also be used by the Xbox Companion to "directly pivot around relevant information, such as director, actors and other credits, all the while the movie is streaming happily to the console".

Interestingly, there's a brand new UI "coming to the XBox 360 in the next couple of months and this has a distinct Metro look and feel". As does the new preview version of Windows 8, should you have caught this around the Web.

Tiles, motion, typography, are all catching on, it seems!

NB [David] The Xbox control works just like the XBMC remote applications (i.e. going directly to content titles) - I’ve been doing this for months on multiple phone platforms (including Symbian - see this app (p)review).

Joe left us, to significant applause, with a slide of further resources to look up if you want more information on Metro UI and how to implement it:

Further details!


A great presentation and one that opened our eyes a little more to the thought processes that went into creating the interface we're now seeing on the new Lumia 800 and 710. And we thought you'd enjoy hearing this summary, too!

David Gilson and Steve Litchfield, All About Windows Phone, 27 October 2011