Mobile Web Design Pattern: Expanding List
This design pattern is part of the Mobile Web Design Patterns series.
A series of list items that (each) expand when clicked to reveal additional related content.
- A user must have access to, or interact with large amounts of content yet there is only room to display smaller amounts at a time. Examples include:
- Revealing submenu options.
- Revealing non-critical metadata associated with a dataset (ex. revealing the sender’s address or message size in an email application).
Expansion lists have several advantages over other formats:
- They take up less vertical space when collapsed yet can display more information one expanded.
- They provide users with a higher level of control over the information they interact with at any given time.
If page refresh is needed this becomes less useful.
- Where possible, visually distinguish between links or controls that will prompt an expansion vs. those that will simply drill down—especially as the drill down will likely require a page refresh that the user may not be expecting.
- Consider visually distinguishing each list item so that once the new content opens, it’s easier for the user to quickly distinguish the expanded content from the overall list.
Figure: This example (from a native Symbian application) shows the use of an expanding list to display emails grouped by date.
Tip: Visit Simple Web Runtime Design Patterns Using jQuery within the Forum Nokia Wiki for code samples including Expand/Collapse, Slide and Fade in/Out.
Tip: Visit Simple Web Runtime Design Patterns Using Dojo within the Forum Nokia Wiki for code samples including Expand/Collapse, Slide and Fade in/Out.
Tip: Visit Simple Web Runtime Design Patterns Using Mootools within the Forum Nokia Wiki for code samples including Expand/Collapse, Slide and Fade in/Out.