Five Reasons to Use Animation on Your Website

Many web developers will shudder if you bring up adding animation to your website. Visions of Flash-based websites with awkward, PowerPoint-like page transitions, jarring sound effects and rotating mailboxes have given "animation" a bad name online.

As is often the case, the problem isn't with the tool itself; it was just used poorly most of the time. It wasn't too long ago where "home page intro animations" were a major part of many websites. I think Jakob Nielsen said it best when explaining the problem with these sorts of multimedia features:

Although multimedia has its role on the Web, current Flash technology tends to discourage usability for three reasons: it makes bad design more likely, it breaks with the Web's fundamental interaction style, and it consumes resources that would be better spent enhancing a site's core value.

While at SXSW this spring, I attended a great presentation by Gabe Martin and Robby Grant from archer>malmo, where they described five good reasons for using animation online. The full slides from their presentation are available at Slideshare, but the primary message is this:

Only use animation when it improves user experience.

Rather than animation for animation's sake, it's important to use animation as a means to better communicate with website visitors. Here are five reasons to add animation to your website:

1. Focus
   Animation can help focus a user's attention and call out a part of the page. This often happens when clicking a photo gallery, where the rest of the page darkens and helps focus your attention on the gallery itself.
2. Hint
   Animation can be used to help provide usability hints to the user. For instance, when first visiting the CNN website, the site slides down and asks if you'd like to make the U.S. Edition your default. This functionality wouldn't be as discoverable without the animated hint.
3. Notify
   Animation can effectively notify a user that a task has been accomplished or that something requires attention. For instance, Apple uses a bouncing animation in their taskbar to notify you when an application needs attention.
4. React
   Animation can help confirm that an action has been performed or show that the interface is working. The most common example of this are the little "loading" bars and animations that display while a page is loading.
5. Orient
   Animation can help orient a user to where they are on the page. This is commonly used, for instance, when the menu of a site slides down, rather than just appearing abruptly. By animating the menu, it's clearer what has happened to the page. Otherwise, visitors could be confused.

By making sure that your animation accomplishes one of those primary goals, you can ensure that you are improving your site's usability, rather than degrading it.

To get our latest articles when they are posted, please subscribe by e-mail or RSS.

Filed Under: web