Cascading Lists
Font dialog box from TextEdit |
|
What: |
Express a hierarchy by showing selectable lists of the items in each hierarchy level. Selection of any item shows that item's children in the next list. |
|
Your data is tree-shaped. The hierarchy might be deep, and it
might have many items on each level. A tree view (outline)
would work, but the user would scroll up and down a lot to
see all the items, and he wouldn't get a good overview of the
items at higher levels in the hierarchy.
The hierarchy may be literal, such as a filesystem, or conceptual -- this pattern is often used to let a user navigate and choose items within categories, or make a series of interdependent choices, as with the fonts in the example above. |
Why: |
By spreading the hierarchy out across several scrolled lists, you show more of it at once. It's that simple. Visibility is helpful when you deal with complex information structures. Also, laying the items out in lists organizes them nicely -- a user can more easily keep track of where he is than he could with an outline format, since the hierarchy levels are in nice, predictable fixed-position lists. |
How: |
Put the first level of the hierarchy in the leftmost list (which
should use single-selection semantics). When the user selects an
item in it, show that item's children in the next list to the right.
Do the same with the child items in this second list, ande show its
selected item's children in the third list.
Once the user reaches items with no children -- the "leaf" items, as opposed to "branches" -- you might want to show the details of the last-selected item at the far right. The Mac Finder shows a thumbnail picture to represent an image, or the first few words of a text file; you might instead offer a UI for editing an item, or for reading its content, or whatever is appropriate for your particular application. A nice thing about this pattern is that you can easily associate buttons with each list: delete the current item, move up, move down, and so on. Many toolkits let you do this in tree controls via direct manipulation, but for those that don't have treeviews, this is a viable alternative. |
Examples: |
|
From the Mac OS X Finder This screenshot is an extreme example, with seven levels. But it shows that the pattern scales well, letting the user drill down into very deep filesystem hierarchies while staying oriented. (Warning: this pattern can be confusing for people who aren't comfortable with the concept of a hierarchy, especially when the hierarchy is this deep.) |
|
From Excel for Windows It may not look like one, but this Excel chart-type chooser is a two-level cascading list, expressed with two different visual formats. Rather than a literal hierarchy, it uses items grouped into categories. The user's selection in the "Chart sub-type" list includes the item's name and a short description. Also note the use of a Card Stack and Illustrated Choices in this dialog box. |
|