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.
5 comments:
I agree with you. I'm giving a talk later this year at Web 2.0 Expo in Berlin about Designing for Flow, where I will address some of the issues with animations that you raised here.
Wow, talk about obtuse animation. I agree, the animation definitely does not add any value to the information presented; plus it is a little klugy in fact it gets stuck if you hover from one image to another too fast. Just like too much flash, too much AJAX for the wrong reasons is not a good thing.
Well, at least it's a problem that's easy to fix!
Joking apart though, there are of course many who would put redundant animation in the category of desirable embellishments. Such people see the user experience as poorer
without them. Obviously, I would disagree with them on the grounds of usability, but to dismiss out of hand what is a fairly harmless attempt at creating a "fun" interface is, I think, a little harsh.
@bruno, would love to see your presentation after your talk.
@gilgongo. Actually I am not being harsh. There is plenty of places to be "fun", but providing a 1-2 second delay to see the information just for the sake of animation makes no sense and in this specific context cannot be justified. As I alluded to in my point on engagement, there is a place for fun. But I don't call it "fun" when the interface consistently gets in the way of the functionality.
Love your articles.
Always helps me to come up with valid reasons not to do something.
I just had a request for using a carousel within tabs... and for each tab to be inconsistent (one loads its own page, another displays content within its tab, and the next contains the carousel with animation). Time for me to have some fun and point out why its a bad idea!
Post a Comment