Home   Articles We've Written   Why Animate?

Why Animate?

Need animation be superfluous? On the contrary. Sometimes it's essential.

We are all too familiar with Web sites that misuse and abuse animation. At the end of a busy day, in need of some small piece of information, our bleary gaze is assaulted by tedious graphics that spin, twirl, sparkle, or flash. This may be appropriate if the point is to draw our eyes to those graphics. But the goal of most Web sites is to get us to stay, learn, return, and buy (or at least buy into). Spinning logos, blinking banner ads, and sparkling text bullets undermine the goal, diverting our attention from a site's content. Get rid of them! Instead, use animation in support of your goals.

I'm certain IKEA sold more bookcases thanks to the wonderful use of animation it once had on its Web site, which showed potential customers how to assemble a BILLY bookcase. In the animation, boards moved into place to form the bookcase. Animated close-ups provided visual detail to illustrate the techniques, tools, and materials used to fasten the boards together. Books flew onto the finished bookcase where a goldfish blew bubbles in its bowl, adding a touch of whimsy to the animation. Words alone, or even words and static pictures, aren’t nearly as instructive (or as much fun), as anyone who has assembled furniture can attest.

IKEA did a number of things right in this presentation. It provided advance warning that the animation requires Java or Macromedia Flash. It provided simple, visual help. It put the user in control of the pace of the animation, and it allowed the user to move back and forth between steps. Best of all, the animation loaded fairly quickly (about 12 seconds) and ran smoothly on my Flash-enabled browser, which was connected at 28.8Kbps.

SmartMoney.Com keeps its customers coming back for more with its offsite link.Map of the Market. This animation presents data from over 600 stocks at once, updating market information every 15 minutes. It uses shape and size to organize stocks into market sectors and to compare stocks to one another within each sector. It uses color to represent each company's price performance. Move your mouse over a rectangle, and a panel pops up with the name of the company and current market information. Click on a rectangle, and you get a menu of options leading to more information about the company, its industry, and its market sector. Many of these options tie into SmartMoney.Com's other interactive research tools.

Like IKEA, SmartMoney puts you in the driver's seat. It offers the user a control panel to view other time periods, pick out market movers, and highlight top gainers and losers. Colorblind? SmartMoney offers an alternative. Map of the Market is a Java applet, but it loads relatively quickly -- especially considering the amount of data it provides. It loaded for me in 25 seconds with my 28.8Kbps connection.

Cars.Com is clear about its mission, writing that the Web site is intended to be "a valuable tool for every portion of the vehicle-ownership experience, including buying, maintaining and selling a vehicle." To that end it offers a number of features to keep visitors coming back. It provides a database of new and used vehicles for sale. It hosts CarTalk, the Web site for NPR's notorious automotive wise guys Tom and Ray Magliozzi. Cars.Com provides news of automotive recalls and rebates. It even teaches, in layman's terms, about the inner workings of a car. And guess what? It uses animation to do it.

Cars.Com's offsite link.Interactive Car provides a system-by-system animated tour of an automobile's components. Choose to view the braking system, and you'll get a choice of disk or drum brakes. Select disk brakes, and then click and hold a button to apply brake pads to the rotor to stop the brake hub from turning. Now choose to view the suspension system, and select the independent suspension animation. Click the up and down buttons to see how the independent suspension's control arm, springs, and shock absorber work independently to allow one wheel to move up and down with minimal effect on the other wheels.

Cars.Com lets users control their survey of the automobile's components. They can view any of the eight systems in any sequence. They can choose which components to explore and which to ignore. For me at least, the clearly written explanations and simple animated visuals made the learning experience a pleasure. Interactive Car is a Flash animation. Connected at 28.8Kbps, the initial load took about 25 seconds, and each new component took an additional 5 to 10 seconds to load.

Caution, though. I've mentioned the load time that I experienced with each of these animations. About response times, usability expert Jakob Nielsen argues that "system response needs to happen within about offsite link. 10 seconds to keep the user's attention, so users should be warned before slower operations. On the web, current users have been trained to endure so much suffering that it may be acceptable to increase the limit value to 15 seconds." I was willing to wait for these animations because I had heard each one was worth the wait. None of the sites notified me of the expected load time, and under normal circumstances it is unlikely I would have had the patience to wait 25 seconds for a page to load.

Why animate? Because sometimes pictures are better than words, and sometimes animated pictures are better than static pictures for communicating clearly. When that's the case, animate!

Home   Articles We've Written   Why Animate?

Copyright © 1996 - 2017 SoftMedia Artisans, Inc. All Rights Reserved.