Fade In Transition

From Interaction-Patterns.org

Kategorie:Interface Interaction

Contents 1 Expand 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] Expand Transition

[edit] Quick Summary

The designer needs to communicate that an object is being added to the page or application.

[edit] Visual Examples

Found at digg.com/spy

[edit] Examples found on the World Wide Web

• http://www.digg.com/spy

[edit] Use When

• Adding a content module to a page during a drop.
• Adding objects to a container.
• Creating a strong association of where an object has been added.
• Need to signal something got added that is not part of the user's main focus.
• The adding of content is done by the system.
• In conjunction with Cross Fade Transition.

[edit] Possible Solution

• Increase the opacity of an object from 0% to 100% (or whatever is deemed the normal intensity.) This communicates:
  • The object is now available.
  • The object might be important to focus on.
  • Where the object is now located (for future reference).
• See Digg Spy for an example of fading in a new story

Fade Speed

• Because fades do not catch the eye as strongly as move transitions, a fade can last a little longer.
• The general rule is that fades should not take longer than a second, with the normal time being between 0.25 - 0.5 seconds. If the fade is associated with new information coming in that is not normally in the user's focus, you might want the fade to be a little faster in order to catch their eye. However if, the fades are happening in the main area of focus, the transitions can be slower.
• A slow fade does not catch the user's attention as much as a fast fade. Therefore use a slow fade for items being added or shown to the user that are not centrally important.
• A fast fade should be used when it might be more important to catch the user's attention.
• Depending on the underlying animation library and the individual machine's performance the fade effect may not be a smooth as anticipated.

[edit] Rationale

• A fade can help slow time down. Instead of something happening instantly, a fade can slightly slow down the interaction letting the user know what happened.
• In addition, since fades are less noticeable than a move animation, they are good for indicating less important changes.

[edit] This pattern is being used to

• Immediate Feedback

[edit] Source

• http://developer.yahoo.com/ypatterns/pattern.php?pattern=fadein