CHAPTER 7

,

BEST PRACTICES FOR DESIGNING FACETED SEARCH FILTERS

Choose Drill-Down or Parallel Selection PAGE 114

Provide Undo for Filter Selections PAGE 118

Make All Filters Easily Available PAGE 122

Provide Only Filter Options That Reflect the Available Inventory PAGE 123

Provide Filter Options That Encompass the Complete Inventory PAGE 125

Test Your Faceted Search Interface PAGE 127

The Design of Faceted Search UI Controls, by Christian Rohrer, Ph.D. PAGE 128

Faceted Search is a technique of accessing a collection of items by their multiple classifications, or facets. In contrast to hierarchical taxonomy classifications that allow the data to be ordered in a single, predetermined way, faceted search allows the data to be ordered in multiple ways, along the different facets. Each facet typically corresponds to the possible values of a property common to a set of digital objects.

Faceted search user interfaces for ecommerce sites are still fairly new, and potential design pitfalls abound. Fortunately, there are a few relatively simple and straightforward best practices that UX designers can follow to minimize cognitive friction and create search user interfaces that are easy to understand and use. This chapter describes some best practices for the design of search filters.

Recently, Office Depot redesigned its search user interface, adding attribute-based filtering and creating a more dynamic, interactive UX. Unfortunately, Office Depot's interaction design misses some key points, making its new search user interface less usable and, therefore, less effective. That's the bad news. The good news is that the implementation of filtering on the Office Depot site presents us with an excellent case study for demonstrating some important best practices for designing filters for faceted search results, as follows:

1. Decide on your filter value-selection paradigm—either drill-down or parallel selection.
2. Provide an obvious and consistent way to undo the selection of filtering options.
3. Always make all filters and filtering options easily available.
4. At every step in the search workflow, display only filter option values that correspond to the available items, or inventory.
5. Provide filter option values that encompass all items or the complete inventory.

By following the design best practices for attribute-based filtering this chapter provides, you can ensure your customers can take care of business without having to spend time struggling with your search user interface.

CHOOSE DRILL-DOWN OR PARALLEL SELECTION

There are two basic ways to select filter options: drill-down and parallel selection. Ignoring the various modalities of the many derivative mechanisms for these primary modes of selection, these two basic ways to specify a value for a filter essentially boil down to two choices: links and check boxes.

A link is the simplest way to select a filter option. By clicking a link, a customer can either select a single value for a specific filter or drill down a level in a taxonomy comprising a hierarchy of categories or departments. As shown in Figure 7.1, Amazon.com provides one of the best examples of a search results user interface that uses links to let customers select filter options. Links usually indicate a straightforward equals condition—for example, “I want to narrow my search results to Department equals Books”—as they do on Amazon.com.

FIGURE 7.1 On Amazon.com, links enable customers to select a single filter option

In contrast to links, which enable customers to select only a single filter option, check boxes enable customers to indicate parallel selections of multiple filter options, limiting the scope of search results to those matching them. The KAYAK search user interface, shown in Figure 7.2, uses check boxes to limit search results to specific airlines. Check boxes typically indicate an additive “or” condition—for example, “I want to narrow the search results to: Airline equals American, Delta or United”—as on KAYAK.

FIGURE 7.2 On KAYAK, customers can narrow results to several airlines by selecting check boxes

Links and check boxes complement one another very well. Links are great where customers need to display multiple levels in a hierarchy—for example, when there are multilevel category drill-downs. Check boxes are great for selecting one or more options for attributes like brand or size. Unfortunately, not all Web sites use these two value-selection paradigms correctly.

As shown in Figure 7.3, the Office Depot user interface uses check boxes for selecting values, leading customers to expect a parallel selection paradigm, in which they could indicate they want to search multiple price ranges by selecting several check boxes. For example, to find chair mats priced from $0 to $100, customers might expect to select the price filter's first two check boxes. Thus, after clicking the $50–$100 check box to select it, they would expect to retain the ability to select the $50 and below check box.

FIGURE 7.3 Office Depot confuses the drill-down and parallel selection paradigms

However, after a customer selects the $50-$100 check box, the Office Depot search user interface does something completely unexpected. It drills down into the $50–$100 price range and removes the $50 and below check box, breaking the affordance of a group of check boxes that should let customers select multiple, parallel “or” values for a single filter. Instead, the user interface now displays $50-$60 and $60-$70 ranges, while still displaying the range of $50-$100 the customer originally selected as one of the available “or” values. Mixing the drill-down and parallel selection paradigms results in a confusing search user interface.

Another confusing thing about the Office Depot user interface is that it does not provide any obvious way to deselect filter options and return them to their original, prefiltered state. This brings us to the next best practice: providing an obvious undo mechanism.

PROVIDE UNDO FOR FILTER SELECTIONS

Make it as easy as possible for your customers to undo individual filter selections. Relying on the browser Back button as the sole interface device to undo a filter selection frustrates potential customers by forcing them to remove filters in the same sequence in which they were applied. Thus, someone looking at Large > Red > Hard Floor chair mats cannot switch to Small > Red > Hard Floor chair mats without first removing and then re-applying the Color and Floor Type filter selections, resulting in a large number of unnecessary clicks.

Both Amazon.com and KAYAK provide a clear, consistent way to undo the selection of a filter option and go back to All or Any for a specific filter. For example, as shown in Figure 7.4, Amazon.com provides a link to Any Department. Notice that the link is offset to the left, and a ‹ symbol helps customers understand that this particular link goes back.

FIGURE 7.4 Amazon.com enables undo via a link to Any Department

In Figure 7.5, you can see that KAYAK solves the undo problem by enabling customers to select an All check box, under Airlines, to view flights from all the available airlines. Note that the KAYAK undo is slightly less clear than that in the Amazon.com user interface, primarily because the All check box is neither highlighted in any way, nor separated from the rest of the check box options. Instead KAYAK highlights the airline that offers the best price. Although not standard, this is hardly something that would cause undue confusion.

FIGURE 7.5 KAYAK enables customers to undo airlines filter selection by checking All

On the other hand, the Office Depot user interface, shown in Figure 7.6, does not, at first glance, provide an obvious way of undoing the selection of the $50–$100 price filter option. There is actually a mechanism that enables customers to do this, but it is not at all obvious. The way for a customer to return to Any price is to deselect all filter options. Although this design may be completely valid from the software's standpoint, requiring people to uncheck all of the selections to remove a filter creates two problems. First, it is very inefficient. In the above KAYAK example, it would require 3 clicks, each followed by a separate Ajax call and a refresh of the search results page—with the entire remove sequence taking at least 8-10 seconds. Second, and most important, this type of interaction conflicts with how most people think about filter selections, which makes this interface confusing. There is a strong mental model mismatch: to a person using the interface, removing a filter selection does not effectively communicate the concept of All Prices. It would be much more effective to provide an All or Any option.

FIGURE 7.6 To undo, Office Depot makes customers deselect each filter option individually

Some sites use the deselect-to-undo paradigm successfully. One fine example is Yelp.com. However, sites that successfully implement deselect-to-undo typically make a concerted effort to ensure consistency in the values of filter options, which should not change based on other selections. For example, instead of removing options, the Yelp user interface makes certain filter options unavailable to indicate a lack of available inventory. Unavailable options appear dimmed, as shown in Figure 7.7.

FIGURE 7.7 Yelp ensures consistency for its deselect-to-undo paradigm

However, in cases where consistency is difficult to achieve, it is a far safer approach to use Any or All to undo the selection of filter options, particularly where the values of the options for a filter are dynamic. As shown in Figure 7.8, when a customer deselects filter options out of sequence on the Office Depot site, even greater confusion results.

FIGURE 7.8 On Office Depot, the order in which filter options are deselected matters

The Office Depot user interface is particularly sensitive to the order in which a customer deselects the check boxes for a single filter. For example, the price filter option $50-$100 simply disappears if the customer deselects it before deselecting the $50–$60 option. To undo the selection of both filter options, the customer would have to click the browser's Back button twice because there is no other way to return to the default state.

Typically, all the available filters and their options—plus the data that appears in the search results—are subject to change after each click. The key to providing a successful undo mechanism is to avoid completely removing options from a filter for which a customer has selected an option.

MAKE ALL FILTERS EASILY AVAILABLE

When designing faceted search filters, make sure all the filters always remain available to your customers. Please don't misunderstand me. I am not saying all filter options should remain visible at the same time. It is perfectly acceptable to collapse filters to just a label, providing a single link like View All Filters to expand them, or to display previously selected filtering options in a unique way. However, if at different steps in a search workflow, filters start randomly disappearing from the search user interface with no way to bring them back, bad things quickly start to happen.

Figure 7.9 shows what happens to the Office Depot search results when a customer selects the option Red for the Color filter. As you can see, when the customer selects a color, all the other filters disappear entirely.

FIGURE 7.9 On Office Depot, filters disappear randomly

Does this system behavior make any sense? Say, for example, you want to buy a red chair mat. Under Color, you can select the Red check box and view a great variety of red chair mats. Is there actually a compelling reason for you to do anything else with the color filter? Will you, as a true connoisseur of all things red, perhaps drill down into shades of red for your chair mat, such as Burgundy, Farmhouse Red, or Ripe Tomato? Not likely—at least not for chair mats. Instead, you are more likely to say, okay, these are all the red chair mats. Great! Now, can you select a mat from a known brand? Or perhaps you would like a budget-priced mat, so you need to further constrain your search by price. Or maybe you are a fan of The Ohio State Buckeyes and want to find a chair mat with the team logo, leaving fans of the Michigan Wolverines blue with envy. Using other filters to continue tweaking your red chair mats query is a far more likely scenario.

Alternatively, consider a different use case: You just selected Red and now can see a bunch of red chair mats. Almost immediately, you realize these red chair mats are almost, but not quite, entirely unlike the mat you actually want to buy. So, you attempt to seek out a way to undo your most recent selection, and a way to view what other filters might be available for your use. Unfortunately, for both of these use cases, the Office Depot search user interface unhelpfully removed all other filters when you selected a color. This action would be tantamount to KAYAK's removing all other filters like departure and arrival times, number of stops, and price whenever a customer selected a particular airline. How helpful do you think that would be to someone trying to find a flight? Removing any previously selected filter is detrimental to customer success and is, therefore, not recommended. If you feel compelled, for some reason, to minimize the screen real estate you are devoting to filters, you can collapse individual filters or hide their options temporarily under a More Options link.

PROVIDE ONLY FILTER OPTIONS THAT REFLECT THE AVAILABLE INVENTORY

Chapter 1, “Starting from Zero: Winning Strategies for No Search Results Pages,” touches on the idea of showing only options and links that actually point someplace useful. At every step in a search workflow, any available filtering options should reflect only the inventory that is currently available for purchase. The filtering options you display depend on a customer's previous actions—both the keywords in the original query and other filtering selections.

As shown in Figure 7.10, the chair mat color selections expand to reveal several color options including Maple Pale and Cherry Spice. Selecting Maple Pale and Red together should give you chair mats in both colors. Unfortunately, the user interface does not seem capable of supplying Maple Pale chair mats because when the page reloads, it displays the same five red chair mats. In reality, it's more likely those Maple Pale chair mats are just out of stock.

FIGURE 7.10 Office Depot shows color selections that are not applicable to a query

This idea seems obvious, but quite a few otherwise first-rate sites seem to miss it. Often, the underlying issue is technical. On many sites using Ajax search user interfaces, page calls retrieve and recompute all the summary data for every filter option in response to each change a customer makes to the filtering options, so speed becomes a primary concern. For many legacy systems, the demands of just-in-time data delivery are simply too much. At the end of their development cycle, developers are often frustrated to find that, despite their best efforts, their aging systems simply cannot deliver the speed necessary to retrieve the data for all filtering options, plus the items in the search results, plus the data for pagination, in a single Ajax call. In such an event, rather than redesigning the system from scratch to address the root cause of this problem, developers often end up taking shortcuts—either by caching all the filters, or by providing a generic list of options some of which, like the Maple Pale color option on Office Depot, may not be applicable to the specific query at hand.

PROVIDE FILTER OPTIONS THAT ENCOMPASS THE COMPLETE INVENTORY

You must always strive to design every filter to include a list of options that encompasses the entire available inventory. Here's an example. As you can see in Figure 7.11, the color filter in the Office Depot search user interface does not display a filter option for finding the most common chair mat color, which is Clear. Therefore, even when a customer selects all of the color options, the site can display only a fraction of the available inventory—in this case, only 16 of 23 available items. The seven clear chair mats have no color attribute, so customers can never choose to view only those items using the Office Depot user interface. Instead, by choosing to engage with the color filter, they unknowingly remove clear mats from consideration. This system behavior is clearly not beneficial to someone looking for a chair mat—especially if they are looking for the most common, clear variety.

FIGURE 7.11 Office Depot doesn't let customers view clear chair mats

I am not sure what Office Depot's reason for omitting Clear from its color options might be, but it is reasonable to assume that the clear chair mats have the color attribute of empty, or null. Therefore, it is not possible to group these items and filter them by a valid color attribute. Fortunately, one fairly straightforward way to resolve any missing or inconsistent data is to include Other or All Others as a filter option. A SQL condition corresponding to the Other filter option should specifically capture any items for which the object's facet value is empty, or null, ensuring customers can always view the entire inventory by using some combination of the filter options available in the user interface.

Often, there are more options for a given filter than you can show at once. A basic rule of thumb is to display 4 to 7 options for each filter.

If there are too many options to display, it is often desirable to hide the rest of the options in a More Choices panel or pop-up. In this case, Other might be an option that shows up only when a customer views the additional options. Specific queries dictate where you should show each particular option. In the example, given the popularity of clear chair mats, Other should be at or near the top.

TEST YOUR FACETED SEARCH INTERFACE

Be sure to test your search results user interfaces thoroughly with both potential and existing customers. It is important to test search user interfaces using realistic tasks. If your budget allows, avoid predefined search tasks. Instead, study how people find items they're interested in—preferably in an environment in which they would normally do the kind of searches you want to study. When designing search user interfaces, field studies are a crucial tool for continually making and validating design improvements—not just something you do merely as a formality at the end of a project.

THE DESIGN OF FACETED SEARCH UI CONTROLS

Throughout 2010, REALTOR.com® benefited from a change in the underlying search technology, and with it came the ability to present faceted search capabilities to those looking online for homes for sale. From a design perspective, we were able to provide users with an interface that gives them certainty about the number of results they would receive upon choosing a given facet, such as in the following screen shot, where clicking on “3+” under the Bedrooms section would result in seeing 72 homes for sale (with other search parameters still applied):

How to present faceted search UI controls became one of the more researched topics of the project. The preceding arrangement organizes facets into categories in a familiar left-hand-side placement. This is used quite widely, but has a few disadvantages. First, it uses up horizontal space, which could be otherwise used to show even more content on the search results page or a more standard 300 pixel-wide right column. (The preceding right-hand-side column is only 190 pixels, and cannot accommodate a small map of the area nor the more attractive 300 × 250 ad unit.)

Secondly, the connection between the search controls in the left-hand side and the results below were sometimes not clearly made in the minds of users. This is partly due to some of the content in the middle column having only an indirect relationship to the controls (e.g., featured placements) while other content is directly controlled by it. Also, the sheer number of elements on the page can be overwhelming, and there could be a stronger visual connection (through color and typography) between UI controls and the controlled content. Also the fact that the user must scroll so far to see all of the search controls meant that they often missed important options they wanted.

Finally, we noticed a negative effect on site speed with this arrangement as well. In this design, all the facets and their resulting numbers had to be computed and shown the preceding 3-column design shown.

One alternative we experimented with featured the faceted search UI controls arranged in a categorized horizontal bar above the search results page, such as in the following mock up:

One of the unexpected benefits of this arrangement was site speed. By putting the search UI controls under categorized layers, we could “lazy load” the facet information after the other elements on the page were loaded, which resulted in a snappier site. By the time users clicked on a category to reveal the facets, they were loaded and ready for use.

Another benefit from this arrangement was a clear understanding of how to control the search and what elements on the page it affected. This was partly due to a reduction in clutter and having only two columns on the page. Users clearly understood that the wider column on the left was the “primary” information, while the information in the wider 300 pixel right-hand side provided relevant but ancillary content.

The above design was not implemented in the first release of the REALTOR.com® redesign of 2010, primarily due to the ripple effect it had on several other aspects of the business and the underlying platforms that would need to be built to accommodate it. But from the standpoints of design, usability, and site speed, it proved to be a superior choice.

—CHRISTIAN ROHRER, PH.D.