Moving images have an overpowering effect on the human peripheral vision. This is a survival instinct from the time when it was of supreme importance to be aware of any saber-toothed tigers before they could sneak up on you. These days, tiger-avoidance is less of an issue, but anything that moves in your peripheral vision still dominates your awareness: it is very hard to, say, concentrate on reading text in the middle of the a page if there is a spinning logo up in the corner. Never include a permanently moving animation on a web page since it will make it very hard for your users to concentrate on reading the text.
Animation is good for:
Showing continuity in transitions. When something has two or more states, then changes between states will be much easier for users to understand if the transitions are animated instead of being instantaneous. An animated transition allows the user to track the mapping between different subparts through the perceptual system instead of having to involve the cognitive system to deduce the mappings. A great example is the winner of the first Java programming contest: proving the Pythagorean theorem by animating the movement of various squares and triangles as they move around to demonstrate that two areas are the same size (unfortunately, this otherwise good page uses animated text inappropriately: the text moves constantly and is hard to relate to the events in the main animation).
Indicating dimensionality in transitions. Sometimes opposite animated transitions can be used to indicate movement back and forth along some navigational dimension. For example, paging through a series of objects can be shown by an animated sweep from the right to the left for turning the page forward (if using a language where readers start on the left). Turning back to a previous page can then be shown by the opposite animation (sweeping from the left to the right). If users move orthogonally to the sequence of pages then other animated effects can be used to visualize the transition. For example following a hypertext link to a footnote might be shown by a "down" animation and tunneling through hyperspace to a different set of objects might be shown by an "iris open" animation.
Illustrating change over time. Since an animation is a time-varying display, it provides a one-to-one mapping to phenomena that change over time. For example, deforestation can be illustrated by showing a map with an animation of the covered area changing over time.
Multiplexing the display. Animation can be used to show multiple information objects in the same space. A typical example is client side image maps with explanations that pop up as the user moves the cursor over the various hypertext anchors. It is also possible to indicating the active areas by having them shimmer or by surrounding them with a marquee of "marching ants". As always, objects should only move when appropriate (e.g., when the cursor is over the image).
Enriching graphical representations. Some types of information are easier to visualize with movement than with still pictures. Consider, for example, how to visualize the tool used to remove pixels in a graphics application. In icon design, it is always easier to illustrate objects (a box) than operations (removing pixels), but animation provides the perfect support for illustrating any kind of change operation. In an experiment reported at the CHI'91 conference, Small, and Mander increased the comprehension of a set of icons from 62% to 100% by animating them.
Visualizing three-dimensional structures. Since the computer screen is two-dimensional, users can never get a full understanding of a three-dimensional structure by a single illustration, no matter how well designed. Animation can be used to emphasize the three-dimensional nature of objects and make it easier for users to visualize their spatial structure. The animation need not necessarily spin the object in a full circle: just slowly turning it back and forth a little will often be sufficient. The movement should be slow to allow the user to focus on the structure of the object. Three-dimensional objects may be moved under user control, but often it is better if the designer determines in advance how to best animate a movement that provides optimal understanding of the object: this pre-determined animation can then be activated by the user by simply placing the cursor over the object, whereas user-controlled movements require the user to understand how to manipulate the object (which is inherently difficult with a two-dimensional control device like the mouse used with most computers - to be honest, 3d is never going to make it big time in user interfaces until we get a true 3D control device).
Tuesday, December 30, 2008
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment