List Boxes

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.

HTML code here
	

CSS code here
	

How

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.

Why

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. However, more creative implementations of the list box pattern can be executed, such as the Appointments flow shown in the examples below from MyIT. In this case, the very clear hierarchical data structure allows an intuitive and successful alternate interpretation of this pattern.

Examples