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
Entertainment when it isn't asked for is a turn-off. This type of animation is also not appropriate for most business sites.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.
Use your imagination to create new things
Resources
The following resources provide information on this subject:
Websites
Books
Top-rated
books on Website Design
Mini-quiz to check your understanding
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?
Using Animation on a Web Page