Focus
From Interaction-Patterns.org
Kategorie:Interface Interaction
Contents |
[edit] Focus
[edit] Quick Summary
On the page I got it from they call it Spotlight but I've found that a little irritating since all the Mac users think of the search function in Mac OS x. The working title for this pattern is Focus. It dimms those elements which aren't of interest and once you're done with one element it leads you to the next one. It reminds me a little of a Wizard. Could be used to show you in which order you need to click buttons to perform a particular task. The designer needs to call attention to where a data value or content has changed within the interface.
The designer needs to call attention to where a data value or content has changed within the interface.
[edit] Visual Examples
| Found at extjs.com |
[edit] Examples found on the World Wide Web
[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] Possible Solutions
- 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] 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.
