Collapse

From DesignPatterns

Contents 1 Problem 2 Example 3 Usage 4 Solution 5 Rationale 6 Accessibility 7 Related 8 As Seen On 9 Gallery 10 Code 11 Source

Problem

The designer needs to communicate that an object is no longer of primary importance, yet wants to keep it available in a smaller form.

Example

Example of collapsing the My Tech area in Yahoo! Tech

Usage

• A photo in a collection is no longer the focused-on photo.
• The user longer needs to see detail.
• The user longer needs to interact with content.
• You want to keep the object around for later focus.
• You to reduce clutter or visual noise.

Solution

• Decrease the size of an object while animating the in-between sizes (tweening).
• Shrink should happen very quickly. A good rule of thumb is complete a shrink or expand in less than 0.5 seconds.

Rationale

• Collapsing preserves real estate on the screen. The downside is that its content is either un-readable or less readable.
• Collapse is visually more eye-catching than a Dim Transition, especially when combined with the move transition. Movement is more easily detected in the peripheral than color changes.

For more information, see the rationale for Transition patterns.

Accessibility

• Set the focus on the collapsed item. This enables assistive technologies to detect where the collapsed area is.
• Provide ALT tags that preview what will happen when the user wants to expand the area again.

See the general discussion about accessibility for Transition patterns.

Related

• Transition
• Animate
• Brighten
• Cross Fade
• Dim
• Expand
• Fade In
• Fade Out
• Self Healing
• Slide
• Spotlight
• Fly Out Menu
• Accordian

As Seen On

• Yahoo! Tech
• My Yahoo!
• Yahoo! Maps

Gallery

• Konigi Expand-collapse Transitions examples

Code

• Animation Utility
• Collapse/Expand
• Animate Width
• Animate Width (relative)
• Animate Size

Source

Yahoo! Pattern Library