Faceted Navigation

Example of the Faceted Navigation UX pattern.

Problem

People want to find something but usually have only a fuzzy idea of some parameters in mind.

Solution

Help people gradually find what they want by providing them with various facets that they can use to filter a result set.

Context

You have a large set of information, too large for a person to easily sift through without being able to narrow it down.
Your information shares a set of common facets that they could be filtered by.
The facets you have are easily understandable by the users and are something they would likely want to filter based on.
Your users don’t prefer to navigate this kind of information in another way.

Rationale

As you may have noticed, this pattern shares similarities with Active Filtering. This differs in that the purpose is more to find something than to analyze data, and it is often used as a way to navigate a catalog of information.

This is sort of the inverse of the common “Advanced Search” screen that many have employed over the years, and it is better because it doesn’t require the user to know or specify these details up front. It is encouraging and usually optional because they’re not confronted with a big, complex form they have to fill out in order to start exploring the data and, if implemented well, it actually encourages more exploration by fast updating based on progressive facet selection.

Implementation

The trickiest part of implementing this pattern can be the selection of good facets. They need to be something the user understands and something (ideally) you know the user would want to filter on. They also need to be specified on most, if not all, of the items in the result set in order for it to be effective. Often, you need to specify ranges, so choosing the right ranges is important and should be based upon knowledge of the data set.

Presuming you have identified these facets, the most common approach is to let the user start by getting to a result set (e.g. by searching via a keyword or browsing by some predetermined category).

Once you have a result set to which your facets apply, you show them around the result set. It’s common to put the facets on the left, but you could put them above or to the right, if that works better with your layout. The bottom would be bad because the result set length is likely to change, thus moving the facets around, though you could make it stationary and, for example, require users to scroll just the result set inside some kind of frame.

The facet values displayed should be based on the facets’ values found in the current result set.

If you can, it is ideal to allow the user to select multiple facets at a time, but only one value for each facet at a time. The facets should typically be combined using a logical “AND” (not an “OR”). Selecting facets should not just affect the result set but also remaining facet values.

If you can, it is good to show the number of items found in a given facet value, and you should always have a way to clear a selected facet value.

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

Faceted Navigation pattern can be implemented using the following ASP.NET controls: WebDataMenu, WebListBar, WebDataTree, WebToolbar. Check out the samples browser to see it in action.

JavaServer Faces

Use stack bars and grid panels to implement this pattern. See an example here.

Examples

The primary example for this pattern is Amazon.com. They have a number of common facets for most products (like brand, price, seller) but also have facets that are specific to the current result set when applicable.

http://www.amazon.com

Example of the Faceted Navigation UX pattern.

Epicurious provides a way to browse recipes. It first displays a directory with all the ways to start browsing them and then after selecting one it shows the list of recipes for the facet and lets you further filter by the rest of the facets in the left panel.

http://www.epicurious.com

Example of the Faceted Navigation UX pattern.