Animated Transition

The "slurp" of a window minimizing onto the Mac OS desktop

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.

Alternatively, the interface might have sections that can be closed and opened again, either by the system or by the user—such as trees with closable parent nodes, standalone windows that open and close, or an interface built with Collapsible Panels. 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 is in the virtual space. Zooming in and out, for instance, can throw off her spatial sense when it’s done instantaneously, as can rotation and the closing of entire sections that prompts a re-layout of the screen. Even scrolling down a long page of text, when it’s jumpy, can slow down the reader.

But when the shift from one state to another is visually continuous, it’s not so bad. In other words, you can animate the transition between states so that 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 instantly 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 trying 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 might show it shrinking while the other panels expand to take up the space it leaves behind. To whatever extent possible, make it look like something physical is happening.

But this pattern is a double-edged sword. 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 to keep it 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 pressing 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 pressing the down arrow key 10 times. Again: keep it quick and responsive.

Some of the types of transitions listed by the Yahoo! pattern library and Designing Web Interfaces are as follows:

  • Brighten and dim
  • Expand and collapse
  • Fade in, fade out, and cross-fade
  • Self-healing
  • Slide
  • Spotlight

In other libraries

For more discussion and tons of great examples of the Animated Transitions in the preceding list, see the Transition cluster of patterns at the Yahoo! pattern library. In addition, Scott and Neil’s Designing Web Interfaces (and its companion site) contains an entire chapter on transitions. It covers some of the same ground as the Yahoo! site, but it’s worth reading.