Design better faceted navigation for your websites

Faceted navigation enables users to browse large sets of products quickly and intuitively. Jim Kalbach explores the key challenges.

Unlike hierarchies (left), an item's value set determines its location (right)

Remember Lego? As kids, most of us could play with it for hours on end. Those little plastic building blocks could be combined in countless ways; your playmate would come up with something completely different, even with the same pieces. But what if organising and finding information was so flexible and so individual?

This is the question SR Ranganathan asked himself nearly 90 years ago. The Indian mathematician and librarian was unsatisfied with existing means of classifying information - the so-called 'enumerative classification' systems, such as the Dewey Decimal System, which aim to identify all categories used in advance. Users of such systems are constrained by these predetermined categories; they must know the names of the relevant categories before they start to look for information. The rapid expansion of information needing classification demanded a different solution, or so Rangnathan believed.

In 1924, on a trip to London, Ranganathan saw a toy construction set in the window of Selfridges, the famous department store. It was an 'aha' moment for him: organisation of information should be as modular as the construction set. Nine years later, Ranganathan published his book The Colon Classification, which outlined a detailed theory of faceted classification.

What are facets?

Facets are categories into which the properties of an object or topic can be divided. These categories in turn contain 'values': the sub-objects by which the list of items can be filtered. A classic example is the classification of wine. There are many properties by which wines can be categorised: region, colour, type, vineyard and price, among others. These are the facets.

In the left-hand menu, orange text shows facets; values are blue

Within each of these categories are the values. For instance, under region, you might find the values France, Italy, Chile, USA and Australia. The values for colour are normally red, white and rosé. For price, you might have a scale of values such as under $20, $20-40 and over $40.

Unlike hierarchies, the values of the various facets in a given information architecture are not dependent on one another. In hierarchies, the location of a given item is determined by its position in a tree-like structure. Strict hierarchical organisation is limiting: there is only one way to locate a piece of information.

In a faceted navigation system, the location of an item is determined by its set of values. This offers multiple points of access. Faceted systems reflect the fact that users may seek information in a number of different ways. In a faceted system, any combination and order of values is possible. For example, selecting region: Germany then colour: white would return a list of German white wines, and only German white wines. Large collections of items - even millions of items - can be reduced to small sets with only a few clicks. That's powerful.

The challenge comes in implementing such a system in a format that the average web user can understand. This is precisely what researchers at the University of California, Berkeley did with their Flamenco project. In a manuscript from 2002 entitled Flexible Search and Navigation using Faceted Metadata they wrote:

"We have developed an innovative search interface that allows non-expert users to move through large information spaces in a flexible manner without feeling lost. The design goal was to offer users a 'browsing the shelves' experience seamlessly integrated with focused search."

Nearly 70 years after Ranganathan first laid out his theory of faceted classification, Flamenco represented the first web-based UI with real practical use. Previously, solutions were complicated and had long learning curves. But with Flamenco, nearly anyone could use and understand facets and filters.

This model of interaction has become the standard for faceted navigation we see today. Most major ecommerce sites, such as Amazon, have reductive filters of this type. Searching on the site for a keyword such as 'computers' will bring up a results page in which facets such as Departments, Computer Operating System, Laptop Display Size and Hard Disk Size are listed in a menu on the left-hand side of the screen.

Yelp's filters sit horizontally at the top of the search results

If you want to see only those laptops that have a 15in screen, a hard disk capacity of 500GB and cost between $800 and $1,000, you can bring up such a list in just three clicks, filtering down a set containing tens of thousands of items to one containing just over 80.

Advantages of faceted navigation

This type of navigation is known as 'successive filtering'. The first selection results in a subset of items, which is redisplayed on the page. The key is that the values for the facets then update, so that the list of items and the metadata always remain in sync. This is the core of the Flamenco model, and provides many advantages:

  • No empty results set Since the subcategories available are updated each time the user selects a category, navigation always produces results. A zeroresult set exists only if the free-text search feature is used.
  • Magnitude is indicated Each of the category values is followed by a figure in parentheses showing the number of items in the collection possessing that value. Providing insight into the size of a subset helps the user make navigational decisions.
  • Multiple navigation routes People can select values in any order, enabling them to reach the same goal in many different ways.
  • Values may be deselected Because facets are mutually exclusive, they may be recombined. If unsatisfied with the current results, visitors can deselect any value or any combination of values from a facet, thereby expanding the list of results.
  • Familiar web-based experience Such an interface mimics web navigation closely: clicking a link transitions to a new page. Visitors can drill down through categories naturally.

So why does faceted navigation matter? User experience expert Jared Spool found that found that people tend to continue browsing more often after navigating a faceted system than after doing a direct keyword search. In his 2001 article, 'Users Continue After Category Links', he wrote:

"Apparently, the way you get to the target content affects whether you'll continue looking or not ... we found that if the users used Search to locate their target content on the site, only 20 per cent of them continued looking at other content after they found the target content. But if the users used the category links to find their target, 62 per cent continued browsing the site. Users who started with the category links ended up looking at almost 10 times as many non-target content pages as those who started with Search."

For ecommerce sites, this could equal more sales; for a non-profit organisation, it might result in more support; or for a medical information site, it could provide a deeper understanding of a disease or cure. In other words, it's the way in which navigation systems provide access to information that is important.

However, designing a faceted navigation system in a way that the average web user can understand can prove challenging. There are many factors to consider, and many solutions to the problems you may encounter.

Kayak uses different methods to represent different types of values

Design challenges

A quick survey of sites that use faceted navigation reveals a wide variation of solutions. Although many such sites are based on the Flamenco model, the details of their user interfaces differ. This is particularly true on search results pages, where facets are used to filter the items in the list. Next, we'll look at some of the questions the designer is confronted with:

01. What's the best layout for the filters?

In the Flamenco model, facets and items are implicitly in sync: selecting a filter updates the list of items selected as well as the list of values available. To highlight this effect, you should strive to present the filters and the list of items together. This brings up the question of how the two should be placed relative to one another. With limited screen space available and the need to place the focus on the content, the filters need to be visible but not intrusive.

Frequently, filters are placed on the left-hand side of the screen, as with Amazon; or horizontally across the top of the search results, as with Yelp. Studies show that the latter arrangement is more common. This makes sense, since it makes the filters more visible.

However, a horizontal arrangement also pushes the content further down on the page. For this reason, many designers opt to place filters in a vertical list on the left of a page. (It's also possible to place the filters on the right, but usage plummets: they might as well not be there at all.)

In addition to their position on the page, designers must also decide whether the options are displayed by default or hidden in a collapsible component of some kind. Even though they are just one click away, hiding the filters dramatically lowers their usage. In the worst cases, the filters are not even understood as such when collapsed by default.

Beyond promoting use of the filters, exposing some of the values for each facet has another positive effect: it provides information about the content. Users get feedback about how the information is structured, and how successful their search was, helping them reformulate their search queries or overall search strategy.

02. What's the best way to display and interact with values?

Once the position of the facets on the page has been decided, you must determine how to display the set of values available for each facet. Again, there is a great deal of variation between sites. The simplest solution is to represent the options as simple links. Other options include sliders, dropdowns, checkboxes, and input fields.

Which display style you use depends on many factors. Chief among these is the nature of the metadata. In our original example, the values of facets such as Colour and Region will probably be text-based. In contrast, numeric values can be shown with sliders or input fields.

The popular travel site Kayak ( makes frequent use of sliders and checkboxes. Because many of the values, such as departure times, are numeric, sliders make sense. However, other facets, Airlines for instance, contain values that can't be represented with a slider. Instead, they are represented with labels and checkboxes, similar to the filters on Amazon.

eBay lays a window over search results: users know they haven't moved page

03. How are other values accessed?

Often, there isn't enough space in the UI to show all of values available for each facet. A common solution is to show a subset of values (for example, the first five) by default, and then provide a mechanism to access more values. The nature of this mechanism depends on several factors, including the number of additional values, the length of value labels, and the spatial arrangement of facets on the page. Here are the most common solutions:

  • Inline expand: in this solution, clicking a link (usually labeled More) below the first few values expands the list downwards. This works well for situations where there are a limited number of values, but it doesn't scale well. If you have more than several dozen values, it creates a very long page.
  • Scrolling: if each facet is contained within a separate component of the layout, then the hidden values can be accessed by scrolling. This works well in many situations, but can also make a page look more complex. In addition, a row of HTML scrollbars may not satisfy aesthetic considerations, while scrolling within a small range is usually not a satisfying experience – particularly where longer values have to be wrapped over more than one line of text.
  • New page: the Flamenco model makes use of new pages to show all values for a given facet. This works well for a large number of values and for values with very long labels. But it takes the user furthest away from the results list.
  • Pop-up dialog: clicking a More or Show All link could open a dialog window in a lightbox. Instead of reloading the page, the new dialog is presented with the original page still in the background. This provides navigational context and reassures the user that they haven't gone anywhere new. eBay uses this solution for some of its facets: for example, Brand.

04. Where are selected values indicated, and how do you undo selections?

As mentioned above, a key advantage of faceted navigation is that users can select and deselect values in any order. However, usability tests show that not all users understand this. The way in which the user interface shows which values are selected is crucial. Several approaches are used here:

  • Inline: one approach is to show the value selected inline within the UI component for a facet. For example, in the screenshot from Amazon earlier in the article, you can see that Windows 7 has been selected. This selection can be undone by clicking on Any operating system, or on another value.
  • Breadbox: often, you may find a stack of selected values right above the list of facets, particularly when the facets are listed on the left-hand side of the page. This is referred to as a 'breadbox' structure.
  • Breadcrumb trail: it's also possible to build a more conventional breadcrumb trail of selections above the list of search items. As the user makes selections, they are appended to the end of the trail. This is often accompanied by a small 'x' icon before or after the value label: clicking on the icon removes the selection. This approach makes sense if your facets are listed horizontally to begin with. For example, the online clothing store displays selections in a breadcrumb trail labeled appropriately Your Selections. shows the set of values selected above the search results

In conclusion

For most companies doing business online, enabling users to find information quickly is mission-critical. This is particularly true in ecommerce: people can't buy what they can't find.

Faceted navigation provides a solution to this problem. Like Lego blocks, we can design navigation systems that are modular, flexible and individually configurable. Although digging a little deeper reveals the design challenges that such systems present, the wealth of variations found online highlights the possibility for further innovation.

Words: Jim Kalbach

This article originally appeared in net magazine issue 246.