Anti-Pattern: Animation Gone Wild - Borders.com

Borders.com just announced the new Borders.com

I ambled over curious if there were any new Ajax style interactions. And what did I find? A classic example of the anti-pattern Animation Gone Wild. This is when you employ gratuitous animation that adds no value either in communication or engagement.

Here is a screencast of it in action.

Instead of popping up the book, music, dvd information quickly we are required to watch the talent of the developer to sloooowly animate the box into place. Come on folks, we can do better than this!

There is no need to see utility objects like this animate into place.

Here is the general rule. Try your feature without animation. Is the meaning clear? If so then don't add ANY animation. If it is not, try adding a quick animation. Did that get it? Then stop there.

Save animation for when you need it. Animation is good for at least seven reasons:

• Maintain context while changing views. Carousels are a good example of this. The scroll animation helps the user maintain context as they move through information.
• Explain what just happened. The Apple store Customize your Mac uses this to highlight price changes while configuring a Mac for purchase.
• Show relationships between objects. The Mac Genie effect when closing or opening windows. It is fast enough and it ties the iconified window to the dock.
• Focus attention. Backpackit's Spotlight technique focuses attention on the change that happened.
• Improve perceived performance. Progress Bars.
• Create an illusion of virtual space. Yahoo! Home page's personal assistant (Tabs animate open).
• Engagement. Mini-Cooper site, configure your car. The animation is fun.

BTW, I go into detail on animation in my upcoming O'Reilly Book, Designing Web Interfaces.