5 Practical Uses for Web Animation

Sholom Sandalow, Wednesday, March 28, 2007 @ 6:47 pm

Most animation being served up on the web serves no purpose other than to distract, irritate, annoy or confuse.  Most web interface designers would tell you, rightly so, that as a general rule, it’s better to stay away from animation.  But there are certain instances where animation would actually provide valuable utility.  Here are Five.

To Indicate Progress
Progress bars might be the most ubiquitous use of practical animation on the web today.  There’s no better way to indicate how far a process has come and how much there is to go than to include one of these simple UI elements on screen.  The key to it’s effectiveness is that its real time, which is the direct result of the animation.

To Alert
At certain points it becomes imperative that an interface spotlight a position on screen and direct the user’s concentration there. Taking advantage of human instinct by using motion to grab the user’s attention, a well designed animation will do just that,

To Indicate Hiding / Revealing Items
In addition to providing a nice polish to an otherwise binary operation, animated show hide items provide important information—because motion is involved in hiding an item, they let the user know where to access an item that is currently hidden.

To Convey Statelessness
Through over a decade of conditioning, web users expect sites to behave according to the page model, in which each new display represents a new page load.  However, in an Ajax/Flash/DHTML world, it’s important that rich interactions, which by definition do not conform to the page model, be clearly illustrated as such, so that users know what to expect when they hit the back button.  Animating between display states is a great way to achieve this, because it unambiguously lets the user know that no new page has loaded.

To Illustrate Complex Tasks
Sometimes Two or even Three dimensions are not enough to convey all the information that needs to be conveyed.  In those cases an animated illustration can do the trick.

user experience design

Comments

• Leave a comment
• Comment feed for this post
• TrackBack URL

None so far.

Leave a comment