Transitions are a powerful way to communicate change in a user interface. Transitions can communicate a change in relationships between elements on a page or a change in an element's state. Additionally, when interactions are complex or involve important changes transitions can be used to slow down an interaction allowing the user to "see what just happened." During lengthy processes, transitions can be used to make time seem to pass faster by distracting the user during the waiting time.

The Way the Real World Works

In the real world most things don't just appear or disappear immediately. They might fade, wither, grow or fly away. Yet in most user interfaces little consideration has been given to making objects operate more like the real world.

Transitions Communicate

• If an object fades away we know it changed state from visible to invisible even if we are not staring directly at the object.
• If an object fades into view then we know the object has arrived.
• If an object fades rapidly it is seen as more important. If it fades slowly its importance is lower.
• If an object is coming at us (getting larger and appearing to go past us) then we think of it as something that is important (and dangerous). Interestingly Matt Webb in his talk on Broken Windows [1] points out that the Mac OS X Widgets use this transition effect to indicate that the widgets are going away (reduced in importance). The point being is the transition actually communicates the opposite of its intended meaning.
• If an object zooms down in size rapidly and disappears it will capture the user's attention immediately. However if the object was not in the user's immediate focus (user was not directly manipulating the object) they will glance to see the change but may not even be able to tell what object went away.

Rules of Communication

Transitions are a communication device. Having said that, it is important that the goal of communication be kept in mind regarding any transition effects.

In more engaging or entertainment based sites a transitional effect can become more important and thus may require longer transition times or more effects. In communication-oriented web sites, the transition is secondary and is only communicating changes in the interface.

From the discussion above we can extract some general rules.

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 naturally 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 reinforces the concept of 'symmetry of action' (the opposite action is implied by the initial action.)

Technical Explanation: The Brain's Attention Center

Sudden movement or or change in lighting is processed by a second region in the brain that is dedicated to visual processing. Besides the visual cortex which processes what we normally think as vision, the superior colliculus gets a copy of the same visual information. This region of the brain is dedicated to attention capture. Its main purpose is to process sudden changes in the visual space that might indicate danger or importance. It guides reflex movements telling the body to orient toward the change [2].

• [1] Webb, Matt (2005). Broken Windows. http://www.archive.org/download/Reboot70HallAspeakerssaturday/9.Matt_Webb.mp4
• [2] Stafford, Tom, Webb, Matt (2004). Mind Hacks: Tips and Tools for Using Your Brain. Sebastopol, CA. O'Reilly Media, Inc.