Cascading Lists

Example of the Cascading Lists UX pattern.

Problem

You need to enable your users to select one or more things from a large amount of information that is grouped into a hierarchical structure.

Solution

Show a few lists next to each other that allow users to drill down into hierarchical information.

Context

The information needs to be categorized in a known hierarchy.

It’s best to have a lot of space in the view so that you can show the items in list boxes rather than drop-down boxes. The number of list boxes will vary based on the depth of your hierarchy, but it’s best not to go too deep—you need to clearly show the flow of the filtering.

You need to have enough information to warrant this pattern. If you only have a few items in a few categories, just show them in a tree or even a single drop-down or list box.

Rationale

The information needs to be hierarchical because the idea is that the users can start from larger groupings and drill down into smaller groupings until they find what they need. An alternative pattern that has a similar effect is Faceted Navigation; however, this pattern is strictly hierarchical—you pick the bigger grouping, then the next level, then the next, and so on, while Faceted Navigation allows you to filter on multiple facets without regard to hierarchical grouping.

Therefore, this pattern works best for information that has a clear and known hierarchical structure; cars are the canonical example: you may filter by make, then year, then model, then trim, or some similar variation. If the user can’t be expected to know the hierarchy, then something like Faceted Navigation will be a better tool to let them explore through the different facets.

Using side-by-side list boxes seems to be best for this pattern because it enables users to have in view the various options in each level, which gives them a more holistic understanding of the information, enabling them to make more informed choices while drilling down. Having them side by side has implied flow; you’d make it left to right for users whose language has that flow and right to left for those with languages that flow that way. If you break it over multiple lines, it is less effective, but it can be done if you make the flow of the filtering obvious using visual indicators like arrows.

This pattern would be overkill for small sets of information, even if they are hierarchically grouped. It takes up a lot of space and requires multiple scans and clicks to drill down, so you really need to fall into it when a simpler option like a tree or basic drop-down get too overwhelmed.

Implementation

Ensure that you have a good, known hierarchy, or at least one that will be obvious enough for users to make useful choices from. Ensure you have enough space and enough information to warrant it.

Setup the lists side-by-side, flowing in the direction that makes sense for your audience (either left to right or right to left). You can use different controls to display the lists such as list boxes, list views, grids, or whatever works on your platform. Choose a control that enables you to control the height and, if need be, width and that will show multiple items at once.

Put the highest level categorization in the leftmost (or rightmost) and have function such that when the user picks an item in that list, the child items for the selected item show in the next list and so on down your hierarchy. Align the lists to have the same top alignment and, preferably, bottom alignment (same height). If it works for your information, having the same widths for each list is also good.

You can supplement the lists with functionality like sorting if the list is long.

Once the lowest level item is chosen, that’s a good time to do something like showing more detail about it to give the user a chance to further preview their choice before committing to it.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

 

ASP.NET

You can implement this pattern using multiple WebDropDown controls, where the next selectable list of items in WebDropDown are filtered based on an item selected in the previous WebDropDown control. Check out the samples browser to see it in action.

JavaServer Faces

To create a cascading list in JSF use NetAdvantage’s dropdown lists, in combination with whatever other components are appropriate for your application. NetAdvantage’s SmartSubmit (based on AJAX) allows you to easily update the “right hand” portions of the cascade based on user inputs on the “left hand”. An introductory example is available here.

Examples

The primary example for this pattern is a font chooser from TextEdit. You select the collection, then family, then typeface, then size.

http://quince.infragistics.com/10we

Example of the Cascading Lists UX Pattern Example of the Cascading Lists UX Pattern

This screenshot from the Mac OS X Finder shows that the pattern can scale well even when the hierarchy is deep, if you have the horizontal space.

http://quince.infragistics.com/111p

Example of the Cascading Lists UX Pattern Example of the Cascading Lists UX Pattern

This Excel 2003 dialog to select a chart type is a two-level cascading list, expressed with different visual formats. It shows that you can combine list types and data types (text and images) and still have the pattern work.

http://quince.infragistics.com/11ca

Example of the Cascading Lists UX Pattern Example of the Cascading Lists UX Pattern

eBay shows cascading lists when selecting an item’s category. When the page is displayed, you only get the first list box. After selecting one in the first, the second is displayed. The process continues until the selected category does not have sub-categories. It pushes the pattern to the limit, if you ask me.

http://quince.infragistics.com/118e

Example of the Cascading Lists UX Pattern Example of the Cascading Lists UX Pattern

Sources

Jennifer Tidwell,Cascading Lists

Tags

Selection, Data Entry, Hierarchy, Search.