From Interaction-Patterns.org
[edit] Brighten Transition
[edit] Quick Summary
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.
[edit] Visual Examples
[edit] Examples found on the World Wide Web
[edit] Possible Field of Application
- 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.
[edit] Possible 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.
[edit] Rationale
- 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.
[edit] This patterns is being used to
[edit] Source
