Cascading list
The Design Need:
The user needs to make a selection from data that can be structured in tree form.
Design Examples:
Design Solution:
Some design best practices for designing cascading lists:
- Place all items in a cascading list that displays the items from each level in the hierarchy in separate lists.
- Structure the data in a hierarchy that is obvious to the users of the site.
- You should orient the separate lists side by side and in the reading direction of your audience (left to right or right to left).
- Keep as many levels visible as possible. This helps users to know where they are in the hierarchy and what choices they have made.
- Depending on the design and position on the page, you should at least align the lists at the top or bottom. Using the same height for the various lists helps to create a uniform look.
- It is good practice to show the final selection – the leaf of the tree – in more detail. This helps users to determine whether they have selected correctly.
When to use:
You should only use this design pattern if the offered data can be structured in a hierarchical way. It is typically used in file systems, but can be used very efficiently to guide users through a selection process with interdependent choices.
Why use this solution (rationale):
Users often have difficulty in forming a mental model of a data structure. Showing a hierarchy in separate lists lays it out for the user. A visible hierarchy is easier for the user to understand and helps to form a mental model. A cascading list also shows which choices lead to which result, making it easier for users to reach other (better) results.
More info elsewhere:
- Cascading list design pattern on http://quince.infragistics.com
- Cascading list design pattern on www.designinginterfaces.com
