Expand Transition
From Interaction-Patterns.org
Kategorie:Interface Interaction
Contents |
[edit] Expand Transition
[edit] Quick Summary
Designer needs to show the detail of an object in its context or reveal a previously collapsed object. Designer needs to show the detail of an object in its context or reveal a previously collapsed object.
[edit] Visual Examples
| Found at maps.yahoo.com | Found at maps.yahoo.com |
[edit] Examples found on the World Wide Web
[edit] Use When
- Managing lots of content or modules.
- Coupled with shrink to create a way to manage real estate on the screen.
- As part of a rollover system (with Shrink) to emphasize the currently hovered on object (e.g., photos in a photo album).
- Need to see more detail (Y! Local maps).
- Need to interact with content that was previously represented in a thumbnail version.
- When wanting to see the detail of an item in a list (e.g., movie details in a movie list).
- Making content available for edit. Use instead of a popup if the content being expanded is one of many items and there is a benefit to showing the detail in context with the other items.
[edit] Possible Solution
- Increase the size of an object while animating the in-between sizes (tweening). This communicates similar meaning, as does the brighten transition.
- Expand should happen very quickly. A good rule of thumb is complete an expand in less than 0.5 seconds.
[edit] Examples
[edit] Rationale
- Expand is visually more eye-catching than a brighten, especially when combined with the move transition.
- Be careful to not overuse expand. For example, in a photo application, if you provide a rollover to expand photos from thumbnail to a larger size the transitions will become annoying as the user will see them back-to-back. Either remove the transition altogether or make it extremely fast.
