Too much information often causes problems in online services, whether on ecommerce sites, news sites, social media, or any big corporation’s website. One way to help users navigate through many options (products, locations, content, etc.) is to allow them to narrow down the list of items to a manageable number that satisfies their specified criteria.

In our user research, we often hear people comment on how much they appreciate these tools for narrowing down search results. When well-designed, they create a positive feeling of control and choice, even in the face of overwhelming numbers of options.

“That’s always helpful, the information on the side, the filters. I appreciate that when I shop, especially when I know what I’m looking for.”  —  Usability-test participant

There are two classic mechanisms for narrowing down options: facets and classical filters. Each of these involve defining a set of clear criteria (also called filters). While the distinction between facets and classical filters is important, for this article it is not relevant; let’s focus on defining sound criteria for either of the tools.

 Each filter (or criterion) has two components:

  • A filter category is a property of the items, such as color or price. A filter category often contains several filter values.
  • A filter value is either a specific value of a property (say, “red”), or a range of values (say, “less than $100” or “red or blue”).

For example, Expedia.com’s hotel search has a filter category labeled Amenities. Users can select filter values (like Swimming pool and Free parking) from that category to narrow down the available hotel options.

Users can select the Swimming pool filter value from the Amenities filter category on Expedia.com.
Users can select the Swimming pool filter value from the Amenities filter category on Expedia.com.

A truly usable faceted search provides filter categories and filter values that are appropriate, predictable, free of jargon, and prioritized.

Appropriate

The filter categories your search provides must cover the most important aspects of whatever users will be filtering, based on relevance to users’ needs.

Some filter categories will work for many items, for example:

  • Brand
  • Material
  • Color
  • Average Rating
  • Price
  • Size
  • Availability

However, using just those common filter categories across your site won’t be enough to help people make choices. You’ll obviously need different filter categories for appliances than you’ll need for adoptable pets or rental cars. But even then, you’ll want different filters for washing machines versus dishwashers. (Also, remember to provide appropriate currencies and international measurement units if you’re serving an international audience.)

It can be time consuming to customize the presented filters for each content or product type, but the effort is worthwhile. Remember that these filters are the tools your users will rely on to help them navigate their options and make a decision.

If your site is missing a critical filter, your users are likely to notice and complain. One participant in a qualitative usability test was shopping for shoes on Nordstrom’s site. While on a sale page, he was disappointed when he didn’t see a filter for Size. “Filters are pretty important,” he said. “They have them for color and price and brand, but not size. So that turns me off.”

Selecting good categories that will truly be helpful for users in your targeted domain is one of the ways in which specialized websites can provide superior user experience relative to bigger and more generalized sites like Amazon.com. One size definitely doesn’t fit all when it comes to supporting niche user needs. A deep understanding of these needs comes from detailed user research, which is more likely to be done by companies serving a narrow domain than by companies with broad product offerings.

Predictable

Users should be able to roughly predict what filter values they’ll find within each filter category and understand the differences between any two filter categories. This attribute is particularly important for mobile, where many designs use collapsed accordions to contain their filter values.

Overstock’s mobile site collapses its filter values into expandable accordions, each with the filter category’s name as its label.

One usability test participant shopping for sandals on DSW’s site had a hard time understanding the filter categories. She navigated to the Women’s Clearance section of the site, but wanted to narrow the products to see only sandals. She opened the filters tray. In the tray, she saw several accordions corresponding to filter categories: Size, Width, Color, Brand, Item Type, and Style.

Where would she find the filter value for sandals? She skipped over the filter category Item Type, which is a vague label and doesn’t sound specific to shoes. She opened up the Style filter category. There she found filter values like Gladiator and Flip Flop: phrases that could be used to describe sandals, but no overarching Sandals style.

DSW’s Style category offered very specific kinds of shoes, but not the general category “sandals” that the participant wanted. (This tray of accordions is a pattern that works well on mobile, but is unnecessary for larger devices.)

“I was just looking for sandals,” she said, “but these are really, really specific. Sometimes I don’t know what some of these words mean. Like, Gladiator. I don’t see sandals.” Discouraged by the options in the Style filter category, the user turned to the site search. She searched for “sandals,” and found some of the products she wanted.  When she opened the filters tray again to narrow her options, she looked again at the Item Type category. This time, she expanded the accordion and found the general shoe-types labels she had been looking for. “Sandals! There you go,” she said. “When I clicked Style, I expected it to be there.”

The general shoe-style filters were under the Item Type category.

Style is a more concrete label than Item Type, and seemed to better describe what she was looking for, so the participant paid more attention to it. Based on these filter-category labels alone, it was not clear what the difference between the two groups of filters would be, or why a specific filter value would be in one category but not the other.

As much as possible, avoid filter categories with vague labels like Item Type. Words like Category, Format, Content Type, or Genre are better, because they feel a bit more specific and tailored to the current item. For example, products can be divided into Product Categories, while movie rentals fall into Genres. Labels for filter categories and values must be as concrete and precise as possible, to bridge the gulf of execution and help users figure out what they should do.

As an aside, in DSW’s case, the best approach would have been a hierarchy of filter values within a filter category of Style. More general style choices (Boots, Pumps, Sandals) could be the first tier. Once one of those filter values was selected, the system could reveal and offer more specific subcategories (Flip-Flops, Gladiator Sandals, Slides).

A hierarchical filter structure, like this one used on Amazon.com, would be better for DSW.com than two competing filter categories with labels that fail to be mutually exclusive.

Free of Jargon

Unintelligible jargon has no place in filters. As much as possible, the labels of filter categories and values must be easy to understand. Avoiding jargon in filter labels will help achieve the goal of keeping filters predictable, as outlined above.

The SPCA of Texas helpfully provides filters to help people find adoptable pets that fit their preferences. Unfortunately, one of their filter categories, Behavior, contains the values: Purple, Orange, and Green. What is a Green behavior? Likely, it’s some sort of internal code used within the SPCA to characterize animals without using prejudicial labels like “aggressive” or “anti-social.” However, that internal jargon has no meaning to potential pet adopters.

The SPCA of Texas uses internal jargon in its Behavior filter values, rendering them useless.

Filters are useless if people don’t understand what they mean. Remember that many of your users know far less about the details of your products or content than you do. They can’t be expected to know every term or feature associated with them.

If your site contains complex products or content, anticipate what terms or concepts might be unfamiliar to users. Once you know which terms are likely to be problematic, you can then decide how to deal with them. In some cases, you won’t want to use them at all. In other situations, you’ll need to have them available, but provide explanation.

Best Buy handled the challenge of complicated filter categories by providing in-context explanations. Each tricky filter-category label had an information icon next to it, which could be clicked to reveal more information.

Not everyone shopping for a laptop will know what processors are or how they work, but some shoppers will care very much about the type of processor in a computer they buy. To serve both inexperienced and experienced laptop shoppers, Best Buy provides a tooltip next to the filter category labeled, Processor Model.
When clicked, the tooltip launches a modal with more information. This particular explanation works well because it uses a metaphor (“Your computer’s brain”) to explain a complicated concept. It also outlines what this particular attribute means to the user: “determines the complexity of the software you can run.” However, there’s still no explanation of whether an 8th generation i5 is more or less powerful than a 7th generation i7. We can hope that these processor models are sorted according to “brainpower,” but we don’t know.

Prioritized

The organization of filter categories and values is critical to ensuring that users can easily discover their desired filters. These elements need to be ordered according to importance.

The filter categories placed higher in the list will receive more attention. As a good rule of thumb, consider placing the most general, high-level filter categories at the top of the list, and the more specific ones towards the bottom. The general filters at the top might include things like category/style, brand, average rating, color, price, size, or weight.

Organizing filter categories this way can be particularly helpful in managing potentially confusing or obscure filters for complex content or products (like laptops).

For example, B&H Photo sells SLR cameras and lenses. Some of its customers are new to photography and some are experts, but the website has to accommodate the needs of both.  Filters that the experts will appreciate might intimidate or confuse beginners.

B&H Photo’s solution is to use sound filter-category prioritization. On its SLR Lenses category pages, general filter categories (Brands, Customer Rating, Price Range) are at the top. More specific — and potentially confusing for inexperienced photographers — filter categories like Lens Mount and Maximum Aperture are placed at the bottom. That way, they’re still available for advanced shoppers.

There will be instances where you’ll want to break this rule and will want to move a more specific filter category higher up the list. This is true for products or content where one or two characteristics will be particularly influential in the user’s choice. For example, users shopping for washing machines may care much more about the Interior Capacity than the Color while narrowing their options. In that case, the specific filter category of Interior Capacity should be prioritized higher in the faceted search. Relevance to users is the ultimate prioritization criterion.

Within filter categories, you’ll need to decide how to order the filter values. For numerical filter values, the preferred way is to sort them from lowest to highest (for price ranges) or vice versa (for example, for average customer ratings).  When the filter values are words, the default approach is organizing them alphabetically if users are likely to know the names of the filter value (like it is the case with brands).

But for other types of values (e.g., grocery categories such as Dairy, Produce, Meats), alphabetical ordering is not helpful.  In those situations, understand what the users’ priorities are and reflect them in your ordering of filter values.

Research

To design a filter categories and values that serve your users, you’ll need to answer several questions:

  • Which characteristics are most influential to users in making their choice?
  • What words do users use to describe these characteristics?
  • Do users understand our labels, or do they look like jargon to them?
  • Which filter values are the most popular or most commonly used?

To find answers to these questions, you’ll need to turn to user research.

Interview or survey your users to find out how they think about your products or content, and what they care most about. Talking to salespeople or customer-service representatives can provide some of that information as well.

Check search logs to see what people search for and understand which characteristics are most popular and the exact language your users are familiar with.

If you already have a filtering tool implemented, analytics metrics can help you figure out which filter categories are most popular. Experiment with A/B or multivariate testing to refine the language used in your filter labels.

 

For more recommendations on faceted search, check out our full-length report, Search (Including Faceted Search), Volume 5 in our Ecommerce User Experience report series.