Windows Phone: User Interface Teases & Transitions

by Luke Wroblewski February 16, 2010

While the Windows Phone 7 Series user interface may not be optimized for high information resolution, it does make interesting use of teases and transitions as highlighted in the video below.

Because it is a touch-based device, the Windows Phone 7 Series uses a Natural User Interface (NUI) paradigm that turns actual content into interface controls. NUIs frequently need to let people know what elements are interactive. (Ideally everything is interactive in a touch-based UI but that's a different point.) NUIs should encourage exploration and give people "permission" to touch things. Teasing people is one way of encouraging interactivity and exploration.

Teasing

The Windows Phone home screen teases people with a slight animation that hints at the content below the home screen image. As you can seen in the video above, the home screen images bounces when the phone starts revealing a bit of the options behind it. This encourages people to touch the surface and start using the device. Microsoft employs a similar design solution in Microsoft Surface with a water-like surface that encourages exploration. Contrast this teasing UI paradigm with the iPhone's more literal "Slide to Unlock" welcome screen.

The Windows Phone also makes use of truncation throughout the user interface. Each of the main application screens include a tease of the content on the next screen over (as seen in the video above). This hint of additional content gives people a reason to move to the next screen and explore. The UI truncation is probably most pronounced in the application headers, which, in some cases span multiple screens.

Transitions

Transitions also help communicate interactions. When users move between screens, interaction components fly in or swivel highlighting the fact they are active and can be touched. Once someone taps on these components, they pivot or recede as if they were pushed backward into space. This animation (shown in the video above) reinforces the fact they are active.

Transitions are also used in the Windows Phone user interface to provide feedback when an action has been successfully completed. You can see this approach applied to comments and status updates (yep, in the video above).

One area of concern in the Windows Phone, however, is the quantity of different transitions present. It's hard to get a sense of how consistently they are applied and if every animation is really necessary. There's a lot of them! As Bill Scoot recently quoted: "It is vain to do with more what can be done with fewer (William of Occam circs 1323). Apply generously when using animation effects."