Best Practice · Last modified July 15, 2009
Bookmark this on Delicious
When an object or data value changes on the screen (and not too many changes are happening all at once), call attention to the change with a lightweight confirmation.
For example, change the background color of the content area or data value to a light pastel color. The color difference from the background needs to have enough contrast to be distinct from the normal background color but not too much as to be overwhelming.
Have the highlight appear instantly when the change occurs and then fade out within one second or less.
What Problem Does This Solve?
The designer needs to call attention to where a data value or content has changed within the interface.
When to Use This Pattern
- You want to provide a lightweight confirmation that the user's interaction caused a change to a data value or content. A confirmation dialog is the heavy-weight option to using a highlight.
- You need to call attention to changes in the interface that are happening without the user interacting. Examples are real world monitoring systems that keep the interface updated with live values.
- There are not too many changes happening at once. If values are changing very frequently or are changing all over the page using a highlight for each change can be very distracting.
What's the Solution?
- Change the background color of the content area or data value to a light pastel color.
- The color difference from the background needs to have enough contrast to be distinct from the normal background color but not too much as to be overwhelming.
- The highlight should appear instantly.
- The highlight should fade out within 1 second or less.
Why Use This Pattern?
When providing micro updates to a page (instead of refreshing the whole page), the spotlight transition is very useful. The eye can notice the change and be clued in to where a change happened.
For more information, see the rationale for Transition patterns.
See the general discussion about accessibility for Transition patterns.