Ecommerce sites implement product filters in many different variations.  

As a result, the consumer is left to learn and relearn how to use filters whenever they embark on a different journey on a different site.

There are best practice guidelines to the use of filters that retailers should consider following. This is the purpose of this article.

It will address issues and present the best methods to construct filter behaviour in the context of enhancing online experiences.

Due to the size of this topic which must span the various screen sizes, this article only focuses on desktop screens (and makes some references to tablet screens).

For retailers who have large product ranges, filters are an essential part of improving online experiences.

If retailers can present and treat filters in the right manner, it enables consumers to quickly refine a large product range by the product attributes he/she deems important and aligned to his/her intent.

Some would call this act of empowering consumers with the means to manipulate content by their own hand, a personalised experience.

In order for filters to add value to a consumer’s journey, there are a core set of “filtering characteristics” to consider:

  1. Filter placement: Where should filters be located on a page?
  2. Presenting relevant filters by product range: Different products with different attributes demand different filter options.
  3. Presenting the filtering options: How should a long list of filter options display as a default?
  4. Visually validating selected filters: When consumers select a filter, how should this be presented to provide consumers the confidence the site has reacted to this request?

This narrative is based on the assumption that the integrity of a retailer’s product master data is to a high standard.

If not, this becomes the first challenge the business must overcome.

Some recommendations in this article are reliant on this business function.

Filter Placement

NN Group’s eye-tracking study back in 2010 found 69% of consumers spend most of their time focusing on the left hand side of the page.

There is no shortage of examples of well-known retailers placing their filters on the left hand side of the page, one of which is ASOS:

asos

From the perspective of filter placement on a page, most retailers are doing a great job.

This is the easy part done.

Presenting relevant filters by product range

Filters have the potential to become an enabling ingredient for consumers to shop in their own individualised way based on their unique personal needs and preferences.

For retailers to make the most of this opportunity there is a need to deliver relevant and unique filtering options for each category.

This requires retailers to have a good understanding of how consumers want to buy from them. There is an increased need for consumer empathy.

One good example of relevant filtering per category is Sephora which has provided a number of different refinement options for consumers interested in Moisturisers.

Within the Sephora Moisturiser category consumers can filter by:

  1. A consumer’s age (something consumers might not be comfortable discussing in a physical retail setting).
  2. Brand.
  3. Concerns (another topic some consumers might not be comfortable discussing).
  4. Ingredient preferences.
  5. Size of the product (travel vs value). Some consumers may want this product to remain in their purse/handbag while others may want to purchase something larger to save money.
  6. Skin type.
  7. Sun protection.
  8. Price Range.

Notice how price range is the last of the filters in presentation. This is done intentionally.

If the consumer finds a product perfectly matching her needs, does price matter?

Though there are over 450 moisturiser products to choose from, but with the comprehensive filter options on offer this range could grow in size and consumers would still have a good experience.

The Presentation of Filters

The majority of retailers present filters in four different ways.

They are:

  1. Displaying all filters at once.
  2. Applying scrolling capability within each filter type.
  3. Presenting filter titles with no filter options to select.
  4. Truncate filters (abbreviate the presentation by displaying a sub set of the filters and provide a “See more” or “See all” hyperlink to present all other filter options).

Displaying All Filters

When displaying all filters the list becomes too busy for the consumer’s eye, making it difficult to identify and absorb all options presented.

An example of this in action is Gamestop.com.

While the filters are styled blue to indicate they are hyperlinks, the list is long, the font is small and the spacing is tight.

This style of filter presentation also makes for difficult finger targets when this is translated to tablet screens.

Click to see the full list of filters

Apply scrolling capability for filters

A good example of filters with scrolling capability is found at Sephora.com.

Click to see the full list of filters

The issue with this approach is the scroll bar itself.

Usability research completed on this type of filter presentation found the following issues:

  1. The fixed height of the filter frame will only ever present four to five options for selection.
  2. Small finger target on tablet screens.
  3. “Scroll Hi-jacking”. This is a term used to describe the consumer’s need to be constantly aware of his/her mouse when using the scroll bars.
  4. Slow page load speed.

Only presenting filter titles

Presenting only filter titles and not showing any options may sound like a good idea for retailers with many filter types, but it comes with issues.

For example, Staples.com does this across its entire site, below is what you see when you select the Laser Printer sub category.

The issues with this approach:

  1. Sometimes the naming of the filter may not be intuitive and the filter options help to explain what it means.
  2. The display of filters can prompt consumers to make a selection.
  3. Hiding filter types increases the physical effort of a consumer in making a selection (more clicking is required).

Truncating filters

“Truncating filters” is a fancy term for partially displaying a selection of filtering options for each filter type with a clear “See/Show More” hyperlink prompting that action if necessary.

This filter presentation option has the most benefits, but there are conditions to this approach in order for it to be effective.

  1. Retailers will know what brands are the most popular and should display these first. Once a user selects “See More” the list of filters would then present in alphabetical order.
  2. “See More” or “See All” hyperlinks are clear and obvious.
  3. In order to manage interaction cost there needs to be clear and obvious visual cues so users know their filter selection has been honoured. It is also important to present intuitive methods to deselect filters.

Macy’s has the right idea by providing visual cues to the selected filters, and repeats the selected filters at the top of the page.

One of the better examples of visual filter validation in action is Newegg.com.

The selected filters are repeated and presented at the top of the page, they are visually strong, and simple to deselect.

The end…

That wraps up our quick tour of filters on desktop.

I hope you enjoyed reading this article as much as I enjoyed creating it!

Further reading: