Spotlight
From Interaction-Patterns.org
Contents |
[edit] Spotlight
[edit] Quick Summary
The designer needs to call attention to where a data value or content has changed within the interface.
[edit] Visual Examples
Examples needed.
[edit] Examples found on the World Wide Web
Examples needed.
[edit] Use When
- 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.
[edit] Rationale
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.
[edit] Possible 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.
[edit] Technical Instructions and/or Source Code
Yet to be done.
[edit] Source
