Friday, July 18th, 2008

Gratuitous animation at the new Borders.com

Category: Prototype, Usability

<>p>Bill Scott took a peak at the new borders.com and quickly saw an instance of the anti-pattern: Animation Gone Wild.

Here it is in action:

And his analysis:

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.

Posted by Dion Almaer at 6:02 am
1 Comment

++---
2.7 rating from 7 votes

1 Comment »

Comments feed TrackBack URI

Hrm, getting a js error when I try to browse the books:

http://www.borders.com/online/store/Landing?type=1&nav=5185&kids=false

Comment by Dujenwook — July 28, 2008

Leave a comment

You must be logged in to post a comment.