Fade Out Transition
From Interaction-Patterns.org
Kategorie:Interface Interaction
Contents |
[edit] Fade Out Transition
[edit] Quick Summary
The designer needs to communicate that an object is going away.
[edit] Visual Examples
Coming
[edit] Examples found on the World Wide Web
[edit] Use When
- Removing a content module from a page.
- Removing objects from a container.
- Creating a strong association of where an object is removed from.
- Need to signal something got removed that is not part of the user's main focus.
- The removal of content is done by the system.
- In conjunction with Self-Healing Transition.
- In conjunction with Cross Fade Transition.
[edit] Possible Solutions
- Diminish the opacity of an object from its normal value down to transparent (0% opacity.) This communicates:
The object is no longer available (common for delete).
- A stronger impression (due to the transition) that the object went away (the user saw it leaving).
Where the object was removed from.
- 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.
