Slide Transition
From Interaction-Patterns.org
Kategorie:Interface Interaction
Contents |
[edit] Slide Transition
[edit] Quick Summary
The designer wants to bring new content into the page and would like to communicate the additional content's relationship with other items on the page.
[edit] Visual Examples
| Found at games.yahoo.com | |
[edit] Examples found on the World Wide Web
[edit] Use When
- In place of popup window to avoid having the user have to manage an additional window.
- The content being revealed is strongly associated with another area on the page (the content is attached to another area).
- Editing configuration about an item.
[edit] Possible Solution
- Provide a way to toggle the slide effect (slide in/slide out).
- Provide transitional effects to animate the slide effect (both in and out). See the Animate pattern.
- Make the slide happen quickly (usually this means in 0.25 - 0.5 seconds.)
- Have the animation end by slowing down during the last few pixels of animation (creating the feeling that something keeping it attached to another area on the page.
[edit] Rationale
- Slide is a variation of move where the object is constrained to move either horizontally or vertically (but not both) and is usually anchored with another object. A classic example is a drawer-slide out. In the Mac OSX, the Finder's column view uses a slide transition to bring the contents of subfolders into view.
- Slide retains a strong relationship to the object it slides out from. Menus that slide down are seen as being part of the menu system. Configuration drawers that slide out from the side of a window are seen as coming from the inside of the window and there is no confusion about it being associated with it.
