I was at a great event called Mobile Mondays last night here at the Michigan chapter in Ann Arbor last night and folks were asking me about the user experience on Windows Phone 7 and why it was so different from the  Apple iPhone.. Well you can imagine the wide array of questions I am getting from  iDevice folks who are intrigued by the phone but don’t get what the HUBS are on the opening screen (think if them as content views into the world of apps on your phone so you can find out things interactively that really matter to you).

Anyway, someone asked if the UI was just something that no one thought about user testing. As a user experience guy I laughed when I heard it, because I knew that the UI design is about the culmination of 10 years of UI design that started with the Windows Media Center interface that is popular even today..

Windows Phone 7 UI

Beginnings in Windows Media Center

This has branched into Zune devices,,

And the immensely popular X-Box 360 Dashboard..

It is now branching into  other facets now including third-party Windows and Silverlight applications (Like METRO-Twit)..

Anyway talking about user experience, here is Bill and Albert talking about what went into the exciting design of the Windows Phone 7 and really about all the user experience and design research (including Natural UI) that went into producing this evolutionary and revolutionary interface..

If you are curious about writing applications for Windows platform applications and Silverlight 4 based web applications. Check out these templates for Microsoft Expression Blend and Visual Studio 2010...

http://www.microsoft.com/downloads/details.aspx?FamilyID=e9da0eb8-f31b-4490-85b8-92c2f807df9e&displaylang=en

You may want this file from that page:

SL4Themes-templates.zip

After you can create applications that look like this:

You can also do UI mock-ups with these UI design templates in photoshop layered file format available over at MSDN..

Design Templates for Windows Phone 7

Websites with Interactive Squares and Information Hubs as UI design

Zune.net of course..

Microsoft.com/ Expression

Third Party Sites using “Information Hubs”

Engadget.com

More Resources

UI Design and Interaction Guide for Windows Phone 7

Windows Phone introduces a touch user interface (UI) based on a design system codenamed Metro. This guide provides detailed information about UI elements and controls, UI system behaviors, and the interaction model for the touch interface. Designers and developers should read this guide to learn the dos and don’ts of UI implementations for their Windows Phone applications.

Windows Phone Design System - Codename Metro

A visual explanation of the inspiration behind the Windows Phone design system codenamed Metro, the seven areas of Windows Phone differentiation, and the Red Threads that are the principles Microsoft used to guide the experiences built into Windows Phone.

Design Templates for Windows Phone 7

A collection of 28 layered Photoshop template files that can be used to create pixel-perfect application layouts, to help guide UI development, or to pitch an idea. These design templates showcase many controls that are a part of the Windows Phone Developer Tools Beta. They also include examples of controls that are a part of Windows Phone, but are not available as a part of the Windows Phone Developer Tools. These additional templates are included to help designers and developers maintain a consistent look and feel across applications for system controls that developers wish to mimic. Templates in the download: Application Bar & Application Menu, Buttons, Check Box, Context Menu, Date Picker, Dialog Boxes, Edit Control, Hardware, Icons, Keyboard & Input, List Picker, List View, Panorama, Panorama Backgrounds, Picker Box, Pivot, Progress Indicators, Quick Jump Grid, Radio Button, Reminders, Slider, Start & App List, Start Tiles, Status Bar, Theme, Time Picker, Toast Notifications, Toggle Switch

Application Bar Icons for Windows Phone 7

These icons are now installed locally as a part of the Windows Phone Developer Tools Beta at C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons.