Design for Mobile: Windows Phone 7 Design

by Luke Wroblewski September 23, 2010

In their Modern Mobile Design Language: from Transportation to Pixels - Metro for Windows Phone 7 presentation at Design for Mobile in Chicago IL, Albert Shum and Paula Guntaur discussed the principles behind the Windows Phone 7 design.

The UX themes for Windows Phone 7 are personal, relevant, and connected. Personal is about a sense of identity. The phone knows who you are, where you are, and more. As mobile changes context, how does your phone stay relevant? Connected allows you to be engaged with rich services and people you care about.

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 allows people to find their way, simple, 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 the Windows Phone 7 design language. It’s modern and clean. It’s fast and in motion. It’s about content & typography. And it’s entirely authentic.

Metro Principles: way to interpret the design 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

Metro Principles in Action

  • The phone should look different depending on who picks it up. The Metro home page shows pictures of contacts and relevant content in “live tiles”. Any application can be pinned to the home screen.
  • Hubs allow you to integrate content around a single media type. You can see your pictures and photos from others.
  • When on the phone you are in the real World. Search on the mobile device is focused on getting you the right answer quick.
  • Services can flow between three screens. Example: Xbox 360 avatars can be updated on phone, TV, or laptop.
  • Personal: my content, customization, entry points
  • Relevant: don’t overdo it, new opportunities, context
  • Connected: compliment, don’t duplicate, optimize for the scenario.
  • Consistency: as designers we love consistency. But does it limit you and create too many boundaries? You need constraints but also need an opportunity to express your creativity. Apps have more consistency then the Web. This helps users.
  • Layout and hierarchy of Metro pages followed a print metaphor. It stems from magazine design.