Dim Transition

Best Practice · Last modified July 15, 2009

To indicate that an object is of secondary importance or is currently either unavailable or inactive, transition the object o a dimmed state.

Animate the dimming transition from a brightened state of 100% opacity to a dimmed state of something like 50% opacity.


Delicious Bookmark this on Delicious

What Problem Does This Solve?

The designer needs to communicate that an object is of secondary importance, not available or currently inactive.

When to Use This Pattern

  • You need to reduce the amount of visual information the user has to process.
  • You need to communicate the object has diminished in importance, become unavailable, is not in focus, or has become inactive.
  • You need to let the user see the object and whatever information it might be displaying, but in a non-distracting manner.

What's the Solution?

  • Define two states: the brightened (normal) state and the dimmed state.
  • The dimmed state should be visually distinct from the normal state. Decreasing the opacity by 50% is a good place to start. The amount to dim the object is determined by:
  • The amount to dim the object should factor in:
    • How important it is to see items underneath the dimmed object (as in a drag operation).
    • How important the readability of the content of the dimmed object.
  • See the Brighten Transition for a discussion about the brightened state.
  • Animate the transition between the two states (Dimming: full opacity to dimmed opacity.)
  • Determine the speed of animation.
  • A fast animation (less than a half-second) should be used when
    • There are a several changes that can happen at once.
    • Other changes in the interface must wait on this animation to finish.
    • For small areas of change.
  • A slow animation (greater than half second) is useful when:
    • The change that occurred is less important.
    • Changes happen less frequently.

Why Use This Pattern?

Color changes do not generate the same level of attention in the brain that movement changes generate. How much the dimming and brightening an area of the screen will get noticed is dependent on the speed of animation (faster is more eye-catching) and the contrast between the two states.


Given this information, dimming and brightening an area is an effective way to communicate subtle or secondary changes in an interface.


For more information, see the rationale for Transition patterns.

Accessibility

See the general discussion about accessibility for Transition patterns.