During MIX10 I saw a session called Windows Phone UI and Design Language by Albert Shum, Michael Smuga and Chad Roberts who are part of the design team for Windows Phone 7. The design language is called “Metro” and here is the philosophy behind it
METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO BECAUSE IT’S MODERN AND CLEAN. IT’S FAST AND IN MOTION. IT’S ABOUT CONTENT AND TYPOGRAPHY. AND IT’S ENTIRELY AUTHENTIC.
Being a long time developer for Windows Phone and Windows Mobile I found this session a welcoming change to the existing platform and should allow Microsoft to better compete in the mobile market space.
If you want to get a good idea on what the whole design philosophy of Windows Phone 7 I recommend you check out the MIX10 session.
Some of the key takeaways for me during this session are
- Inspired by the transportation/metro system (or subway) where signs are easy and quick to read.
- The design is simple and clean and makes use of iconography, typography and strong colours
- Use bold strong colours to represent hierarchy in your content
- Use motion and animation to bring content to life (but don’t over do it :)
- Also inspired by Microsoft assets such as XBox and Zune
Metro is the design language and is derived from a set of principles which are (min 7:20)
-
Clean, Light, Open, Fast
-
Celebrate Typography
-
Alive in Motion
-
Content, Not Chrome
-
Authentically Digital
Essentially this session describes the Metro design language and how to incorporate these design aspects into your mobile application. This doesn’t mean that you have to follow these design principles but it will help in making your applications feel a part of Windows Phone platform and minimizes the learning curve to the user for using your app.
Below is my interpretation on parts of the Metro design language and it’s principles.
Key Areas
Metro is grounded on two key areas
- The Individual and how do they do things they need to get done
- Organization and how do you find ‘stuff’
The Start experience is centered around this. It’s centered around the individual and organizing the data and applications. The left one is ‘Glance & Go’ and the right side is ‘Get me There’. There is your app!
The ‘Panoramic Experience’ breaks out of the frame of the phone. Most apps are constrained to bounds of the screen but the ‘Panoramic Experience’ allows you to create a more immersive experience and present your data in a unique way. The ‘Panoramic Experience’ allows the user to scroll from horizontally to view different sections and then the sections you can scroll vertically.
Clean, Light, Open, Fast (min 7:38)
 | 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 |
Essentially here you want to make your application experience simple and intuitive. Put on the screen only what the user needs and reduce unnecessary elements from your design. This may take multiple iterations when designing your app. Considering you are on a smaller screen and not on the desktop this is something to keep top of mind when designing your application, get down to the core essence of want needs to be displayed. Remember show the core content and if your user wants more you can always add more if they request it.
Celebrate Typography (min 8:42)
| | Type is beautiful, not just legible |
| | Clear, straightforward information design |
| | Uncompromising Sensitivity to weight, balance and scale |
Use typography to make your application come to life and be the center of attention. When you want your user to focus on something, use a stronger weight or scale to attract the user to that part of the screen. Windows Phone comes with a font called Segoe WP and comes in different styles
-
Segoe WP Black
-
Segoe WP Bold
-
Segoe WP Light
-
Segoe WP Regular
-
Segoe WP Semibold
Now this doesn’t mean you can’t use a different font you are free to do this but try to keep some consistency to make the experience for the user a pleasant one.
Alive in Motion (min 9:40)
| | 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 |
Motion and animation tends to be used a lot in mobile UIs. The Alive in Motion principle revolves around using motion and context to allow user to understand where they are, where they are coming from and where they are going. Don’t just use motion for the sake of using motion. Use motion to tease and engage the user as to what is next. Motion and animation is not just to make your app fun and delightful but a way to entice the user to explore and to navigate your application. The experience of your application is about flow and how you move and navigate within your application.
Content, Not Chrome (min 11:05)
| | Delight through content instead of decoration |
| | Reduce visuals that are not content |
| | Content is the UI |
| | Direct interaction with the content |
Allow the user to view the things that they want. For example, if it’s a picture just view the picture when the user navigates to it. Strip away the frames, text (ie filename) or anything else not relevant to the content being displayed. The key here is to focus on the content that the user wants to view, use motion to help the user navigate your application, use whitespace to not overburden the user and use type to attract the user to the content or the data they want to see.
Authentically Digital (min 12:15)
| | Design for the Form Factor |
| | Don’t Try to be What it’s NOT |
| | Be Direct |
Authentically Digital brings all the above four principles into one. The mobile phone is not a PC, Metro is a digital language and not about applying chrome or making it prettier. The Metro language is essentially the ‘brand’ for Windows Phone 7. Take advantage of the brand, take advantage of the design language but still try to make your application unique not just from a technology standpoint but from a design and usability standpoint.
Conclusion
Metro is a foundation to build your mobile applications upon but don’t be limited by the design language, extend the language and build a fantastic rich experience. Bill Buxton said, “It is not about getting design right it’s about getting the right design”. The right design will not come from your first design but will take multiple iterations. If you are not a designer, leverage the Metro design language when building your Windows Phone 7 applications to be part of the Windows Phone experience. If you have a design team or are a designer; get inspired by things around you, envision and experiment with mobile designs and ultimately create fantastic applications to delight and please your customers so they continue to use your apps!
So there it is, my summary for the Designing Windows Phone 7 session at MIX. But remember, this is my interpretation so I recommend you check out the session to get familiar with the Metro design language. If you are new to designing user experiences I recommend Bill Buxton’s book on “Sketching User Experiences” as it goes through the process of design and thinking design. Even if you are not a designer, it’s still a good read as it allows you to understand the design process.