SfC Home > Web Design >

Explanation of Uses of Animation on a Web Page - Succeed in Web Design. Also refer to GIF animator, Adobe Flash, java, advertising, banner ads, demonstrations, entertainment, cartoons, navigation, mouse-over, Ron Kurtus, School for Champions. Copyright © Restrictions

Uses of Animation on a Web Page

by Ron Kurtus (revised 24 June 2008)

Animation on a web page is any form of movement of objects or images. Animations are usually done in Adobe Flash, although Java and GIF animations are also used in many websites. Streaming video in Flash is coming increasingly popular.

Reasons to have motion on a web page are to draw attention to something, to provide a demonstration or to entertain. The need for movement on a page depends on the purpose and content of the page. A financial institute would not really need animations on their pages, while an entertainment site obviously would have such movement.

Questions you may have include:

• How does animation draw attention?
• When is a demonstration needed?
• How is entertainment used?

This lesson will answer those questions. There is a mini-quiz near the end of the lesson.

Drawing attention

You can use animation to draw attention to something you want the user to look at. This can range from blinking text to movement of items as in a cartoon. It is primarily used in online advertisement.

Entice you to action

For example, you all have seen banner ad in websites. The animations in the add are intended to attract your attention and entice you to take an action, like clicking on the banner to see more about the product or service. Another example is an animated company logo. Its movement draws your attention to the logo.

Too much no good

Unfortunately, too much of a good thing can backfire. Animated banner ads or company logos can become very irritating if they are continually blinking or moving while you are trying to read the content of the page. Certainly, the objective of the company is not to alienate customers, but that is often what they do through over-animation.

No value

Drawing attention to something of no use is also a negative application of animation. An example is an animated separator line. Cute, but of no real value.

Demonstrating

One reason to have animation is to help to demonstrate something you are explaining in your message.

Useful for products

Although a picture or illustration is useful, in some situations it is not sufficient to describe some action. An animation or video is necessary. An example of this is demonstrating how a device works.

Don't force users

Note that a demonstration is only effective if the user wants to see it. Some business sites force users to watch a demonstration of their product line, when they really wanted other information.

Slow loading time

Another problem is when animations or videos take too long to download. This often results in abandonment of the page.

Entertaining

If course, entertainment in the form of a game or a comic strip often uses motion fulfill its goal or to keep interest. There are many online game and entertainment sites on the Web.

Only when asked for

Can show creativity

Sites advertising creative services—especially related to graphical design, entertainment, or advertising—should have animation to show off their creativity.

Summary

Animation on a web page is any form of movement of objects or images. Reasons to have motion on a web page are to draw attention to something, to provide a demonstration or to entertain. The need for movement on a page depends on the purpose and content of the page.

Answers to Readers' Questions

Use your imagination to create new things

Resources

The following resources provide information on this subject:

Websites

Web Page Design Resources

Books

Top-rated books on Website Design

Miscellaneous

Mini-quiz to check your understanding

1. What should you beware of when adding animation to a page?

2. Why would you demonstrate a concept using animation?

3. What purpose would a graphic designer have to include animation in his or her site?

If you got all three correct, you are on your way to becoming a Champion in Web Design. If you had problems, you had better look over the material again.

What do you think?

Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. We will try to get back to you as soon as possible.

Share link

Feel free to establish a link from your website to pages in this site.

Or use our form to send this link to yourself or a friend.

Students and researchers

The Web address of this page is
www.school-for-champions.com/web/animation.htm.

Please include it as a reference in your report, document, or thesis.

Where can you go from here?

School for Champions

Web Design topics

Using Animation on a Web Page