Best Practice · Last modified July 15, 2009
Bookmark this on Delicious
When a previously collapsed object has now become active or available, expand it back to its original size to signal the renewed availability or changed state to the user.
Rapidly animate the in-between sizes (also known as tweening) to convey the expanding transition from the collapsed state to the fully expanded state.
What Problem Does This Solve?
Designer needs to show the detail of an object in its context or reveal a previously collapsed object.
When to Use This Pattern
- 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.
What's the 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.
Why Use This Pattern?
- 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.
For more information, see the rationale for Transition patterns.
See the general discussion about accessibility for Transition patterns.