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:

Greg Randall

Published 30 August, 2016 by Greg Randall

Greg Randall is a senior digital consultant with Comma Consulting and a contributor to Econsultancy. You can connect with Greg on LinkedIn or Twitter

24 more posts from this author

You might be interested in

Comments (5)

Chris Gibbins

Chris Gibbins, Director of User Experience & Optimisation at BiglightSmall Business Multi-user

Nice article Greg. I feel this topic even if focussing just on desktop deserves at least another follow-on "part two" article as you've only just scratched the surface when it comes things to consider for designing a great filtering experience. It would be useful I feel to discuss other aspects like: checkbox multi-select versus old fashioned text link method; how to best show feedback that the filters our updating; should the whole page update or just the product area; do you need to display what filters have been applied with "remove" links in addition to the ticks; vertical left hand side versus horizontal or collapsed filters (pros and cons); labelling i.e. Should they be called "filter by" or "Refine by"; should you display number of available items in brackets next to each item; what happens when there are no items in a filter category (grey out or just not show); words versus colour swatches; how to handle pricing ranges (links versus sliders) Etc...

about 1 year ago

David Moth

David Moth, Editor & Head of Social at Econsultancy

@Chris, thanks for your comment, some really useful points for us to follow up on. We'll be publishing a Best Practice Guide for our subscribers that looks at all the different elements of product page design, so this gives us some great food for thought on things to include.

about 1 year ago

Greg Randall

Greg Randall, Director at Econsultancy Guest Access TRAININGSmall Business Multi-user

@Chris….Thanks for the great feedback. In the article I do cover many of the points you raise, but your feedback suggests I was not clear enough so I would like to respond to each of the points you raise to help clarify for other readers.

Checkbox multiselect vs text link. In my article I mention the importance of creating obvious “finger targets” to simplify selection and reduce physical effort. This suggests a checkbox type of design element is preferred. The other benefit to the checkbox is simplifying the multiple selection of filters within the same filter type.

How to best show feedback. In essence if the database logic and hosting infrastructure is working to a high standard, there is no need to present elements to show filters are updating. However, if it’s needed there is no best practice application. Any visual cue showing an update is in progress is fine.

Should the whole page update or just product area. In my article I discuss the importance of validation, this is the site visually acknowledging a consumer’s filter selection in an obvious manner. To do this well requires multiple page elements to change as seen in the Newegg example above. Examples: the product selection, the filter presentation in the left hand column, and the visual validation at the top of the page. It’s not as simple as merely the whole page updating.

Should filters display with remove links. When I introduce the “Truncating Filter” approach, point three talks about the importance of simplifying filter de-selection. I repeat this point when discussing the Newegg example.

Vertical left hand side versus horizontal or collapsed filters. The studies of NN Group continue to prove vertical position is the ideal filter placement. I am unsure of what you mean by “collapsed” but the best approach discussed above is the truncated filter presentation.

“Filter by” vs “Refine by”. If the filter presentation is to a high standard, consumers will understand this page element is a method to reduce the product selection based on their own preferences. This takes the reliance off of getting “Filter by” vs “Refine by” right. To be truly intuitive, the title needs to explain to the consumer the benefit in engaging with this page element. For example, “Reduce the product selection based on your preferences”. It may be wordy but it’s obvious!

Displaying numbers. The purpose of filters is to present an intuitive presentation of options for consumers to reduce the selection of products based on their own needs, preferences, or wants. The volume of products within a filter set should not be an influencer when a consumer has buying intent. If a woman is interested in a black dress, whether there are 5 or 55 black dresses is not going to change her decision. The presentation of numbers can be problematic in the sense that as soon as a filter is selected, all numbers in the remaining filters must change. For example if a consumer selects a black dress, this influences the number of dresses in the price range filter, or the “material” filter, or the “occasion” filter. This has the potential to deliver confusion.

What do to when there are no products in a filter? From the consumer perspective, there is nothing more frustrating than seeing something they can’t have. If the filter is greyed out, and the consumer is interested in that filter type, he/she will click on it. The lack of response will cause frustration. In physical retail, there is never a presentation of colours consumers cannot have. The same applies online.

Price Ranges – Slider vs Links. This comes back to comments made above about the importance of clear finger targets and reducing physical effort. The slider has similar issues to the scroll bar in that it is difficult to physically maneuver.

Thanks again!!

about 1 year ago

Chris Gibbins

Chris Gibbins, Director of User Experience & Optimisation at BiglightSmall Business Multi-user

Wow thanks Greg for responding so thoroughly to those points with some great additional points and extra clarity.
The reason this is so front of mind for me right now is because we're heavily involved in optimising filtering for 2 retailers at the moment and are A/B testing several variations around some of themes you've discussed here. And from the results we've seen so far I can definitely recommend focussing your UX/CRO efforts in this area as there are significant gains that can be made. And maybe it's obvious but one thing worth noting is that in our experience one filter change which has worked for one of our clients hasn't always worked for the others and that's why it's so important to take inspiration from best practice and then experiment through A/B testing. Results will vary depending on your particular types of products and target customers.
Very much looking forward to the next Econsultancy article covering filters on mobile.

about 1 year ago

Greg Randall

Greg Randall, Director at Econsultancy Guest Access TRAININGSmall Business Multi-user

@Chris, it's my pleasure. One of the reasons why I write is in the hopes of receiving feedback like what you have provided. Really appreciate the time you have taken. Keep up the great work and thanks again!!

about 1 year ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.