Template:Example

From Interaction-Patterns.org

Kategorie:Interface Interaction

Contents 1 Dim Transition 1.1 Quick Summary 1.2 Visual Examples 1.3 Examples found on the World Wide Web 1.4 Use When 1.5 Possible Solution 1.6 Rationale 1.7 This pattern is being used to 1.8 Source

[edit] Dim Transition

[edit] Quick Summary

This pattern is presenting a way of how to decrease the user attention on a certain area by dimming this particular are on the interface. The parts of the interface appear to be of secondary importance, not available or currently inactive.

[edit] Visual Examples

Found at www.tomtom.com	Found at www.digg.com/spy
Found at www.tripit.com	Found at chat.app

[edit] Examples found on the World Wide Web

• http://www.netvibes.com
• On skitch when you want to edit a picture it uses cursor invitation and and a change of font to indicate that this title is editable: http://www.skitch.com

[edit] Use When

• You need to reduce the amount of visual information the user has to process.
• You need to communicate the object has diminished in importance, become unavailable, is not in focus, or has become inactive.
• You need to let the user see the object and whatever information it might be displaying, but in a non-distracting manner.

[edit] Possible Solution

• Define two states: the brightened (normal) state and the dimmed state.
• The dimmed state should be visually distinct from the normal state. Decreasing the opacity by 50% is a good place to start. The amount to dim the object is determined by:
• The amount to dim the object should factor in:
  • How important it is to see items underneath the dimmed object (as in a drag operation).
  • How important the readability of the content of the dimmed object.
• See the Brighten Transition for a discussion about the brightened state.
• Animate the transition between the two states (Dimming: full opacity to dimmed 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) is useful 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 the dimming and brightening an area of the screen will get noticed is dependent on the speed of animation (faster is more eye-catching) and the contrast between the two states.
• Given this information, dimming and brightening an area is an effective way to communicate subtle or secondary changes in an interface.

[edit] This pattern is being used to

• Immediate Feedback

[edit] Source

• The pattern described by the Yahoo! Design Pattern Library. This article is copied from there: http://developer.yahoo.com/ypatterns/pattern.php?pattern=cursorinvitation#
• Deepen your knowledge about this pattern and patterns in general by reading this article about AJAX evangelist Bill Scott: http://www.netmag.co.uk/zine/design-culture/designing-with-patterns
• More about patterns in this blog entry when Yahoo! first released its Design Pattern Library: http://yuiblog.com/blog/2006/02/13/yahoo_patterns_released
• http://ajaxpatterns.org/One-Second_Spotlight
• Maybe this: http://www.couloir.org