Problem

A large set of information must be presented. The information is hierarchically ordered, and this structure is relevant to the user.

Solution

A Hierarchical List folded, with no children visible. A Hierarchical List can display hierarchically-ordered information in a comprehensible and quickly-accessed manner. The parent/child relationships are exposed visually, and users may fold and unfold the list to view only the relevant parts needed.

Displays of this type can be supported by even very simple interactions, with vertical scrolling only, and in surprisingly narrow spaces.

The depth of the list (the number of tiers included) is arbitrary, but depends greatly on the size of the display area, and the complexity the user is willing to endure. Typically, more than three tiers is quite complex, and worth considering just from an architectural point of view.

The user's exploration of this hierarchy, by opening and closing items, is critical to their understanding of the relationships. Do not reveal too much for them, and allow exploration.

Variations

An Hierarchical List opened to one tier. Note the counters on all parent categories, indicating the number of immediate children. A Hierarchical List may be either closed or open when first displayed to the end user.

Closed lists only display the top tier, as a simple vertical list. Selection must be made of a parent item to reveal any children within.

Open lists reveal a portion of the list when first loaded. This may be the expected location, the current location within a system, the last location used, or other relevant sections. Do not reveal arbitrary sections just to communicate that the list opens.

A key variation is in the methods of revealing (or hiding) child list items. This will have serious impacts on design and the information architecture (and sometimes even the organization of the data repository). These options are discussed in detail in the following sections.

Interaction Details

Hierarchical List comparing the "single" (left) and "dual" (right) parent methods. In the latter, the parent is only used to reveal children, and the first item in the child list is details of the parent level. Generally, lists are organized so any item which is a parent to others is displayed "twice." This way, the containing item may be selected entirely to reveal the children within. If details or selection for further action is required at the parent level, that may be listed as the first of the children in the list.

Note that selection of parents is not always required or possible, depending on the data set, and the second listing of the parent element is not needed. For example, if selecting a U.S. state, and the list is by regions, there is no value is selecting a region alone. The region parents may, on selection, only open or close to reveal the child states.

Selection of a parent again will collapse or hide the child listing of that parent.

For lists where the "reveal" action is separate from the list item itself, selection of the item title will typically select or load more information (depending on the user task). Selection of the reveal item will immediately display the children of that item.

Selection of the "hide" action (the reveal becomes a hide when open) will collapse or hide the indicated child listing.

Another common indicator that an item in a Hierarchical List is a parent (and may be opened) are + and - symbols. Note that in most cases an icon for the leaf node is also used.

Presentation Details

Position should be the primary indicator of the hierarchical relationship between items. Top tier items will be left-aligned, the second tier indented slightly, and so on.

Indicators should be present to make clear that the list may be opened. Arrows or plus symbols are most common. In many cases, the indicator will reside in the left column, and indenting will correspond to the width of the indicator. Text indicators like "more..." can be useful in small quantities, but take up much more room than graphics for small screens, and for larger quantities the repetitiveness can make them difficult to scan.

A count of items within a parent category can be very useful to both indicate there are additional items, and -- for some data sets -- to help the user decide which categories to explore.

When a set of child pages is revealed, the indicator should change state to indicate it can be used to close or hide the list.

Hierarchical List with lines depicting the relationships between tiers. Additional indicators of hierarchy may be useful, such as type weight (bold for parents, especially when not selectable), color and size. An optional but well-used method is to provide guidelines among and between list items at different tiers.

Antipatterns

Use caution with excessively complex interaction methods. Simple devices which require option menu selection, or difficult to discover interactions such as unique gestures, may impede use of the list.

Avoid opening too much of the list on entry. On smaller screens, especially, it may be unclear how the list is ordered, or the parent/child relationships may be unclear at first glance.

Consider the task at hand, and the user's need to understand the system. Many data repositories are hierarchical, but the architecture may be unimportant to the user. Do not reveal internal process, organization or jargon unless needed by the end user.

Do not force an informational hierarchy upon a data set just to use this display method. The user will adopt a mental model of the system or information that is incorrect, or will never understand the information at any level.

Avoid using too many interaction methods alongside the Hierarchical List. For example, a Fisheye List may seem a way to provide some extra information, before opening, but will likely add confusion. Items, like this, that act in another axis, are especially prone to adding confusion.

Examples