Faceted Navigation: Typical Structures for Values

Facets are categories that describe the properties of an object or collection of objects. Facet categories then have values. In faceted navigation schemes, the values are the things you click on to navigate to a set of items or to filter a list. The type of structure that those values have, however, can vary depending on the type of facet you are dealing with.

Take wine. (Hey, who doesn’t use wine as an example for facets?). Typical facets include things like region, color, type, winery, price and rating. If you consider nature of the values for each of those facets, it’s obvious that they have different structures. And those structures give rise to different ways of representation as well as carry display challenges. For example, a slider might be a good way to filter by price, but it’s not so good for region.

Before beginning the design of faceted navigation, it’s important to first understand the nature of value structures.

Fundamentally, there are two types of value structures: hierarchical or flat. But within the latter type (flat) there are some important differences and variations to consider.

In my workshops on faceted navigation design (next workshop: Euro IA in Paris, Thursday Sept 23) I point to five common structures of facet values, outlined below.

1. HIERARCHY

A hierarchy is an arrangement of values with parent-child relationships. Think: tree structure. In the above example for wine, “region” is a hierarchy and may look something like this:

• Australia
• Europe
  • France
    • Alsace
    • Bordeaux
    • Burgundy
  • Germany
  • Hungary
  • Italy
  • Portugal
  • Spain
• North America
  • USA
    • California
    • New York
    • Washington
  • Canada
• South America
  • Chile
  • Argentia

Hierarchies may be represented as tree structure (like in Windows Explorer), where the user can open and close levels. This may present some interaction difficulties, particularly within the context of faceted navigation online. Namely, there are two elements for the user to keep separate: the mechanism to open and close a branch of the hierarchy (usually a + or – sign, or maybe an arrow of some kind) and the value itself, which when clicked presumably filters the set of items.

An alternative to using tree structures for hierarchies is to only present one level at a time. For instance, a user isn’t able to access the specific wine regions of France until first selecting “France.” This generally requires a page reload or update of some kind.

This is the approach taken in the FLAMENCO model for faceted navigation. However, to give users a preview of sub-categories in a hierarchy, the FLAMENCO interface uses a rollover display to reveal sub-options. The values in this preview are not clickable, but the researchers’ tests showed that they helped users better navigate by foreshadowing values at lower levels [1].

The image below shows an example from the FLAMENCO interface. In the red circle on the image you’ll see that the upper level categories in the hierarchy are indicated (North America > United States), as well as the values of the current level (the filter links). Then, subcategories are shown in a tool tip dialog. The user can then see both the parents of the current level as well as the children.

Figure 1: Indicating multiple levels of hierarchy on FLAMENCO (click to enlarge)

Of course, this brings up the question, Why not just allow users to directly select a lower level option in a hierarchy in the dynamic menu? That is certainly possible, but may present interaction and usability challenges if not designed and implemented carefully. (I don’t know of any examples of hierarchical faceted metadata that use dynamic menus to access lower levels of a hierarchy, but I presume they exist somewhere.)

Finally, hierarchies could also be represented in a flattened form. That is, you could also remove the levels of the hierarchy and just present the values in a simple list. The facet values for “region” from the above scenario may also be displayed like this for a given search:

California (342)
Australia (123)
Hungary (97)
Alsace (13)
see more…

The first value in the above list is from level 3 of the hierarchy, while the second value is from level 1. Hungary, on the other hand, is from level 2. From a navigation standpoint, these are all considered within a single flat list. For filtering a list of items (e.g., a search results list), such an approach may be quite useful.

Nexis.com, the flagship news product from LexisNexis, flattens hierarchy when displaying search result filters. In the image below, you can see the facet “Geography” (lower left side) includes values from all levels of the hierarchy in a single flat list. “North America,” “United States,” and “California” all appear at the same level, though within the native structure of this facet they are hierarchical.

Figure 2: Flattened hierarchy for facet values on Nexis.com

Generally, it’s expected for lower-level values to “roll-up” to parent categories. That is, if you select North America as a filter, you should also get all of the items from that category’s children (e.g., USA, California, New York, Washington, Canada). So flattening a hierarchy to display facet filters can bring up inconsistencies in the item counts after each value: the sum of the numbers in parentheses from all of the filter values will total more than the number of items in your set. You therefore might want to consider just displaying the lowest levels only.

2. LIST

A “List” is as simple as it sounds: a flat enumeration of values. In our wine example, “winery” would be represented as a flat list. Usually, a stack of plain links will do. (Or, symbols or icons of some kind may be appropriate instead of plain links depending on the type of information in the facet.)

A problem with some flat lists, however, arises when they are very long. A list of all wineries–even for a relative small set of results–could have hundreds of values. Displaying these in a left-hand panel may be challenging.

Or, consider the following example from the ACM digital library. The filters for search results include the facet “Publication Names.” The values are represented in a flat list. In the image below the first eight values are displayed by default along with the option to see all publication names (via the “More…” link).

Figure 3: Eight default values for “Publication Names” on the ACM Digital Library

Clicking on the “More…” link reveals the full list of publication names, shown in the next image. As you can see, the list is quite long. What’s more, the value labels themselves–publication titles–are also long, some of which wrap onto 4 lines. Displaying this single flat list on the left side of the page would be challenging and not provide a good browsing and scanning experience.

Figure 4: A flat list of all publication names on the ACM Digital Library

3. BINARY

A binary structure to facet values is really a subset the “list” type. But, by nature these values have and “either-or” aspect to them. For example, the facet “Gender” can only have two options: male or female.

In the example of wine, the facet for something like “Means of Production” might have binary values of “Organic” or “Not Organic.” These could be represented as simple filter links as if in a flat list:

Means of Production
Organic
Not Organic

Or, you could represent them with checkboxes or even radio buttons.

Alternatively, you could also only present one of the binary values with a checkbox to either opt in or opt out of that value. So in our example, you could also represent the filter as a simple on/off option, like this:

[ ] Show only organic wines

Note that the facet category label (i.e., Means of Production) is not necessary in this case; it’s implied. Still, you can treat this metadata as a facet in terms of conception of the navigation system and maintenance of metadata.

The North Carolina State University library catalog makes use of faceted navigation. In a results list, there are also some binary options to filter results. In the image below there are three such checkboxes. The first option, for instance, has the implied facet category of “Availability.” Here, there are only two values: “not available” or “currently available.” In this case, the user can opt in to the latter value, thereby excluding all items that are not available.

Figure 5: NCSU Library catalog results with an example of binary facet values.

4. CONTINUUM

A continuum is a list of values that have a potentially unlimited number of points on a range. Generally, continuums are numerical in nature (whereas hierarchy and lists are typically textual information). “Price” is an example of a continuum.

Of course, there is in fact a limit to the number of prices available for a given collection of wine, so it’s not that the continuum is endless. Rather, each item in a given collection could potentially have a different price. So, a results set of 100 items could have 100 different price values. Another set could then have a completely different set of price values. The values in a continuum can vary dynamically.

Contiuums are sometimes represented with a slider. In the image below from Endless.com, you can see the prices for women’s shoes range from $18 to $1,921, with just about every price point in between.

Figure 6: Price continuum on Endless.com accessed via a slider

As Mike Madaio points out in a presentation facets given at the IA Summit 2010 [2], the above example can be problematic. Namely, if you show the entire range linearly, the filter may be hard to control. To limit the above set of women’s shoes to those under $100 only, the slider controls have to be placed nearly on top of each other, and they are difficult to use as a result. The necessary granularity for shoes under $100–which account for about 2/3 of all of the items in the collection–isn’t present in the UI. An alternative is to plot the prices in the continuum on a logarithmic scale so they are better distributed.

Instead of sliders, sometimes input fields are used to filter a collection of items. For instance, date is another common facet that represents a continuum of values. Sometimes you’ll find input fields to filter by a date range. Of course, input fields are also used for price, among other things.

5. SCALE

Also called a discrete scale, this type of value structure represents a potential continuum of information, but the values are limited to fixed categories. These are generally arranged from low-to-high or from old-to-new in terms of order.

For instance, “rating” could be a continuum, with any number of values between 0.0 and 100.0. Or, it could be represented as a discrete scale of 1-5 stars. Amazon.com, for instance, allows users to filter on average rating. The image below shows a scale for the ratings:

Figure  7: Ratings on a discrete scale on Amazon.com

So, a continuum could potentially be made into a scale. We see this often with the facet “price.” Instead of showing actual prices as filter values, groups of prices are created on a discrete scale. In the image below from HomeDepot.com, the price filter is shown as a scale instead of a continuum.

Figure 8: Price range categories on HomeDepot.com

With numerical facet values, you have to decide whether to represent them as a continuum (requiring a slider or input fields) or on a discrete scale (allowing for simple link categories).

REFERENCES

[1] Marti Hearst, “Design Recommendations for Hierarchical Faceted Search Interface.” ACM SIGIR Workshop on Faceted Search, August, 2006″

[2] Mike Madaio, “Better Faceted Navigation.” Presentation at the IA Summit 2010.

Tags: faceted navigation, Facets, value structure, values