Using Animation

There are some very good reasons for using animation on a page:

It draws the user's eyes to the point of the movement.
It adds interest to a page.

There are some disadvantages, however.

If not used wisely, you can draw the user's eyes to the wrong point on the page. For example, from the Internet you can find many cute little animated icons that can dress up your pages. Using these icons, however, draws the user's eyes to an object that can take the reader off the page. For example, an animated arrow icon to move to the next page encourages the user to move to the next page instead of reading the current page. In the same way there is generally little content in a horizontal bar. Why animate the bar when it will distract from the message? When animation is used, it should be a part of the content.
If not used correctly, animated images can be large files that take too long to load. Animated GIFs with many colors and frames are particularly bad at this, as well as large animated images.

You can do animation several ways:

Use animated GIFs. This involves storing multiple images in a single GIF file. You can see an example of this with the kitten on this page. There are plenty of shareware and commercial programs that enable you to do this and some animated images on the Web. Some of best animated GIFS do it by adding a small touch of animation to a larger (generally vector) image. An example is at: http://www.urlsinternetcafe.com/staff/staff.html. Only the smoke is animated - the rest is a static image. This site has several other examples of this technique.
If you are doing animation this way
- Use as few colors as possible. You can specify the number of colors when saving a GIF in Adobe Photoshop(TM).
- Keep the image as small as possible.
- Use as few frames as possible. No more than three or four.
Using Flash(TM) or Adobe's LiveMotion(TM). Both support both animation and sound. This requires the client's browser to have the free shockwave plugin installed, but almost all users now have this plugin, as it is an integral part of later versions of both Netscape and Microsoft browsers. To check your browser and to get the plugin if necessary, go to http://www.shockwave.com or http://www.macromedia.com . Flash supports vector graphic images, which load faster than GIFs and can be easily resized without losing resolution.
Using JAVA or JAVASCRIPT (see the status bar of this page). These are essentially programing languages, so you can do a lot of interactive programming using these. JAVA is a compiled language, which offers protection of your code. With Javascript, you don't need a JAVA compiler, but your code is exposed to any user.
Using DHTML. This gives you smaller files than Flash and requires no plugins. The newer browsers all support DHTML, but the implementations are different. This means setting up the pages to test for the user's browser and branching accordingly.
Various movie formats (as QuickTime(TM)) and Shockwave are also supported. These are all slow loading and require plugins.

In our design work, we generally use Flash(TM) with some Javascript, and occasionally small animated GIFs.

9/23/2004