Online search experiences
Searching is one of a basic activities people start when they using the internet. Most of the users feel satisfied and confident with the result they get, nearly all report that they are usually successful in finding what they’re looking for. This explains the popularity of search engines and a simple and advanced search inside the big data websites.
Whereas, speaking about advanced search user experiences, we enter into complex filtering and sorting. The web search engines (Google, Bing, Yahoo! Search, DuckDuckGo), huge online markets (Amazon, eBay, Aliexpress, Etsy, BarnesAndNoble), intelligent data metrics (Google Analytics, Facebook Analytics) and more - each of them uses his unique filtering system. Let’s figure out the common and the difference between them.
Advanced Search - Best Practices
How people use search engines has evolved over the years, but the primary principles of conducting a search remain largely unchanged.
Build for users, not for search engines.
Recently, I worked on a redesigned search user interface on one big media archive, adding category-based filtering and creating a more dynamic, interactive user experience. Whereas, researching the Filtering and Sorting I discovered excellent case studies for demonstrating some of the important best practices for designing filters for faceted search results, as follows:
- Decide on your filter value-selection paradigm—either drill-down or parallel selection.
- Provide an obvious and consistent way to undo filter selection.
- Always make all filters easily available.
- At every step in the search workflow, display only filter values that correspond to the available items, or inventory.
- Provide filter values that encompass all items, or the complete inventory.
By following the attribute-based filtering design best practices this article describes, you can ensure your customers can take care of business without having to spend time struggling with your search user interface.
1. Choose either drill-down or parallel selection.
There are two basic ways of selecting values for filters: drill-down and parallel selection.
There are two basic ways of selecting values for filters: drill-down and parallel selection. Ignoring the various modalities of the many derivative mechanisms for these primary modes of selection, the two basic ways of specifying a value for a filter essentially boil down to two choices: links and checkboxes.
A link is the simplest mode of filter selection. By clicking a link, a customer can either select a single value for a specific filter or drill down a level in a taxonomy, like a category or a department hierarchy. Amazon.com, shown in Figure 1, provides one of the best examples of a search results user interface that uses links to indicate filter value selections. Links usually indicate a straightforward equals condition—for example, I want to narrow my search results to Department = Books—as they do on Amazon.
Figure 1 — On Amazon, links let customers indicate a single filter value
In contrast to links, which let customers indicate a single filter value, check boxes let customers indicate parallel selections of multiple filter values, limiting the scope of search results to those that match them. The Etsy.com search user interface, shown in Figure 2, uses checkboxes to limit search results to specific products. As on Etsy, checkboxes typically indicate an additive OR condition—for example, I want to narrow the search results to: Shipping = Free shipping OR Ready to ship in 1 business day.
Figure 2 — Etsy shipping selector uses checkboxes to select multiple values
Links and checkboxes complement one another very well. Links are great where customers need to display multiple levels in a hierarchy—for example, multilevel category drill-downs. Checkboxes are great for selecting one or more options for attributes like locations or prices.
We can clearly see how Etsy separates two filtering methods, Check Box and Radio Button - with an ability of multiple or one only filters accordingly. For example, to find shirts priced from $0 to $50, the user won’t use radio button selection, once it does not provides the desired result, but will use a custom range instead.
Figure 2a — Etsy shipping selector uses radio buttons to select a single value
Unfortunately, not all Web sites use these two value-selection paradigms correctly. As shown in Figure 3, the Ace user interface uses check boxes for indicating value selections, leading customers to expect a parallel selection paradigm, in which they could indicate they want to search multiple price ranges by clicking several check boxes. For example, to find folding knives that are priced from $0 to $50, you might expect to be able to select the price filter’s first two checkboxes. Thus, after clicking the $25.01-$50.00 checkboxes, you would expect to retain the ability to select the Under $25.00 checkbox.
Figure 3 — Ace mixes the drill-down and parallel selection paradigms
However, once a customer selects the $25.01-$50.00 checkbox, the Ace search user interface does something completely unexpected. It drills-down (or in this case, it actually filters up) $25.01-$50.00 price range and removes completely the other Price Range filters, breaking the affordance of a group of checkboxes that should let customers select multiple, parallel OR values for a single filter. Instead, the user interface now displays $25.01-$50.00 the customer originally selected as one of the available OR values. Mixing the drill-down and parallel selection paradigms results in a very confusing search user interface.
Besides, another important point crediting Ace user interface is that it does provide an obvious way to deselect filters and return them to their original, pre-filtered state. Pressing the “x” button intuitively deselects the current filter and returns all price ranges back. This brings us to the next best practice: providing an obvious undo mechanism.
2. Provide undo for filter selections.
Typically, all of the available filters and options, plus the data that appears on a page can change after each click. The key is to avoid completely removing options in the same filter where a click took place.
Both Amazon and Ace—pictured in Figures 1 and 3, respectively—provide a clear and consistent way to undo a filter value selection and go back to All or Any for a specific filter. For example, Amazon provides a link to Any Category. Notice that the link is the upper site menu item helping customers understand that this particular link goes back to all results.
On the other hand, the Etsy user interface, shown in Figure 2, does not, at first glance, provide an obvious way of undoing the selection of the Shipping filter. There is actually a mechanism that lets customers do this, but it is not at all obvious. The way for a customer to return to Any shipping is to deselect every filter selections. While this design may be completely valid from a computer’s standpoint, deselecting all checkboxes does not effectively communicate the concept of ClearAll to a person using the user interface. It would be much more effective to provide an All or Any option.
Alternatively, you can see that Etsy solves the undo problem by letting customers click an “x” button to delete filters appearing above the results. Note that Etsy separates the filter results from the rest of the checkbox options, making an additional way to go back to all results. Though, even if it’s a clear way to “delete” the filter, yet there is no option to Clear All filters.
There are sites that use the deselect-to-undo paradigm successfully—one fine example is Yelp.com. However, sites that use deselect-to-undo typically take special steps to ensure consistency in the filter value options that do not change based on other filter selections, as shown in Figure 4.
Figure 4 — Yelp ensures consistency in its deselect-to-undo paradigm
However, in cases where consistency is difficult to achieve, it is a far safer option to use Any or All to undo filter selections, particularly when a filter’s value options are dynamic.
3. Always make all filters easily available.
Let’s take a look at how the biggest search engine provides a filtering system. Searching for an image in Google is one of the best experiences. Speaking about hundreds of millions results in most of the cases, developing complex tools to filter search results, where a user can be as much precise as possible, minimizes those results to amazingly quick satisfaction.
Not all filters should be visible at the same time. It is perfectly acceptable to collapse filters to just a label, providing a single link like View All Filters or Tools, or to display previously selected filtering options in a unique way. However, if at different steps in the search workflow, filters start randomly disappearing from the search user interface with no way to bring them back, bad things start to happen very quickly.
For example, I want to find a large image of red gladiolus. Figure 6 shows how easy those tools used to get to my specific search criteria. Selecting the Large from a size drop-down filter, selecting Red from Color filter, including Gladiolus in additional results bar - and yes, I’ve found immediately what I need.
Figure 6 — Google Filter Tools show all sections.
If you really feel compelled, to minimize the screen real estate you devote to filters, you can collapse individual filters or hide their options temporarily under a More Options link.
4. Display only filter values that apply to the available inventory.
At every step in the search workflow, any visible filtering options should reflect only the inventory that is available. This is dependent on a customer’s previous actions—both the keywords in the original query and the other filtering selections. As shown in Figure 7, Amazon’s result for the Internet, Groupware & Telecommunications selection expands to reveal Book Format choice, where both Audible Audiobook and Audio CD unclickable and grey-colored. Which can be easily determined by user as not available item.
Figure 7 — Amazon shows book formats that are not applicable to a query
This idea seems really obvious, but quite a few otherwise first-rate sites seem to miss it. Often, the underlying issue is technical. On many sites with Ajax search user interfaces, pages retrieve and recompute all the summary data for all filter values in response to each change a customer makes, 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 all the filtering options, plus the items themselves, 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
- caching all of the filters or
- providing a generic list of values that may or may not be applicable to the specific query at hand—like the Book Formats on Amazon
5. Provide filter options that encompass the complete inventory.
An equally important point is that we must always strive to design every filter to include a list of options that encompass the entire available inventory. Fortunately, one fairly straightforward way to resolve any missing or inconsistent data is to include Other or All Others as a filter option. The SQL condition corresponding to Other should specifically include any items for which the filter criteria is empty, or null, enabling customers always to view the entire inventory by using some combination of the available filter selections.
Often, there are more options for a given filter than you can show at once. Typically, best practice tells us to show 4 to 7 options for each of the filters. 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 popup. In this case, Other might be an option that shows up only once a customer is viewing the additional options. Specific queries dictate where to show each particular option. In our example, given the popularity of clear chair mats, I think Other should be at or very near the top. However, regardless of their order, it is critical to include all of the options that encompass the complete inventory. This is especially important in cases where there is no All or Any undo option. Otherwise, we risk making some of the most popular items on a site unfindable.
In Conclusion
Faceted search user interfaces are extremely useful. Fortunately, there are a few relatively simple and straightforward design best practices that should help designers to minimize cognitive friction and create search user interfaces that are easy to understand and use.
Of presented practices for designing filters for faceted search results, may be the most important is the first one - choosing either drill-down or parallel selection. If you choose your filter value-selection paradigm correctly, you are already halfway there.
Whichever filtering paradigm you decide to implement, be sure to test your search results user interfaces thoroughly with both your potential and existing customers. If your budget allows, it is best to avoid predefined search tasks. Instead, study how real people find items they are actually interested in—preferably in an environment where 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 as a formality at the end of a project.