UI Patterns and Techniques

Cascading Lists


A font dialog from Mac OS X

Use when:

The user needs to navigate a hierarchy that isn't very deep, but might have many items on each level. An outline or "tree control" would work, but the user would be scrolling up and down a lot to see all the items, and they wouldn't get a good overview of the items at higher levels in the hierarchy.

The hierarchy may be a literal one, such as a filesystem, or a conceptual one -- 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 above.

Why:

By spreading the hierarchy out across several scrolled lists, you show more of it at once. It's that simple. Visibility is good when you're dealing with complex information structures. Also, laying the items out in lists organizes them nicely -- a user can more easily keep track of what level they're dealing with than they 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; show its selected item's children in the third list. And so on.

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. In the Mac Finder example below, a representation of an image file is shown; 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, etc. Many toolkits will let you do this in tree controls via direct manipulation, but for those that don't, this is a viable alternative. See the examples.

Examples:


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. It uses a category / item information architecture. The user's selection in the "Chart sub-type" list is described with its name and a Short Description. (Note also the use of a Card Stack and Illustrated Choices in this dialog.)


From PowerPoint for Windows

Though simpler than the Excel example, this one uses the same two-level structure, and it uses a similar category / item information architecture.


From the Mac OS X Finder

This is an extreme example, but it shows that the pattern scales well, letting the user drill down into very deep filesystem hierarchies while staying oriented. NextStep originally used this technique in its file finder, circa 1989 or so.