Thanks to my fabulous colleague Andrew Spooner for this post introducing Metro, the design language behind Windows Phone 7. Andrew holds the flashy title of Creative Technologist here at Microsoft, which simply means he does all the fun stuff. Track him down on Twitter and at www.ubelly.com.

What is Metro?

Metro is the name for the design language, the design philosophy, behind Windows Phone 7. This is not only in reference to the look and feel of the interface itself, but also to the animations which bring the 2D interface designs to life and the sounds that accompany user interactions on the devices.

Why Metro?

Inspired by the way-finding graphics that you find in airports, railway and bus stations the world over, Metro is a homage to those high contrast, high colour visualisations that stand out in those visually noisy environments.

 
Airport signage

Does this work in the real world?

There are many examples of the style of these way-finding graphics in the physical world, both past and present. Much of the work from Joseph Muller Brockman and Experimental Jetset support Metro as a physical, usable identity.


Beautiful Typography

How does it work on the phone?

DESIGN

The immediate response from many designers, when introduced to the phone for the first time is how beautiful the type is. The font used in the interface is a new weight of Segoe, a font that is commonly found in other Microsoft properties such as Zune and Xbox. It's a light weight font which could be compared to Helvetica Light that has been used by brands such as Orange and M&S for many years. Metro is also about the fierce reduction of noise, the introduction of space. This gives the content, the data in the phone's applications, room to breathe. There is no complicated control interface to distract the user from the content – essentially it is the content that they're interested in so instead, the content becomes the interface – you don't need scroll bars when the content can be the scroll bar, a principle that we're experiencing more and more with the increased adoption of touch screen devices.


Windows Phone 7 screen designs

ANIMATIONS

The Metro philosophy is also carried through to the animations within the phone. Huge effort has been spent on finessing the animations which help add context to the navigation and user experience. Animations can fold content in, or out, depending on whether you're going forwards or backwards in an application. Common to many of the animations is the use of parralax scrolling, this helps to add depth to the otherwise 2D UI whilst you're browsing content on the phone.

The other night I was setting the alarm on my phone. Well, not exactly setting the alarm, I’d already set it, but was marvelling at the animation between the landscape and panoramic view in the clock application. There’s a subtle mid-way animation that you could very easily miss if you blinked, but it’s those magical animated touches that make me smile, and make me love this phone the more I use it, the more time I spend with it.

SOUND

Similar principles have been applied to the sound design on Windows Phone 7. The audio sings, that's from the ringtones to message alerts, the audio isn't annoying and where it needs to it really compliments user interaction. For example, there are several sounds that make up the keyboard tones and certain keys (such as shift or return) have different tones giving you an audible que that you're typing correctly. This (for me) greatly increases the speed of accurate typing on a small screen device.

Sound was not added as an afterthought, it is an integral part of the experience. The team that worked on the sound design took inspiration from the soundtracks that you get in films. A measure of the success of a film soundtrack is that it is felt, but not heard. Sound in films can often go un-noticed, it is an emotive instrument that adds to the experience on an almost subconscious level and that is what the audio in many instances does on WP7.

The videos here are just a small sampling of the audio that you can expect to experience on the phone and it is a long way from the mobile audio experience that Dom Jolly woke us up to 10 years ago. Maybe we have him to thank for this progression, often it requires someone to identify pain, for another to be inspired to provide relief.

Should you use Metro for your applications?

Yes. You don’t have to, but it really does make sense to.

A discussion I had with an experienced WP7 designer/developer this week was more around trying to find reason why you wouldn’t use the Metro principles in your applications. The tools are already there for you and built into Silverlight. There are Photoshop templates to allow designers to quickly mock up content into WP7 screens. The animations are pre-built for you and ready to use, why wouldn’t you take advantage of these? Microsoft have made it very simple for developers to create applications that follow the Metro theme, which leaves you more time to work on the content, after all, it’s the content that is going to sell your apps.

For instance, to build a panorama, you simply have to populate the copy and drop in a background image, the UI is provided for you, it really is that simple. I would be surprised if any developer who had downloaded the tools decided to go down an alternative route.

Another reason, is that WP7 owners are familiar with the Metro navigation devices. They don’t have to re-learn each application they install, discover where the navigation is, discover where the settings are hidden. If you employ the Metro language in your application it immediately has familiarity for WP7 users which suggests that they are more likely to embrace your application. The down side is that they will also quickly see through any transparency of your content as you can’t hide it behind a playful interface.

For me, Metro can only increase the usefulness and relevance of WP7 applications.

Dive in, don’t be afraid

I’d recommend taking a look at the Metro User Interface guidelines. They cover what I’ve talked about above in a lot more detail. There’s also the Metro Windows Phone 7 design templates available in a layered PSD format (the font is also included in the download) so you can quickly start mocking up application ideas for yourself, or for your clients.

Go forth and deploy.

Downloads