guidelines for transitions (a.k.a. animated effects)

Bill Scott offers an interesting discussion on animated effects (or as he calls them, transitions). I first became interested in using animation when I was researching the visualization of dynamic networks. One of my favorite examples of animation in a UI comes from GnuTellaVision, a project of some students at Berkeley (Ka-Ping Yee was one of them). GnuTellaVision used animation to help the user orient herself as the network gained and lost nodes.

Anyway, in Bill Scott's blog post he offers an interesting write-up on how the brain processes movement. He also offers guidelines for using animation in user interfaces. I've reposted those guidelines here for safe-keeping. :-)

Guidelines for Transition Effects
From the discussion above we can extract some general principles for transitional effects.

1) The more rapid the change the more important the event.
2) Rapid movement is seen as more important than rapid color change.
3) Movement toward the user is seen as more important than movement away from the user.
4) Very slow change can be processed without disrupting the user's attention.
5) Movement can be used to communicate where an object's new home is. By seeing the object moving from one place to another we understand where it went and therefore will be able to locate the object in the future.
6) Transitions should normally be reflexive. If an object moved and collapsed to a new spot, you should be able to open it and see it open up with the reverse transition. If you delete an object and it fades, then if you create an object it should fade into place. This creates a concept of symmetry of action.

-- courtesy of Bill Scott