Home Articles We've Written Why Animate?
Need animation be superfluous? On the contrary. Sometimes it's
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 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
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.
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 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?