We often think of cartoons when we hear the word animation. However many interactive media experiences also employ the same motion techniques used to make cartoons.
What makes animation such a useful tool in the interactive designer’s toolbox?
Animation can provide additional information to the user
If a picture says a thousand words, then animations, which are really just rapid sequences of images, multiply that effect. Motion often conveys meaning and can be used for assembly instructions (like how to fold a paper airplane or how to assemble furniture) or to illustrate complex concepts.
Animation can increase usability
The classic user interface animation found in most graphical operating systems like Windows and OS X is the “zooming” effect that occurs when minimizing or maximizing windows. The motion informs the user that the window has not disappeared but is instead hiding in the task bar or dock. Animation can be used to focus the user’s attention on a specific event. The iPhone Maps application “drops” pins onto the map when it finds a matching location for your search. A pulsating blue “beacon” indicates your current location on the map. These features help the user quickly make sense of unfamiliar terrain. There are hundreds of examples within your favorite UI from sliding menus to shaking the active modal dialog when you click on a background window.
For more info on UI animation: http://doloresjoya.com/blog/user-interface-animation/
Are there any downsides to animation?
Animation can be superfluous or even distracting.
Designers should use animation only when it enhances the design. Does it explain a complex concept? Focus the viewer’s attention when an event occurs? Convey a specific look or emotion that typically implies motion (e.g. “fast”, “sweeping”)?
Accessibility
Almost all of the widely used animation technologies (see below) are not considered accessible. Animation is inherently visual and therefore difficult to translate into any of the other senses. On-screen text can be spoken using a screen reader. Unfortunately, a similar technology has not been developed to describe audibly animation.
Online animation technologies
This list is by no means exhaustive, but includes some of the most popular technologies in use today.
No browser plug-in required:
- Animated gif images
- Javascript libraries jQuery and others
- HTML5 now includes the <canvas> element which can be used with javascript for drawing and animation
Browser plug-in required:
What animation technologies are you using? Where else do you think animation can enhance the user experience?