 |
 |
 |
 |
 |
 |
 |
Effective GIF Animation: Use It - Don't Abuse It
by Scott W. Spain
Once upon a time, Netscape released a browser that supported the Animated GIF format. Shortly thereafter, Microsoft caught on with a version of Internet Explorer. The Web world was excited, to say the least. No longer were we stuck with boring old static pages. We could now add motion to really get our point across.
Several years and millions of animated GIF's later, I'm thinking that maybe the animated GIF format was a mistake. Like so many other Web site elements, they are overused and often abused. Don't get me wrong. I think there is a place for animated GIF's on the Web. I just get frustrated by how often they're used without purpose.
Fact of life: Animation catches your visitors' attention. If you subscribe to this philosophy, and hopefully we all do, why in the world would you put something like this on your Web site? (see Figure 1)
| Figure 1 |
 |
Is "Welcome" the most important thing you have to say? Is that really where you want the attention drawn? If so, perhaps you're wasting your time having a site at all!
|
|
 |
 |
 |
Does this mean that all animation is bad? Absolutely not! Just use it with a purpose. Use no more than one GIF animation on a page, and use it only if you want to draw attention to something specific. For example, let's say you're a company that sells your software online. Over the years you've learned that the best way to peddle your wares is to offer free downloads of demo versions. You clearly want to get more people to download more demos. You may want to consider animating your "Downloads" button. Don't get carried away. Use something subtle. Something that clearly sets this link apart from the rest, but isn't so blatant that it distracts the user from being able to focus on reading the rest of the text on your page. Figure 2 is a good example of what your menu bar might look like.
| Figure 3 |
 |
If it's a concept you'd really like to set apart, consider a graphical icon that does not fall in line with the rest of your navigation elements. While building the site for the Marketing Research Association, we learned that one of their primary site goals was to recruit new members over the Web. Sensing how important this was to them, we created an animated icon that was integrated into paragraph text. The icon (see Figure 3) is colorful and contains motion, but not so much movement that it distracts from the rest of the page.
Next, let's examine the all-too-common use of the animated logo. You see them all over the Web. Company logos are spinning, rotating, blinking, fading, burning, jumping, glowing, and throbbing like crazy! I have one simple question: Why? Why in the world would you animate your logo? What exactly do you think it says about your company? Do you think it says you're high tech, have great customer service, do quality work, or offer a good value? The answer: No. It says "my logo spins". Nothing more, nothing less.
| Figure 4 |
 |
I was once asked to create a splash page to a Web site that contained nothing but a rotating logo, with a "click here to enter" link. The client pointed me to an existing site they had seen this on, as an example of what they were looking for. For the purpose of this article, I recreated what this other company had done, using our sister company's (!Research) logo (see Figure 4).
As an experiment, I contacted 20 of my peers. I had 10 of them go look at the site. I had 10 others visit a competitor's site. I didn't give them any direction. I just asked them to visit the site. I didn't even tell them I'd be getting back to them with questions. I wanted the experience to be as pure as possible. After they visited, I asked them what they thought. Here are the results:
Spinning Logo Company:
The first thing that 7 out of 10 had to say was something along the lines
of "cool spinning logo". Of the 10 who visited, 6 were able
to tell me what that company did.
Company Without Spinning Logo:
I received 4 comments on the look of the site. However, all 10 first
commented on the company, and the services they provide, rather than the
logo. Some liked what the site had to say, while a few didn't. One of
the people I sent actually became a client!
Obviously this was not a controlled scientific research project, but it backed up what I had believed all along. The spinning logo was so distracting that it took the focus off what the company did, and put it on the graphics. A huge mistake, in my opinion.
The only exception to the don't-animate-your-logo rule, is if the #1 objective of your site is logo recognition. If your main purpose is to get people to remember your logo (and this can be a valid purpose), then by all means, animate away! Just don't get too wild. Keep it recognizable, and within the context of the rest of your site. Keep an eye on download times too. Animation can get extremely heavy!
In closing, I'd like to state that GIF animation can be the ultimate tool to accomplish your Web site goals. Just use it with caution. Scrutinize everything you do on your site. Review your goals before adding anything. Especially animation. If it helps you get the job done, and doesn't distract, go for it!
©Copyright 2008 by DigitalBiz Corporation. All Rights Reserved.
