BitsAndBuzz

With the emergence of new technologies such as AJAX, Flash, and Silverlight, and popular applications such as Google Map and iPhone, the temptation for developers to fully and deeply animate their upcoming applications has become almost irresistible.

While slick animations and transitions are certainly useful for emotionally driven applications, such as car configurators, and some applications or components such as Google Map and charting, they should not be used as a substitute for a good interactive design. Application developers need to realize that these animations and transitions come at an extra design and development cost (no matter what tool they are using). 

In fact, the most successful and influential Internet consumer applications (e.g. Yahoo, eBay, Amazon, Craigslist, Facebook, FriendFeed, and YokWay) use animations and transitions relatively lightly.

In the desktop and mobile arena, Apple has become (and probably always has been) the most famous and admired pixel maestro. However, it is important to note that screen orchestration is a new art and comes at a cost. Even in Apple’s case, flying pixels come with a feature cost, whereas iPhone users can very elegantly scroll their contacts but cannot search them, and can slide from application to application but cannot cut and past between them.

Obviously, the point here is not that including animations and transitions is a bad practice, but that the animations and transitions need to be carefully and thoughtfully considered and planned. So, here are the good, the bad, and the five rules about flying [your pixels]:

The good

• Natural Feel: In the real world, things do not disappear and reappear as they used to do on computer and mobile screens. As shade and gradient are making shapes easier on the eye, animations and transitions are useful techniques to bring a more natural feel to the application.
• Visual Continuity: Good animations and transitions for some types of information can dramatically improve their access (e.g., maps and multi-level charting).
• Perception: Perception is everything, and nowadays a couple of flying pixels can go a long way toward obtaining some good marketing/user buzz and management visibility. iPhone without the flying pixels would not be iPhone.

The bad

• Distraction: Users can be overwhelmed by too many flying and flashing pixels, and developers can spend too much time animating them. The order of priorities should be: first, interaction design; second, visual design; and finally, “orchestration design.”
• Perception: Cool flying pixels might give a false sense of design quality when, in fact, they can hide some serious design flaws or even deteriorate the real use of the application.
• Costs: Flying is not free. First you need your team to learn new APIs, tools, and, sometimes, languages, and secondly, you need to acquire good screen orchestration design skills. Making moving parts feel natural is not as easy at it might seem (even with the right tools and APIs)

5 rules about flying [your pixels]:

• Hire a pilot
• Fly when you need to, not when you can.
• Fly from A to B, not A to A.
• Don’t fly too high — it might suck out all your oxygen.
• Don’t forget to land.

My belief is that animations and transitions are like lipstick; the good ones are the ones you do not notice… except if you are selling lipstick, I guess.

Posted: Wednesday, August 13th, 2008
Tags: Architecture, Technology, Web 2.0, Web2.0.
Actions: RSS 2.0 feed. Both comments and pings are currently closed.