Making interface animation useful

Many interfaces on the web contain some kind of animation. We’ve had Flash for a long time, and with jQuery and HTML5 it’s become even easier to add animation.

Should we do it?

People hold these two views about interface animations:

1. Take the animations off! They are slow and I want to concentrate on function – this crap just gets in the way!
2. I will put in animations because I can. L33t

There is a third way, which is this – make your animations useful. I’ll explain by showing an example of a site that lights the way, and a site that ballsed it up.

This site lights the way

Behold, Bandize.

As you click through the navigation links – Show / Tours, Accounting, Contacts and so on – the content in the lower box sweeps linearly. If you go from link 1 to link 3, you see the content from link 2 sweeping by quickly. The list of links is your map, and the content box below is your zoom into that map.

The animations directly describe how your control is related to what you’re seeing, and that’s good.

This site ballsed it up

Behold, widgetbox.

This is a really similar content discovery style – a set of links (the four grey panels to the right) that control a panel (content to the left).

But this time, there are a few errors.

• Firstly, path from navigation links to content doesn’t match the animations. The content animation sweeps linearly along to the right, same as Bandize – but the navigation links are actually arranged in a zigzag. Try it – it’s confusing as heck.
• The grey panels activate on hover rather than click, which makes it too easy to navigate by mistake rather than intention.
• There are two more ways of navigating through content (I circled these in orange above). One, a play / pause control that’s almost invisible, and second, iPhone style dots (that actually do map correctly with the content animation – they’re in a line.) Both of these elements are clutter.

Conclusion

Using animations is easier than ever, but be careful. Don’t add them for their own sake – make sure they are helping the user understand what’s happening and why.