Expanding List

Problem

You need to display a series of related information that has a clearly defined hierarchy. However, vertically displaying all that information would lead to a very long page.

Solution

Design a VERTICAL LIST or one of its variations, but display only part of the content — usually the heading — as a toggle to show additional content.

This pattern got its name from a similar pattern in Mobile Design Pattern Gallery 1 and is a variation of the VERTICAL LIST, in which the visible item does not present static information or works as a link to another page, but is rather used to trigger the visibility of additional content in the same page. Tapping on the visible part of the item makes it expand, revealing the hidden content. It is most suitable for when you need to present content with a clearly defined hierarchy; for example, when you are designing a LINEARIZED MENU with subitems.

Although it is possible to present more than two levels of information with this pattern, it can be confusing to do so.

You should provide some clues to indicate that additional content is available. For example, a downward arrow that changes to an upward arrow when the item is expanded; or a plus sign that changes to a minus sign. You can give emphasis to the fact that the item has expanded by implementing a small animation showing the content appearing.

Besides clearly distinguish between list items — as it is described on the VERTICAL LIST —, you should also differentiate between the heading of the item and the respective content. More important, you should design them so that the revealed content is grouped to the upper heading rather than the order way around.

Interaction Details

In terms of the behavior of the list there are two alternatives for the implementation of this pattern: one that works as a toggle; another that works as an accordion. In the toggle type each item works independently, that is, regardless of the state of all other items in the list, when you tap on one it expands, when you tap it again it collapses. In the accordion type, elements of the list are connected, when the user taps on the header of the item the content of that item is expanded and all others are collapsed. These two different behaviors are sometimes described as different patterns, for example, in Designing Interfaces, Tidwell presents the patterns, Accordion, and Collapsible Panels.

***

Web Design Patterns for Mobile Devices
Unicef USA, 04/2012
Web Design Patterns for Mobile Devices
Jobs At, 04/2012
Web Design Patterns for Mobile Devices
Microsoft, 04/2012
  • Expanding List in Mobile Design Pattern Gallery
  • Accordion in Designing Interfaces
  • Collapsible Panels in Designing Interfaces

  1. Neil, Theresa. Mobile Design Pattern Gallery. Sebastopol, California: O'Riley Media, 2012.