DESIGNING FOR WIN PHONE 7
Designing applications for the Win Phone 7 is very similar to designing for print. In my opinion, it feels like a cross between a tri-fold brochure and a poster. I based my prototype designs on Microsoft’s “Metro” style guide, with typography as the main focus and stunning imagery for support. It’s nice to have fixed factors regulating the design, making it a fun and fresh design experience. Microsoft provides a UI Design Guidelines document that outlines layout sizes, background image size, recommended typefaces and spacing. You know what you are designing for and you know how it will look and act on the win phone 7 platform.
Although applications are not required to strictly adhere to the “Metro” style guide I feel it makes the best use of the “panorama” view and navigation. With strong examples of this UI concept in place like their Zune-like “music + videos” hub, I found it fairly easy to put together a few quick app mockups (see below). In addition to design guidelines, using a ready built design templates, or a win phone 7 specific panorama control like the one by Clarity Consulting will make the process of bringing your designs to life much more efficient.
Likes, Dislikes, and Challenges
I think the idea of the “hub” is completely intuitive. This concept clearly breaks down info into more manageable pieces, and greatly helps with organization when designing for the phone. I like the “chromeless” appearance, allowing the core functionality of the application to take precedence over gradients, textures, bevels, drop shadows, and the complicated animations you see on the web.
Although I understand the Win Phone 7 guidelines are a work in progress, I found a few contradictions. I also noticed that certain design specifications did not translate well to the phone emulator . If you use their guidelines as suggested best practices and not as fixed definitions you will have more success.
Multi-directional vs Linear
The main challenge I had was stepping away from familiar navigational examples seen in other mobile phones. I had to keep reminding myself that the content to the right and to the left of what I was working on didn’t necessarily have to have a direct link to one another. I started thinking multi-directional as opposed to linear.
Win phone 7 vs IPhone
The “Metro” styling of the Win Phone 7 is similar to the Zune HD and the Windows Media Center UI and offers a different interface paradigm than the IPhone. When navigating an application it feels like you are panning a long seamless page of information in contrast to the multiple panels of an IPhone.
I think there is less of an opportunity to overdesign your application, which happens often with IPhone applications. While both interfaces are simple and sleek, win phone 7 really gets down to the basics. IPhone sets a high standard for designing for touch, designing for win phone 7 could improve on that user experience with a consistent and strategic use of white space and staying away from a menu and icon heavy UI.
Design Examples for Win Phone 7 Applications
Here are some concepts for general applications for Win Phone 7:
Resources to get you going with your own Win Phone 7 design:
Helpful design templates for Win Phone 7
http://www.shazaml.com/archives/windows-phone-7-ui-templates
Here is the interaction design guide for Win Phone 7
http://go.microsoft.com/?linkid=9713252
Windows has a project template for Blend 4 and Visual Studio 2010 RC1
http://developer.windowsphone.com/
Clarity Consulting developed a panorama control for Win Phone 7
http://blogs.claritycon.com/blogs/design/archive/2010/03/30/building-the-elusive-windows-phone-panorama-control.aspx