Facet design may seem like a trivial task at first. After all, it’s just a list of links representing a range of facet choices. By clicking on one choice after another users simply refine and narrow down the search results. Sort them by popularity (frequency) and show those neat hit counts on each facet choice, and you collect instant bonus points for improved usability and information scent. It’s not a lot more to it, right?
Wrong. You can and should put a lot more consideration into how you give shape to facets, in terms of both information design and interaction design. Poor facet design hurts. It alienates and confuses users by disregarding established mental models and overloading them with information. Good facet design on the other hand, makes use of web design conventions and familiar vocabulary to increase affordance and help users anticipate the effects of their actions.
It’s probably true that real knowledge of what works and what doesn’t in design should be based on empirical studies and hard evidence. But I also believe that best practices and reasoning takes us a long way towards something that works better. Design patterns, evidence-based or not, is a great asset for us all, and great things should be shared. For what it’s worth, I would like to share 3 of my own favorite design patterns for faceted search. I have good experience with these, and I hope they may serve you just as well.
Pattern 1: Multi-select with check boxes
A facet design with check boxes is ideal for multiple selection within a facet, like when you’re looking to buy a car and want your search to target a few chosen manufacturers. A facet with check boxes lets you choose all these in one go, saving you both time and frustration.
You should use check boxes for multi-selection facets because:
- It’s a strong visual design element that tells users by convention to “select as many of these as you like”. Choices are implicitly combined with a logical OR, finding items matching one or more choices.
- They work well for disjunctive (mutually exclusive) categories when it’s necessary to cross-compare items from different categories. Tabs or links, on the other hand, will not let you cross-compare.
- They support concept composition, allowing users to form idiosyncratic concepts like “Japanese cars” or “Reliable used cars” without a need for prior classification by the content editors.
- You avoid tiresome pogo-sticking between categories like you would have to with regular link list facets.
You should not use check boxes when:
- Don’t use check boxes for facet that are very large (50+) or hierarchical. Multi-selection with check boxes doesn’t scale with size.
I also add a few extra details to my multi-selection facet designs:
- I include an extra set of radio buttons (Show All/Choose Makes) to avoid confusion when all check boxes are initially empty (saving the diligent user who concernedly checks all the boxes for unnecessary work).
- I initially present a short teaser list (7±2) sorted by hit count. A link to “More choices” reveals a longer list of facet values sorted alphabetically (if another sorting criteria isn’t more suitable).
- I let the facet value hit counts indicate how many search results you add/remove by checking/un-checking an option.
Pattern 2: Single-select with radio buttons
Sometimes it’s better to think of facets as a way to toggle between different views of the result set. Examples could be a facet for low, mid and high-priced cars, or a facet for mileage ranges. These options are mutually exclusive (a car can’t have both a low and a high price, or both low and high mileage) and the number of options are few. With radio buttons it’s painfully obvious to the user that just one choice can be made at a time, and it’s reassuring to know that radio button choices can easily be changed.
You should use radio buttons for single-selection facets because:
- They work well for a small number of successive inclusive or overlapping choices, like price, date and other numerical ranges.
- It’s a strong visual design element that tells users by convention to “select either this or that”.
- Undo is really easy, since all options are visible all the time.
You should not use radio buttons when:
- Don’t use radio buttons for facets of even moderate size (9+), since long lists of options take up a lot of screen real-estate. You may also run the risk of choice overloading the users.
- Don’t use radio buttons when items need to be compared across categories. Use multi-selection with check boxes instead.
A few details I make sure to include in my single-selection facet designs:
- I include a default “Show All” option in the list that implies not having made a choice.
- Even options with zero results are visible, but disabled.
- I show facet value hit counts that indicate how many search results each choice will produce.
Pattern 3: Repeated selection with link lists
The dominant design for facets is by far the link list. In this example we have a list of features you may want in a used car. Each successive click on a facet value adds a constraint to the search, helping you find cars that match all the criteria that are important to you. Each selection also reduces the number of options left to choose from. On the upside, this interaction style takes you quickly from a larger general result set to a smaller specific one. The downside is pogo-sticking.
You should use links for repeated selection facets because:
- They work well for large facets with overlapping categories, both flat and hierarchical. Choices are implicitly combined with a logical AND, finding items matching all choices.
- Links are safe – everybody understands what a link is (not everybody understands what facets are, however, but that’s a different discussion).
You should not use links when:
- Don’t use links for facets if check boxes or radio buttons (or drop-down lists or tabs) suit your problem better.
- Facets with links have one major drawback – undo is less obvious as options disappear. Choices you make eliminate choices you haven’t made, since those options are no longer available and visible.
Some details I make sure to add to my link list facets:
- I include a “Show All” link that removes all choices made for the facet. A positive wording may encourage users to explore this feature, as opposed to a more negative “Remove Choices”.
- I provide clear visual feedback on chosen values (bold face and check mark graphics).
- Hit counts for chosen values are usually equal to the number of search results, so I simply hide those.
- I sort the teaser (7±2) on hit count, and will perhaps change the sorting to alphabetical for the full list.
More search design patterns
Peter Morville has a nice collection of search pattern screenshots. Marti Hears has published her book Search User Interfaces online for free. Rumours has it that Endeca is planning to release their UI Design Pattern Library sometime soon.