MIX10: Windows Phone UI and Design Language

by Luke Wroblewski March 15, 2010

In their Windows Phone UI and Design Language presentation at Microsoft’s MIX10 conference, Albert Shum and Michael Smuga discussed the principles behind the Windows Phone design and how developers can take advantage of the phone’s user interface in their applications.

  • The Windows Phone design team started by looking at what people do in real life. They were really inspired by transportation graphics, which are: grounded in good design that lets people find their way, simaple, and universal. The influence of transportation graphics is why the Windows Phone UI is codenamed “Metro”. Bold colors, simple, but out of the way when not needed –like transportation graphics.
  • Metro is our design language. It’s modern and clean. It’s fast and in motion. It’s about content & typography. And its entirely authentic.
  • Metro Principles: way to interpret the language and make it yours.

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

Celebrate Typography

  • Type is beautiful, not just legible
  • Clear, straightforward information design
  • Uncompromising sensitivity to weight, balance, and scale

Alive in Motion

  • Feels responsive and alive
  • Creates a system
  • Gives context to improve usability
  • Transition between UIs is as important as the design of the UI
  • Adds dimension & depth

Content, not Chrome

  • Delight through content instead of decoration
  • Reduce visuals that are not content
  • Content is the UI
  • Direct interaction with the content

Authentically Digital

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

Application Tips

  • The Metro user experience focuses on the individual and their tasks and helps organize information and apps for them.
  • Start page provides “glance and go” and “get me there” features. Live tiles serve up personally relevant content in a timely manner.
  • Panoramic canvases allow developers to break through the frame of a single viewport.
  • The team designed the Windows phone for “life maximizers” that: value technology, are busy professionals, interact with friends and families. They used two personas that represented this segment: Anna and Miles.
  • Red threads are the brand principles that are being delivered to the user. For Windows Phone they are personal, relevant, and connected. These can be applied to applications as well.
  • The visual design of applications for the Windows Phone should be a balance of the Metro style and a company/app’s brand.
  • Use motion but remember pacing is important: the more you use it, the less special it becomes.
  • Hardware implications: standard hardware buttons, with optional landscape keyboards, design for one hand whenever possible. Take advantage of hardware buttons (start, back, and search)
  • Gestures available: tap, double tap, touch & hold, pan, flick, pinch & stretch.
  • Touch: recommended touch target size is 9mm. Minimum touch target size if 7mm. Minimum spacing between targets is 2mm. Visual size is 60-100% of the touch target size.
  • Common controls in Windows Phone should be used whenever possible. Available controls: application bar, tabs control (across multiple panes/screens), hubs (aggregate multiple sources).