Metro, the basic design principle behind the Windows 7 Phone, looks strikingly different when compared to other smartphone UI’s. The clean lines, wide negative space, and strong typography offer a different perspective to the bubbly apps presented to iOS and Android users. Creating seamless interactions between apps and their operating system is important for a developer to build immersing apps and take the most advantage of the phone’s “language” of gestures. Here we’re going to cover exactly what Metro consists of (and it’s more than just squares, semi-lightweight font, and white-space).
To begin with, the basic principles behind metro’s design are:
- Clean, light, open, and fast
- Celebrate typography
- Alive and in motion
- Authentically digital
Put in other words, the Metro principles allows an application designer to remove all the extra “chrome” in the UI. Rather than dressing up the application with a busier background, a strong typography and white-space put a heavier focus on the application’s content. This is especially relevant due to the smaller screen size and gesture-based interactions.
Transitions between screens in Metro are seen as just as important as the actual UI itself, and the motions themselves give the illusion of depth to the interface so users know where they are. In general, Metro encourages developers to design for the phone itself, rather than translating an interface from the legacy of desktop operating systems.
Panoramas
A UI motif prevalent with Metro is the panorama. From both a visual and user experience point of view, the panoramas in Metro’s style are intuitive and allow a developer to attractively bundle up content. The hint of content horizontally beyond the screen provokes a user to naturally navigate web stores, infographics, and so on without limiting itself into a narrow column or taking up screen real-estate with unnecessary arrow buttons.
Pivots
Pivots are another UI interface that are essentially nicely animated tabs. But they allow a developer to provide a great deal of information and lists under headings, which can be easier to navigate through than a huge panorama.
Motion
When accessing an app, the user is presented with a “turnstile” animation similar to a page flipping over. This not only provides a good sense of change to the user, but also naturally leads into the horizontal scrolling motion of panoramas.
When designing navigation through content, the design team also encourages developers to keep elements a page somewhat fixed, while the rest of the content wipes away. This provides continuity of headings and other elements, while still giving the strong message of motion through the content.
A Suggestion, not a Requirement
All in all, Metro is a baseline for designing and developing apps. If it makes sense to use it, then following the pure metro principles can create an intuitive, seamless experience. That being said there are no requirements to follow these principles– and there are plenty of apps, like games, that should create their own experience.
If you’re curious for more information about designing your own apps in a Metro design aesthetic, you may find the Microsoft .toolbox useful for tips and tutorials. Also, Ward Bell’s talk at MIX11, Redesigning an Existing UI to Suite Windows Phone 7 may be useful to some developers out there.
Also be aware that Microsoft is also organising Technet Days in Helsinki, Finland on the 15th of November (next week). The one day conference is packed with more than 40 lectures on how to better use Microsoft technology for your advantage. More information on the event can be seen from http://www.microsoft.com/finland/technet2011/ (in Finnish).
—
Hear it from the startups
This series of posts is sponsored by Microsoft and produced in co-operation with ArcticStartup to share experiences from startups in using Microsoft technology as well as in participating in the many different programs Microsoft has to offer.
How to get started on Azure
Head over here to get the tools and try them for free. You can also apply to Bizspark as the members get access to Windows Azure.
How to get started on WP7
Download the free tools. You can also use an emulator to develop on the WP7. Jukka Wallasvaara (Microsoft employee) also blogs about WP7 news in his blog.
