Faceted Navigation: Layout and Display of Facets

This is part of a series of posts on faceted navigation design. Previous related posts include “Showing More Values Part 1” and “Part 2.” Also look out for posts written after this one.

Overall, my interest in faceted navigation stems from the development and organization of workshop material on the subject. The intent is to address the primary questions designers face and identify possible solutions and directions. Where known, I’ve attempted to cite relevant literature, which is proving to be thin and/or indirect.

This post focuses on two aspects of the initial layout and display of facet filters in a results list. Designers of a faceted navigation start with 2 common questions:

• Where are the facets located?
• Are they shown by default or not?

Location

In terms of location, there are 5 approaches we can identify:

1. VERTICALLY, ON THE LEFT SIDE

This is perhaps the most common position and seems to work well for obvious reasons. A left-hand position is common for navigation menus on the web. Here, the top facets will always appear horizontally, even at smaller browser sizes. Of course, there is more vertical scrolling involved to reach all the facets, and some may be below the fold. The results list can appear prominently in the center of the page and should be visible with this arrangement. Typically, the values are stacked vertically.

Hoovers.com is an example of a left-hand layout for faceted navigation:

Figure 1: Left-hand faceted navigation on Hoovers.com

There is no guarantee that users will notice and interact with this arrangement, though. Daniel Tunkelang, for one, suggests that a column on the right may be too subtle for users to notice. [8]

The Flamenco interface for faceted navigation developed at the University of Berkeley California even has an algorithm to determine label length, and if they are short the values are presented in two columns. [1] This is the only example of a dual column approach I could find. Dual columns for values don’t seem to have caught on in commercial setting, presumably because the benefit may not outweigh the effort.

Figure 2: The Flamenco faceted navigation interface with dual column values

2. HORIZONTALLY, ALONG THE TOP

Some instances of faceted navigation place the filters horizontally at the top of the results list. Studies with users at Ebay suggest that people used the facets to filter a list of items more when located horizontally than on the right side. [2] This is a big advantage. Of course, on the downside a horizontal arrangement is that the results list is further down on the page.

A horizontal arrangement also has more constraints than on vertical arrangement. Generally, not more than 4-5 facets with their values can be shown at any one time. Also, the Inline Expand approach to showing more values is not viable. (See my previous post on showing more values).

Yelp.com makes use of this arrangement, shown below.

Figure 3: Horizontal facet filters on Yelp.com

With a horizontal layout, the values are typically listed in vertical stacks, as in Figure 3. However, there are examples of also listing the facet values horizontally as well. This doesn’t seem to save much space, if any, and the values are harder to scan. The value of listing the values horizontally is questionable.

Shopping24.de, a German shopping portal, uses this approach. The fitlers are just above the top of the list, beginning with the German phrase “Produkte in Kaffee & Co.” The facets are “Hersteller,” “Preis,” “Serie,” and “Geräte-Typ.” The values for each are represented as link extending horizontally from the facet header labels. At the end of the values is a “more” link, which in German is “weiter.”

Figure 4: horizontal facets and values on Shopping24.de (German)

3. VERTICALLY, ALONG THE RIGHT SIDE

The University of Edinburgh library catalogue positions faceted navigation filters for search results on the right. This makes use of the AquaBrowser discovery interface from Serials Solutions.

Figure 5: University of Edinburgh OPAC with right-hand filters

In an empirical study [3], Tim Bosenick and I report findings from a large scale investigation on the location on the main navigation of websites. See “Web Page Layout: A Comparison Between Left- and Right-justified Site Navigation Menus.” This study compared two positions of the main navigation of a website: vertically on the left and vertically on the right. The results showed no significant difference in performance between two: participants we’re able to solve each of the five tasks given to them with either arrangement.

Contrary to these findings, other studies since then have shown the location of the main navigation has an affect on the amount of time spent on page. In Petrie et al. [4], the researchers found that users spent double the amount of time on the page with unconventional locations of the main navigation. (Of course, spending more time on the page isn’t necessarily bad. In fact, most site owners strive to keep people on their sites and focused on the content).

But even studies that show contradictory results to ours [2] also show that people adapt to unconventional layouts very quickly. When it comes to the location of navigation menus, people appear to be fairly ambidextrous–left or right do not present usability issues. Blogs, for one, often have a main navigation on the right (like this one). And there are other sites have right menus.

Nonetheless, I believe that a left-hand menu for faceted navigation filters is better than a right-hand menu. First of all, the studies cited above tested main navigation menus. There’s a difference to faceted filters in a results lists, where the focus is much more on the content starting a navigation episode. In a case study presentation on faceted navigation on KLM.com given at the European Information Conference 2008 in Amsterdam, Floris Ketel reported that users of that site universally overlooked the filters when positioned on the right side based on results of several usability tests.

From my experience and from what I see in the literature, it’s not recommended to place facets on the right side. Instead use the left side or top horizontal arrangement, depending on the degree to which using the facets is a critical step or not. (i.e., placing the facets horizontally across the top encourages their use more and a de-emphasizes the content to some degree).

4. WITHIN THE CONTENT OF THE LIST

Let me first explain what I mean by this approach. Some results lists have options embedded in the list items themselves. This is can be an action–like print or send to a friend–but it can also be some form of linked metadata, like topics to which the item belongs. Clicking such a topic link, for instance, would then show all items for that topic.

If you’re thinking, “That’s not faceted filtering,” you’re right. I’m aware of that. It’s actually a form of pivoting, which is defined as:

“.. a way to restart a search from the results of a first search.” [6]

Still, I think it’s appropriate to consider pivoting here in the context of faceted filtering, particularly given real estate challenges one has when displaying faceted navigation. Some facets may lend themselves to being displayed within the items in the list. For instance, facets that may result in very large lists of values prove difficult to display and may not be easily navigated. A result list of 1000 items in a given database may have 500 different publication titles with a relative equal distribution across the set. If publication is a facet to filter on, displaying those 500 titles presents a problem for the design, and navigating them a problem for the user. My suggestion is to consider surfacing that type of metadata as pivot links within the list items.

For example, NextBio links author names in the results list (circled in yellow in Figure 6). Clicking one pivots to a new results list for that author. In this example, a complete list of all author names would be quite long to display.

Figure 6: NextBio

There are not many examples of linking faceted metadata within a results list, and for reason: the chance of getting lost in hyperspace potentially increases. You also lose the overview that faceted navigation potentially provides. As a result, many designers want to keep users focused on the content of the results list as well as the filtering possibilities without wandering off with a pivot.

Still, I think there is more potential in this approach then currently used. I envision implementations that allow users to filter or pivot by interacting with faceted metadata presented in a results list. For instance, clicking on a name in the NextBio example could present a small menu of options to either pivot or filter, among other things.

5. COMBINATIONS

Few implementations of faceted navigation have filters in multiple locations. The Exhibit interface is one example, with filters on the left and the right side, as shown in the figure below.

You can also see in the NextBio image, above (Figure 6), that the top-level filters for things like “Publication” are on the left, but more specific filters (e.g., terms in the word cloud) are horizontal across the top. This is another example of combinations of layouts and arrangements of facets on the results page.

In general, some facets may need more space depending on the way they are displayed. For instance, a large date filter that charts results set size may be better displayed horizontally across the top, while topics are better in a vertically stacked list. Conceivably, the UI could have both vertical and horizontal display of values depending on the nature of the facet.

Open or Closed by Default?

Once you’ve decided where to place facets, you also have to determine whether they are shown or hidden by default.

In all of the above examples, the values or subset of values within each facet are revealed by default. However, some implementations of faceted navigation opt to hide the facet values by default. For instance, on Forrester.com the values of each facet not shown, but instead visitors must open the facet category first to access them. (See figure below).

Figure 7: Forrester.com has hidden values by default

In a presentation given at the Information Architecture Summit 2010, Mike Madiao refers to these are accordions. [7] The advantage is that more of the top-level facet category labels are visible on a single screen. (If the facets were open by default with, say, 5 default values, only about half of them would be visible above the page fold).

If facets are positioned horizontally across the top, hiding them by default saves valuable real estate. Eventim.de is a German ticket sales site. The filters are horizontal and hidden by default. (See the dark blue button-like bars in the center of the page just above the results list). Clicking on the facet label reveals a dynamic menu with the values. Selecting a value then replaces the facet label with the selected value for proper feedback on which filters are set.

Figure 8: Eventim.de, a German ticket site with horizontal filters that are hidden by default.

Of course, one approach is to mix the default state: show some open by default and hide others. An example of this can be found on JR Music. This site uses many facets for filtering results lists–up to 15 facets, depending on the product category. The first two are open by default, while the others are collapsed with the option to access them if needed.

Figure 9: J&R Music shows some facets open by default, with others hidden

I could not find any specific literature on showing or hiding values by default in the context of faceted navigation, but I assume the filters that are hidden by default don’t get used as much as they would if they were open by default. We’ve seen this in our products at LexisNexis, where some of the facet values are hidden by default. I’d personally recommend showing values by default to the degree possible.

Daniel Tunkelang [8] also suggests the possibility of displaying the results list and the facet filters in separate tabs within the UI. Here quickly admits that many people may not even be aware that the facets exist with this arrangement. I could not find any examples, so it’s a rather speculative suggestion with little practical value it would seem.

There is also the general question of whether or not control should be given to the user to expand and collapse the facet components. Of course, if they are not shown by default some mechanism will be needed. If they are open by default, it may not be necessary to provide control over the visibility of facet values. Given the user’s core goal at hand–differentiating result items and determining relevance–providing too much control in the UI may only distract and not add value.

Summary

–

Location:

	PROS	CONS
LEFT	Common location for navigation on web	Facets below fold not showing
TOP	Hard to overlook, Get used more	Uses valuable real estate, result further down on page
RIGHT	Prioritizes content over filters	Easy to overlook, not used as much
CONTENT	Integrated with user’s focus of attention	Distracting, could get user off track
COMBO	Leverage PROS, above	Inconsistency of filter display

–

Show/Hide By Default:

	PROS	CONS
SHOW	Visible facets, readily used	Real estate challenges
HIDE	Can show more facet categories	Values not visible immediately, not used as much
COMBO	Exposes all top level facet categories and some values	Hidden values still require user action, not used as much

–

REFERENCES

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

[2] “Faceted Metadata for Information Architecture and Search,” [PDF, 8mb] CHI Course for CHI 2006, by Marti Hearst and Preston Smalley and Corey Chandler of eBay, 2006.

[3] “Web Page Layout: A Comparison Between Left- and Right-justified Site Navigation Menus,” Journal of Digital Information, 4/1, April 2003.

[4] “Navigational Consistency in Websites: What Does it Mean to Users?” H Petrie, G Papadofragkakis, C Power, D Swallow, Interaction–INTERACT, 2009.

[5] “How do you re-design a business critical web application with billions of unique products?,” Floris Ketel, Mirabeau, NL, Presentation given at the European Information Architecture Conference 2008 in Amsterdam, 2008

[6] “User Interface Design,” by Moritz Stefaner, Sebastian Ferre, Saverio Perugini, Jonathan Koren and Yi Zhang. Chapter 4 in Dynamic Taxonomies and Faceted Search, Giovanni Maria Sacco and Yannis Tzitzikas (Eds.), Springer, 2009.

[7] “Better Faceted Navigation: Advanced Design Techniques,” by Mike Madiao, presentation given at the IA Summit 2010.

[8] Faceted Search, Daniel Tunkelang, Morgan & Claypool Pubs., 2009.

Tags: faceted navigation, layout, navigation mechanisms, right hand navigation