Transition

The user is changing or narrowing their focus of operation, completing a command, opening a new area in the interface or they need to know that application state is changing. The designer wants to keep the user aware of a change in relationship between elements, a change in application state, a way to slow down an interaction, or make time seem to pass faster.

Delicious Bookmark this on Delicious

Patterns in this Category

Animate Transition

Designer needs to communicate that an object is changing its spatial relationship within the page.

Brighten Transition

Designer wants to make a previously dimmed object a point of focus by making the object bright again.

Collapse Transition

The designer needs to communicate that an object is no longer of primary importance, yet wants to keep it available in a smaller form.


Cross Fade Transition

Designer wants to communicate that a new view of an object is replacing the previous view of the object.

Dim Transition

Designer needs to communicate that an object is of secondary importance.


Expand Transition

Designer needs to show the detail of an object in its context or reveal a previously collapsed object.


Fade In Transition

Designer needs to communicate that an object is being added to the page or application.

Fade Out Transition

Designer needs to communicate that an object is going away.

Self Healing Transition

Designer wants to show that an object has been removed from a list of objects.


Slide Transition

The designer wants to bring new content into the page and would like to communicate the additional content's relationship with other items on the page.

Spotlight Transition

Designer needs to call attention to where a data value or content has changed within the interface.


Why Use This Pattern?

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].

Accessibility

Since transitions are about visual communication they by default are not accessible by users with visual impairments. If what the transition communicates is important for the user not to miss then you can consider these techniques.

  • Set the focus on the item that got changed. This enables assistive technologies to detect where a change happened. Of course if the user is typing or needs the focus in another area then this solution cannot be used.
  • Provide ALT tags that preview what will happen when the user engages an interaction. For example, if you can close a panel and provide a way to communicate where the panel is collapsed to, you might consider putting text in the ALT for the image that tells the user what will happen when the click/activate the close icon and how they can get the panel open again.