Fade In Transition

Best Practice · Last modified July 15, 2009

When an object is being added to the user's interface, have the object fade in from invisibility to visibility to communicate the transition.

Animate the fade-in by increasing the opacity from full transparency (0% opacity) to its normal value.

The fade can slightly slow down the interaction, letting the user know what happened.


Delicious Bookmark this on Delicious

What Problem Does This Solve?

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

When to Use This Pattern

  • Adding a content module to a page during a drop.
  • Adding objects to a container.
  • Creating a strong association of where an object has been added.
  • Need to signal something got added that is not part of the user's main focus.
  • The adding of content is done by the system.
  • In conjunction with Cross Fade Transition.

What's the Solution?

  • Increase the opacity of an object from 0% to 100% (or whatever is deemed the normal intensity.) This communicates:
    • The object is now available.
    • The object might be important to focus on.
    • Where the object is now located (for future reference).
  • See Digg Spy for an example of fading in a new story

Fade Speed

  • Because fades do not catch the eye as strongly as move transitions, a fade can last a little longer.
  • The general rule is that fades should not take longer than a second, with the normal time being between 0.25 - 0.5 seconds. If the fade is associated with new information coming in that is not normally in the user's focus, you might want the fade to be a little faster in order to catch their eye. However if, the fades are happening in the main area of focus, the transitions can be slower.
  • A slow fade does not catch the user's attention as much as a fast fade. Therefore use a slow fade for items being added or shown to the user that are not centrally important.
  • A fast fade should be used when it might be more important to catch the user's attention.
  • Depending on the underlying animation library and the individual machine's performance the fade effect may not be a smooth as anticipated.

Why Use This Pattern?

  • A fade can help slow time down. Instead of something happening instantly, a fade can slightly slow down the interaction letting the user know what happened.
  • In addition, since fades are less noticeable than a move animation, they are good for indicating less important changes.

For more information, see the rationale for Transition patterns.

Accessibility

See the general discussion about accessibility for Transition patterns.