The lessons learnt are from 2 links -

• via Microsoft News Center.

Albert Shum, one of the key thinkers behind the new Windows Phone 7 Series design, admits that 12 years at Nike doesn’t sound like an obvious springboard to becoming director of Microsoft’s Mobile Experience Design team.

There’s a very interesting video on the blog (follow link above), but I am unable to post it on this blog. Guess it needs authorization from MS.

• via Luke Wroblewski’s blog

Meanwhile, I also stumbled upon this very interesting blog post by Luke Wroblewski (currently the Chief Design Architect at Yahoo Inc.)

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 and transitions are vital elements in the design of great UI. Tjeerd Hoek (frog design) had also written about the importance of transitions in their blog ‘Design Mind’.

Excerpts from the article ‘Mind the Gap’ which had a profound impact on me:

Transitioning smoothly between changing interface states using animation is not a new design theory or practice, but current technologies and tools have made it far more sophisticated. The most basic example is the animation you see when a Web page is “loading.” The hourglass sifting sand and the spinning color wheel are old examples. These days, Web designers have created elaborate sites in which elements in the UI move, resize, and cross fade in a much more holistic and smooth flow. The same is true for mobile interfaces. Apple’s iPhone features a number of elegant animated transitions such as the “wheel” animation for setting a time or the “turning page effect” you get when starting a new “note.”

These kinds of transitions are a powerful way to make users feel more in control of what they are doing. It allows users to understand the relationships between different states, and to observe the link between their actions and the responses of the interface. Why is this important? Like the horse enthusiasts of Muybridge’s time, users of digital devices want a full understanding of their experience. Also, users don’t want to be distracted from their tasks with staccato or clunky exchanges between tasks. They want a seamless, harmonic experience.

For UI designers, creating transitions and motion into the interface allows us to convey this kind of continuity. These animations also instill impactful emotion and meaning. Would the iPhone excite as many people if all it did was flip between static UI screens? Probably not. The pinch-zoom on a photo, the sense of zooming back out to home screen, the little bounce-back of a scrolling list when it hits the end — these small animations in the UI are delightful, and they evoke a profound emotional response to the product when you use it.

Beauty lies in what you read between the lines of experience, perhaps?

Share on Facebook