Animated Transition
Mac OS X's "genie effect" animates a window being minimized. | |
What: |
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
graphics.)
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 Closable Panels (Chapter 4). Animated Transition might also be used when users jump from one separate page to another. |
Why: |
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. |
How: |
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 second, and 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. |
Examples: |
|
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:
|
|