Brighten Transition

Best Practice · Last modified July 15, 2009

When a previously dimmed object has now become active or available, brighten its appearance to signal the renewed availability or changed state to the user.

Animate the brightening transition from the dimmed state to a state of 100% opacity.

Delicious Bookmark this on Delicious

What Problem Does This Solve?

The designer wants to make a previously dimmed object the point of focus, signal that it is now active or that it is now available.

When to Use This Pattern

  • An object was previously dimmed and now the user is interacting with it.
  • The user has hovered over a previously dimmed object.
  • An object has been updated with new information.
  • An object's state has changed.
  • It is not important that the change automatically takes over the user's focus.

What's the Solution?

  • Define two states: the dimmed state and the brightened state.
  • Set the brightened state at 100% opacity (alpha).
  • See the Dim Transition for a discussion about the dimmed state.
  • Animate the transition between the two states (Brightening: dimmed to full 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) should be used 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 attention the dimming and brightening of an area on the screen will get is dependent on the speed of animation (faster is more eye-catching) and the contrast between the two states (greater contrast; more attention).

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.


See the general discussion about accessibility for Transition patterns.