Standard service - a fixed amount of work that is performed at a fixed price.  Post Service


Friday, 18 January 2019 01:06

Facet Search: The Most Comprehensive Guide. Best Practices, Design Patterns, Hidden Caveats, And Workarounds.

Written by
Rate this item
(0 votes)
Search Constraints (non-facet filters)
  • C. Facet filters
  • D. Search Results
  • Facet Navigation and Search Engine Optimization
  • SAP Commerce Cloud feature coverage
  • Bibliography
  • Abstract

    In this article, I structured the main concepts, best-practices, design recommendations, interaction patterns and visual design considerations for the faceted search.

    Key concepts

    Faceted search is a technique which involves augmenting traditional search techniques with a faceted navigation system, allowing users to narrow down search results by applying multiple filters based on faceted classification of the items. Also called guided navigation.

    Attribute-based Facetting and Needs-based Facetting

    Your customers may not always be well versed in a product’s technical details. The facets may or may not be the product attributes. At the design phase, one or more product attributes can be converted to one facet. Other attributes can be simplified to use as facets or even split into two or more facets.  

    SAP Commerce Accelerators support the translation from the product attributes into facets.

    Filter value-selection paradigm: Drill-down or Parallel

    There are two basic ways of selecting values for filters:

    • Drill-down selection(such as links with the immediate facet form submit). Ajax-like technique where filtering criteria is individually submitted, sequentially, upon each selection. Often represented as links, filters can also be built utilizing radio or checkbox buttons. 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. Every time a user clicks a filter link, checkbox, radio button, etc., the page refreshes (or the results refresh via AJAX), updating the search results.
    • Parallel selection or “en masse” (such as checkboxes with no immediate facet form submit). Checkboxes, used in the parallel selection mode, let customers indicate parallel selections of multiple filter values, limiting the scope of search results to those that match them. The user must manually press a “Filter” button after selecting various checkboxes (or setting up sliders etc.).

    Note, that in the Drill-down selection approach you can’t open all documents published today and marked as “New York” directly from the initial form. You need to perform two actions in a row: select city, then publication date or vice versa.

    Drill-down selection may appear slow and cumbersome to the user. So, for this option, using AJAX is highly recommended.  

    For the parallel selection, the user might not realize they have to hit a “Submit” button in order to actually apply the checkboxes/radio buttons/etc. they selected. They might select some checkboxes/radio buttons/etc. and wait, but nothing happens. This causes confusion and “friction” for the User, which can lead to a negative experience. Also, if the list of facets is taller than the visible portion of the page, the “Submit” button, which is generally placed at the top or bottom of the page, will get pushed out of the viewable screen, thus  causing the User to not even see that there is a Submit button at all.

    In order to address this issue, in some implementations, after the user selected the item, the submit button is revealed next to the selected item, along with some auxiliary information, such as a number of documents fetched.

    The Parallel Selection approach works well when search is quite slow and a probability of complex selection (many options) is high.  

    For parallel selection, you can face the problem of dependent facets. Some combinations of the facet values would return no results, and you need to mark those in the form somehow. Normally it can be done via greying out some of the items so that the user cannot select them. This approach case other edge cases too you need to work out.

    Drill-down selection and parallel selection complement one another very well. Drill down selection is great where customers need to display multiple levels in a hierarchy—for example, multi-level category drill-downs. Parallel selection is great for selecting one or more options for attributes like brands or sizes, especially if the system rearranges the facets in full after submitting the selection for a single facet.

    Important notice: don’t confuse it with single/multiple options per facet. This section is about selecting more than one facet per form without automatic (per-click) form submit.

    Key UI components of the Facet Search

    I’ve broken down the underlying components of faceted search into the atomic building blocks.

    At large, there are two main components of the Facet Search:

    • Facet Filters Panel (A-C),
    • Facet Search Results (D)

    There is also a search box which is one of the entry points for the functionality. In this review, the search box, as well as the advanced search page, is out of scope.

    The Facet Filters Panel contains:

    • A. Selected facet/value pairs (applied facets) – in some designs this block is not present. Example: “Size=10”.
    • B. Advanced Search Constraints (non-facet filters) – may not be present. Example: “Keyword Search in the results”
    • C. Facet filters. Each Facet filter contains:
      • Facet Filter Title. For example
      • Facet Options
    • Submit button (optional; used only in case of the parallel selection approach)

    The Facet Search Results Panel contains a list of items (documents, products).

    For the desktop version of the website, in relation to the Facet Search Results Panel, the Facet Filters Panel can be

    • Vertically, on the left side
    • Vertically, on the right side
    • Horizontally, along the top
    • Combined:
      • Left+Top: some filters are left-aligned, some – top-aligned
      • Right+Top: some filters are right-aligned, some – top-aligned

    For example, uses a top facet bar:

    Note that the checkbox on the left is used to build a custom description.

    For example, Aliexpress uses a combined approach:

    However, the top part is more or less stable, while the list filters depend on the product category. Possibly, the top part contains the advanced search constraints while the left part contains real facets.

    In SAP Commerce Accelerators, the Facet Filters Panel is on the left.  

    A. Selected facet/value pairs (applied facets)

    Applied facets can be implemented in two ways:

    • Non-dynamic list of facets
    • Dynamic list of facets

    A.1. Non-dynamic list of facets

    All facets are displayed in full and in the same order for all facet combinations, but some values are marked as selected. Some values are greyed out as non-selectable if they lead to zero results. This approach works well only with a small number of facets.

    In SAP Commerce Accelerators this approach is not implemented by default.

    A.2. Dynamic list of facets

    The Facets applied can be listed in the separate area. For single selection facets, the facet block is not displayed after the selection. The user can remove a filter from the list of applied.

    In SAP Commerce Accelerators this approach is implemented by default.

    B. Advanced Search Constraints (non-facet filters)

    B.1. Advanced Search Constraints and Facet Constraints

    For the faceted search, there are two types of constraints used:

    • Non-facet constraints. An example of the non-facet constraints is keywords or current customer location. Topic, city or country can be only a facet.
    • Facet constraints. The facet constraints are based only on the variety of attribute values of the search results.  

    In some solutions, both types of constraints are combined on the same facet navigation pane.

    In the following example, query (“table”), search scope (“products”) are non-facet constraints. Publication date and City are generally facet constraints.

    B.2. Filters and Facets

    According to Nielsen Norman Group research, there are two terms; filters and faceted navigation, and they are sometimes used interchangeably. “There is in fact quite a lot of overlap between these concepts: they share the same basic mechanism of analyzing a large set of content and excluding any objects that don’t meet certain criteria. The difference between the two is essentially one of degree, but it is an important difference. Filter means anything that analyzes a set of content and excludes some items. Faceted navigation is composed of multiple filters that comprehensively describe a set of content. Ideally, faceted navigation provides multiple filters, one for each different aspect of the content.”.

    In terms of this work, {Advanced Search Constraints} is {Filters} minus {Facets}.

    B.3. Search within the results 

    In this scenario the user is able to type query strings into a text box and have that constraint added to existing query refinements. According to our terminology, the filters like “Search within the results” are technically not facets, these are Advanced Search Constraints. In terms of the UI, they can be visually grouped with the facets.

    C. Facet filters

    C.1. Single Selection and Multiple Options

    The facet can be configured as:

    • Single Selection
    • Multiple Selection

    Single selection

    Multiple selection

    SAP Commerce Accelerator supports both options for facets.

    Aliexpress uses a combined approach. Some facets are single-selection, but you can convert them into multiple selection mode clicking on “Choose more”:

    Allowing single-selection to be converted into multiple-selection is not a common “interaction pattern” for a User, so be careful not to overuse.

    Edge cases of multi-selection you need to work out:

    • All items selected is basically the same as no items selected.
    • In the drill-down selection approach, selecting many items should not result in performance problems.

    C.2. Search Facet Types

    The types of data exposed by facets may vary depending on the underlying elements of the document model they represent. They usually fall within five commonly used types:

    • Nominal values, such as the label for a category;
    • Ordinal values, a discrete ranking value that may be ordered such as a number or text-based rating;
    • Interval type values, non-zero value representing a continuous range of values;
    • Ratio type values, similar to an ordinal value but allowing zeroes;
    • Free-text type, which usually holds text snippets not well suited to the other stated facet types.

    Beyond these basic facet types, compound or computed facets may be utilized to enhance searching.

    A correlated facet type is based on multiple underlying multi-valued fields which may only exist in particular combinations such as “Size” and “Color” for an item in a retail dataset. Correlated facets may be created to express the intersections of certain non-exclusive facets and avoid both empty result sets and unnecessary multiple refinement actions. Ensuring an intuitive “interaction” and design is critical when implementing correlated facets.

    Computed information such as the average rating or average price of a given item can be created at search time and appended to facet values to add additional information scent, guide emphasis or influence order of value presentation.

    From the presentation perspective, these types are mapped into the following types of facets:

    • Fixed List of terms to select (e.g. countries)
      • Single selection
      • Multiple selection
    • Fixed List of numbers to select (e.g. sizes)
      • Single selection
      • Multiple selection
    • Fixed List oficons/images to select (e.g color samples)
      • Single selection
      • Multiple selection
    • Boolean value(The facet has only one value and it is Yes/No).
    • Ranges
      • Free ranges (e.g. Price slider)
      • Range groups (e.g. Price groups)
    • Fixed
      • Single Selection
      • Multiple Selection
    • Dynamic
      • Single Selection
      • Multiple Selection

    Examples of Ranges:

    • Numerical ranges (<10, 10-100, 101-1000, 1001-10000, >10000)
      • Price ranges ($10 – $500)
      • Weight ranges (10-50, 51-100, 101-200)
    • Datetime ranges (Aug 10 – Sep 10)
      • Days
      • Hours
      • Months
    • Alphabetical ranges (A-N, O-Z)

    C.3. Search Facet Groups

    Facet grouping can be easily illustrated with the following example from

    The ‘size’ facet is actually a group named ‘Size’. It has four facets related to a group.

    Another example shows how facets can be organized into tabs to provide better UI:

    Although tabs are an option; they can create “friction” for the User because they “hide” facets, causing Users to have to “remember” what they selected (unless they “switch” back-in-forth).

    Search Facet Groups are not supported in the default SAP Commerce Accelerators. This functionality can be added as part of customization.

    C.4. Search Facet Visibility

    There are three possible options of facet visibility rules:

    • All filters with non-zero facets are displayed.
    • Only essential facets with non-zero results are displayed; All filters are available after the user clicks on “all filters”. The filters with zero results are greyed out, the value list is collapsed (not displayed), and values are not clickable.
    • By default all facets with non-zero results are displayed; However, the facets can be configured as non-displayable when a specified set of facets and non-facet constraints are applied, such as categories, location or personalization settings.

    In SAP Commerce, the third approach is implemented.

    C.5. Search Facet Type UI

    C.5.1. Fixed List of items/numbers to select: Single Selection

    The most common way of representing a single-selectable fixed list of items/numbers is alist of hyperlinks. SAP Commerce Accelerators also uses this approach by default.  

    Alternative options (customization is required):

    • Radiobuttons + a term/number with autosubmit
    • Radiobuttons + a term/number with group submit. For this option, don’t forget to add a neutral item at the first position (“Not selected” or “Choose an option…”)
    • Selectbox with autosubmit. For this option, don’t forget to add a “neutral” item at the first position (“None selected” or “Choose an option…”) . 
    • Selectbox with group submit. For this option, don’t forget to add a neutral item at the first position (“None selected” or “Choose an option…”).

    C.5.2. Fixed List of terms/numbers to select: Multiple-selection

    The most common way of representing a multiple-selectable fixed list of items/numbers is a list of checkboxes. SAP Commerce Accelerators also uses this approach by default.  

    Alternative options (customization):

    • Checkbox + term/number with manual form submit

    There is a special case for organizing hierarchical structures into a tree-like navigation. Such as dates (year->month->day) or categories. Please read “Hierarchical facets” for details.

    For “Large” lists – providing a “Select All / Unselect All” action should be considered. It may help the user with the case of filtering out only one item from the list (an inverse operation to selecting an item).

    C.5.3. Fixed List of icons to select: Single selection

    The most common way of representing a single-selectable fixed list of icons is a list of clickable icons.  

    For the single-selection list of swatches with a submit button (“parallel selection”) you need to consider an option which removes the facet setting. For swatches it may not be easy, because icon for that is not common and may not be recognizable reliably.

    Other types of the facets of this kind:

    Alternative options (customization):

    • Radiobuttons + icon, with autosubmit
    • Radiobuttons + term/number with manual form submit
    • Radiobuttons + icon + icon description, with autosubmit
    • Radiobuttons + term/number with manual form submit
    • Icon + description, as links
    • Selectbox with icons


    A product rating facet relates also to the ‘fixed list of icons’ facet category:

    For “Large” lists of icons providing a “Select All / Unselect All” action should be considered. It may help the user with the case of filtering out only one item from the list (an inverse operation to selecting an item).

    C.5.4. Fixed List of icons to select: Multiple selection

    This approach is not implemented by default, but can be easily added via customization.

    Alternative options (customization):

    • Checkbox + icon  with autosubmit
    • Checkbox + term with manual form submit
    • Selectbox with multiple selection

    C.5.5. Ranges: Free Ranges

    Free ranges facets are not implemented in SAP Commerce Accelerators.

    This concept is usually implemented as a slider with two knobs.  Min/max are parameters which can be dynamically defined by the results returned or fixed as a facet param.

    The range is called “free” because the step is not clearly defined in the UI.

    C.5.6. Ranges: Fixed Range Groups: Single Selection

    Fixed range single-selection groups are implemented in SAP Commerce Accelerators as a list of fixed groups (from-to).

    Alternative options (customization): Sectioned slider with two knobs; when min/max are defined.

    C.5.7. Ranges: Fixed Range Groups: Multiple Selection

    According to this concept, the system calculates the ranges based on the search results to deliver better customer experience.

    Fixed range multiple-selection groups are implemented in SAP Commerce Accelerators as a list of fixed groups and checkboxes (from-to).

    C.5.8. Dynamic Range Groups

    Dynamic Range Groups are not supported by SAP Commerce Accelerators by default (customization is needed).

    For example, if prices are between 0 and 60, the following groups should be generated:

    price:[* TO 20]  -> 23  items

    price:[20 TO 40] -> 42  items

    price:[40 TO *]  -> 33  items

    For example, if prices are between 0 and 300, the following groups should be generated:

    price:[* TO 100]   -> 23 items

    price:[100 TO 200] -> 42  items

    price:[200 TO *]   -> 33  items

    The algorithms behind that may be different. For example, the system can have a defined step and merge similar data in groups dynamically. Alternatively, it may perform basic cluster analysis to reveal groups efficiently. Think about the following example: 90% of your results are evenly distributed between $0 to $10, and the remaining (10% minus one) are evenly distributed between $900 to $1000, and one costs exactly $800. What ranges should you system generate for a facet?

    Aliexpress has an interesting example of how dynamic ranges may work:

    It has a fixed number of price groups, but the ranges are dynamic. For each range item, Aliexpress shows a percentage of the users who bought products in the price range.

    The minimum price for the example above is $0.04, the maximum price is $7880. Aliexpress split this range in five:

    1. 0.04 – 1.21 – 75334 results – 10% of customers bought in this range
    2. 1.21 – 6.38 – 187912 results – 38% of customers bought in this range
    3. 6.38 – 24.10 – 342929 results – 38% of customers bought in this range
    4. 24.10 – 62.90 – 510909 results – 11% of customers bought in this range
    5. 62.90 – $7880 – 306862 results – 3% of customers bought in this range

    It is unclear to me how Aliexpress splits the whole range into five subranges. The first guess could be that the calculation is based on cluster analysis and finding the middle points between the averages. With this approach, Aliexpress can detect five clusters. For the ranges above, their centers are ranges’ middles: 0.625, 3.795, 15.24, 43.5, and 3971.45. If you have any ideas, share your thoughts in the comments.

    C.5.9. Handling empty facets

    There is an interesting case when the product facet attribute (or document facet attribute in general) may be presented only for some products in the search results. For the remaining it is undefined. In fact, we have at least two possible values of the facet, “undefined”, “value1”, “value2”, …, “valueN”.

    The undefined value can be displayed or not – it depends on the design and business need:

    The second option is more flexible, but it exposes the data quality issues to the customer.

    The following example is from Bestbuy:

    You can filter all products with collection=’Magnolia’, but you can’t see all products which are NOT in this collection.

    In SAP Commerce Accelerator, empty items are not displayed in the facet as an option.

    C.6. Resetting Multi-Option Facets

    There are four ways of implementing a multi-option facet reset:

    • All” checkbox on the top of multi-option facets

    • “View all <facet name>”. Clicking it will submit the form without this facet.

    • Clear all”. Clicking it deselect all checkbox, but not submit the form.

    • Reset button for a filter, and “Reset All” on the top to reset all filters-at-once.

    The option #4 is recommended. In the SAP Commerce Accelerators, there is no way to reset facet state. However, it is a very light and minor customization.

    C.7. Aggregations in the facet values

    For the better UI, the items in the facet values list can also have the aggregation data, such as:

    • Best price for the option
    • Price ranges for the option
    • Number of matches

    Show the number of matches against each faceted filter; this helps the users pick the right filters based on their search commitment and intent.

    C.8. Special types of the facets

    C.8.1. Color choosers

    This functionality is not implemented in SAP Commerce OOTB.

    C.8.2. Sliders and histograms

    For the take-off time range, Kayak shows a histogram showing a demand:

    C.8.3. Tags

    This approach works well if a number of possible values is very large. However, it is not a facet filter even if it is visually designed as a facet. This filter relates to Advanced Search Constraints (see above).

    In the next example, tags are used for filtering by a skill.

    Read 126 times

    Leave a comment

    Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.