Windows Phone Metro Design Language

Before getting much further into the ins and outs of Windows Phone, it’ s worth taking a step backward and looking at the approach that Microsoft took in designing the user experience. Rather than simply refining what they already had, it was time to make a clean break and come up with a revolutionary design. The outcome of this process was not only a unique mobile interface but also a design language that you can, and should, adopt as part of building your application.

As part of going forward, it’ s important to look back, even if only for a moment to wave as it disappears into the sunset. In the case of Windows Phone, the legacy of Windows Mobile from Pocket PC 2003 SE, through Windows Mobile 5.0, 6.1.4, and finally 6.5.3. As you can see, each has been an incremental approach with little to excite the user, save the more touch - friendly home screen and controls in Windows Mobile 6.5.3.

What’s important to recognize is that although the Windows Mobile user interface appears somewhat dated now, there are some important concepts embraced within the layouts — for example how relevant information could easily be accessed right from the home screen, and that applications were only a click or two away via the Start menu.

The user interface on nearly all the current- generation smartphones is geared around applications. The underlying operating system typically handles standard information types such as e - mail, calendar, and contacts, but it is left to individual applications to handle other types of data (e.g., updates from your favorite social networking site need to have an application running on the device).

Unfortunately, these applications are often built in isolation and don’t interact with each other or even integrate into the phone experience. In building Windows Phone, it was important for Microsoft to build an immersive user experience, rather than a set of disjointed applications. This needed to encompass all the features that make up Windows Phone, as well as the ability for third - party applications to be built to integrate into the same experience.

It was decided that Windows Phone should have a fresh start and not just the new Start that you’ll see when you first unlock a Windows Phone. This should not just be about an ad hoc change to the way applications look, but a new language for communicating with users. What Microsoft came up with is what they refer to as the Metro design language, based on generations of refinement that have gone into the use of signposting, signaling, iconography, fonts, and layout in the transportation industry. The name Metro was chosen to reflect its heritage in the language used to efficiently guide people to their destinations.

If you examine signs used around and on buses, trains, and other forms of transportation, and at stations, airports, and other transportation hubs, you can clearly see a set of principles that govern them. Most of them have graphics that are instructional, yet minimal in design. Furthermore, the signs are typically universal and feature simple icons. The use of color is significant and plays an important role alongside weight and style when applied to text. Unlike in a lot of software systems, where it is almost an afterthought, the use of different typography in signs can dramatically affect the readability and thus the effectiveness of those signs.

Using transportation signage as a base, the Windows Phone team collaborated with other teams within Microsoft in order to flesh out the design language. For example, the use of motion and animation in the Xbox, the use of navigation via content on the Zune and Media Center, and the intimacy of the ZuneHD interface were all sources of inspiration for Metro.

The resulting Metro design language is about being modern with a clean and fast user experience. It ’ s about delivering an experience that is in motion and all about the content. Being authentically digital in design and using clear typography are also important throughout the Windows Phone experience.

Source of Information : Wiley-Professiona Windows Phone 7 Application Development 2010


Subscribe to Developer Techno ?
Enter your email address:

Delivered by FeedBurner