The Second Edition is out!
Visit designinginterfaces.com to read excerpts and learn more.

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.

Use when:

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:

  • 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 kept uncluttered.