Mac OS X's "genie effect" animates a window being minimized.
Smooth out a startling or dislocating transition with an animation
that makes it feel natural.
Users move through a large virtual space, such as an image,
spreadsheet, graph, or text document. They might be able to
zoom in to varying degrees, pan or scroll, or rotate the whole
thing. This is especially useful for information graphics, such
as maps and plots. (See Chapter 6 for more about information
Alternatively, the interface might have sections that can be
closed and opened again, either by the system or the user -- such
as trees with closable parent nodes, standalone windows that open
and close, or an interface built with
(Chapter 4). Animated Transition might also be used when users
jump from one separate page to another.
All of these transformations can disrupt a user's sense of where
she in in the virtual space. Zooming in and out, for instance,
cana throw off her spatial sense when it's done instantaneously,
as can rotation and the closing of entire sections that prompt
a re-layout of the screen. Even scrolling down a long page of
text, when it's jumpy, can slow a reader down.
But when the shift from one state to another is continuous, it's
not so bad. In other words, you can animate the transition
between states so it looks smooth, not discontinuous. This
helps keep the user oriented. We can guess that it works because
it more closely resembles physical reality -- when was the last
time you instantaneously jumped from the ground to 20 feet in
the air? Less fancifully, an animated transition gives the
user's eyes a chance to track a location while the view changes,
rather than try to find the location again after an abrupt change.
When done well, animated transitions bolster your application's
"cool factor." They're fun.
For each type of transformation that you use in your interface,
design a short animation that "connects" the first state with
the second state. For zoom and rotate, you might show the
in-between zoom or rotate levels; for a closing panel, you may
show it shrinking while the other panels expand to take up the
space it leaves behind. To the extent possible, make it look
like something physical is happening.
If any of these patterns are double-edged swords, this one is.
Beware of making the user motion-sick! The animations should be
quick and precise, with little or no lag time between the user's
initiating gesture and the beginning of the animation. Limit it
to the affected part of the screen; don't animate the whole
window. And keep it short. My preference would be well under a
research shows that 300 milliseconds might be ideal for smooth
scrolling. Test it with your users to see what's tolerable.
If the user issues multiple actions in quick succession, such as
hitting the down arrow key many times to scroll, combine them into
one animated action. Otherwise, the user might sit there through
several seconds' worth of animation as the punishment for hitting
the down arrow key 10 times. Again: keep it quick and responsive.
Zooming in on
"The Secret Lives of Numbers"
The web application "The Secret Lives of Numbers" lets users
explore a very wide range of data -- it shows zoomable histograms
of number usage across the Web, from 0 to 100,000. It uses
animated transitions to transport the user from high-level
overviews down to very small, detailed views. This screenshot
shows what happens when you hold the mouse button down over one
number, in this case 2000: the histogram zooms in slowly,
smoothly animating everything on the graph as it goes.
Some things to notice:
- The histogram bars become wider as the viewer zooms
in, thus preserving a sense of size and scale. They
behave almost like solid objects. When they're wide,
you know that you're zoomed way in.
- The number labels on the lefthand margin slowly spread
apart, revealing lightly-written minor labels between
the white ones. The interval between the white labels
also changes, from 25 to 10 to 5, while the pixel
distance between them is kept relatively constant.
(This is important for looking up numbers; you never
want an interesting histogram bar to be too far away
from a readable label.)
- The vertical gridlines squish together as the horizontal
scale compresses. As the minor gridlines get too close
together, they fade into the black background, and the
gridline labels are removed selectively. The graph is