Connor BrookeOnly a few visitors will arrive at an ecommerce site knowing exactly what to look for. That’s why aside from a smart onsite search, you need to implement an advanced product filter system to help them look for products on your site.
And yet, only 16% of major ecommerce sites offer a reasonably good filtering experience. When product filters are implemented well, customers will be able to look at the different products you offer and specify it to the few ones that match their needs and preferences.
Product filters are, no doubt, central to your customers’ ability to browse through your product lists.
You might be missing a lot of opportunities without these 9 product filter best practices worth implementing on your site for improved customer experience.
Provide product filters according to category
Despite it being critical to a customer’s product finding abilities, it is interesting that 42% of major ecommerce sites do not have category-specific filtering types for some of their product verticals.
Category filter is a filtering option that is only available in one or a few select product categories. Unlike site-wide filters, such as ‘Price’, ‘Best Selling’ or ‘User Ratings’, category filters only make sense for the products contained in a particular product category.
Number of megapixels, digital or manual manipulation, and lens amount are category filters that apply specifically for a product category for cameras and definitely not for sleeping bags.
Category filters are helpful for customers who come to your site unclear what their preferences are for a product they are interested in or lack familiarity about a product they are looking at.
For instance, Staples lists printing speed of its printers as a product attribute, but printing speed is nowhere to be seen as category filter.
A good rule of thumb is to put in as many specific product attributes as possible as an available ecommerce category filter. Doing so is a good way of reminding or teaching your customers that these product attributes are important in their selection process. After all, the very display of the product attribute means it is encouraged to be used as a filter.
A good illustration of proper use of category filters is Macy’s. Look up ‘bed sheets’ on its search bar and you will see helpful and specific product attributes, such as bed size, sheet type, fabric, and even thread count.
Allow product filtering based on themes
Thematic filtering is similar to stepping inside a retail store with a sales representative assisting customers for common requests, such as apparel that best fits a casual occasion or sneakers perfect for extreme outdoor activities.
A similar experience on all ecommerce sites would be fantastic, but 20% of top ecommerce sites still lack thematic filtering.
Shopping according to thematic attributes is a common and central aspect of any purchasing decision. Without product filters that can put an item into a particular context, it will definitely take a while for customers to see only the ones they are interested in.
And if they fail to find what they are looking for, customers can abandon a site, prematurely concluding that it will be impossible for them to find the few products relevant to them hidden among piles of product lists.
Unique as they may, but you have probably come across thematic filtering, such as casual, evening, and modern filters for dress styles, spring and winter filters for jackets, and cheapest and high-end filters for purchase parameter.
Check out Zappos’ use of thematic themes for its Men Hoodies & Sweatshirts product category. It gives its products context according to occasion, top styles, and theme.
Enable multiple filter values of the same type
When it comes to effective product filtering, filter values should not be mutually exclusive, meaning customers must be able to apply as many filtering values as possible within the same filter type and yield refined and more relevant results. However, 32% of ecommerce sites do not have this type of filtering logic implemented.
When filtering values are implemented incorrectly as mutually exclusive, customers will be forced to apply filter value 1, look through that filtered list, remember options that are interesting to them, de-select filter value 1, wait for the unfiltered list to load, and then apply filter value 2.
The process is lengthy as it is, but do take note that this is only for two filter values. A longer process is expected if a customer wants to apply two or more filter values.
When this lengthy process ensues, customers would not be able to establish an overview of the products that meet their unique needs, leading to site abandonment and customer dissatisfaction.
In this example, Amazon allows customers to apply two filter values within the same filter type at the same time, which in this case are two ranges of thermos capacity.
Refresh the search results quickly
Loading speed is critical in ecommerce sites, and search results with applied product filters are definitely not an exception to this rule.
When a customer applies or removes a filter, ensure that the page will easily cope and refresh quickly. It is important to remember this – every one second delay in page load can cause loss in conversions of up to 7%.
To ensure that the search result page refreshes quickly, aptly choose your jquery product filter plugins. There are also advanced ajax product filter plugins you can apply for your ecommerce site that allows you to add unlimited filters with just one widget.
Display applied product filters in 2 ways
Displaying applied product filters in its original position and in an overview or summary lowers user errors and misinterpretations, yet 42% of ecommerce sites do not display applied product filters on both areas.
It is important for customers to know and be reminded of the product filters they applied while searching for products on your site. This helps eliminate the risk of misinterpreting your site and your product lists.
To make your ‘applied filters design’ is truly effective; make sure customers will readily see any current product filters they recently applied. Always let them know which criteria their chosen product filter belongs to and allow them to remove previously applied filters by allowing them to click on the X mark or letting them uncheck boxes.
While the above example from New Egg is great, Nordstrom’s approach is worth mentioning also. It has a horizontal filtering bar that works both ways because displaying the filters in its original position functions as an overview at the same time.
Truncate product filter values of more than ten
A practical way to ensure good site usability for your customers is to truncate or shorten filtering options on the tenth option. This saves customers from losing an overview of all their filtering options and any interaction issues that may arise with the use of inline scrollable areas. But then, 32% of ecommerce sites have an insufficient truncation design.
If you have product filters with 10 or more values, you need to truncate it. Make your truncation design truly effective and useful for your customers following our practical tips below:
Show untruncated filter values according to popularity. The filter values you show should be representative of the particular filtering type it belongs to. Show it according to popularity, and not alphabetically or by the number of matches.
The truncation link should be easy to distinguish and use. There are many ways you can do this. You can use the site’s default link styling (color or underline), spatial indicators, like a (+) or down arrow symbol, or the number of available filter values similar to ‘4 more…’ in the example below.
As mentioned earlier, avoid using inline scrollable areas as it may cause interaction problems, especially if a customer is accessing your site on a mobile device.
Improve user experience
As a complement to your onsite search, treat your product filters as a way to improve your customers’ experience on your site. Buyakilt.com, a kilt retailer, for instance, was not only able to improve its usability, but was also able to increase conversions up to 26% by simply implementing product filters on their site.
Treat product filters as solutions. This not only allows customers to find the product they most need, but it also shows that you know what you are talking about.
Aside from size range, Lands’ End also has a helpful ‘Swim Solutions’ product filter that allows customers to choose which type of solution or enhancement they want to achieve for their swimsuit.
Implement compatibility filters. Especially for product categories that contain compatibility-dependent products, such as accessories, spare parts, and integrated systems, you need to implement compatibility filters to ease the buying experience for your customers.
This should allow your customers to name specific product attributes, such as model name and code, or even generic attributes, such as size and capacity of power. Regardless of a product’s other attributes, if it is not compatible with a product they are buying or already own, they probably won’t push through with purchasing it.
Despite the importance of compatibility filters, it is interesting to note that 32% of ecommerce sites lack this critical feature.
In this example, it is not enough to filter camera bag options by brand; filtering based on model name, model code, and dimensions are way better.
When it is hard for customers to find accessories or spare parts that match their needs or products they already own, this can lead to site abandonment or they could end up with a purchase believed to be compatible, but in fact is not.
Do not display all filter values in one long list. Displaying all filter values prevents customers from getting an overview of all product filters available for them to use. Aside from overwhelming customers with a long filtering sidebar, this also risks other essential product filters to be completely overlooked.
As previously mentioned, truncate product filter values at the tenth value, so the overview won’t be sacrificed. Truncate product filter values according to popularity and make sure that design is distinguishable and easy to use.
Never return “no results”
It is logical for search results to return zero products when filtered down too narrowly, but that means customers may abandon your site because you cannot offer what they want or need. A “no results” page is frustrating for customers and the easiest excuse for them to shop somewhere else.
To avoid a “no results” page, allow your customers to filter on options that you are confident are available. Like Net-A-Porter, customers are only able to filter on four colors of hats that are surely available.
Another way to avoid a “no results” page is to let customers know exactly how many options are there in each product filter. Similar to House of Fraser, follow the product filter value with the number of options available enclosed in a parenthesis.
Review how customers use product filters
You may think well of your site’s product filters, but knowing how it really fares is to review how your customers are using it while they are shopping on your site.
Check your data on Google Analytics for numerical data on how your customers are using your site and highlight popular reviews concerning your product filters. Similarly, a study of your heat maps can give you usability insights as well.
Supplement these data with qualitative answers, which you can gather by conducting a combination of email and on-site surveys.
Conduct email surveys on customers who successfully made a purchase. Ask them for features of your site that helped them arrive at the product they were looking for, and whether your site’s product filters have been integral or not.
Likewise, on-site surveys addressed to people currently on your site will let you know what could be preventing them from becoming customers, and whether an improvement of your product filters can be a solution to it.
A constant review of your customers’ behavior on your site with reference to your product filters is a good way to know what you need to improve on and which ones are doing a fantastic job of keeping your customers engaged.
Conclusion
Ecommerce filters are practical features of your site that not only improves customer experience, but your conversions as well.
To summarize all 9 best practices, keep in mind the following:
- Have category-specific filters
- Allow thematic filtering
- Enable multiple filter values of the same type
- Make search results page refreshes fast
- Display applied product filters as a summary and in its original position
- Truncate at the tenth product filter value
- Improve user experience
- Never return “no results”
- Review how your customers use filter
Aside from staying updated with the best practices on ecommerce product filters, do not forget to do regular A/B tests on your site to see the product filtering design that gives the best shopping experience for your customers.
What about you – is there anything uniquely different that you do on your site’s product filters that your customers find useful?
This article was written for Business 2 Community by Connor Brooke.
Learn how to publish your content on B2C
Join our Telegram channel to stay up to date on breaking news coverage
Add B2C to your Google News Feed
Are there any “in-the-can” software programs that are available with as robust a product filter as Staples All In One Printer example?
Interesting Article ….
…. but it misses the most important “best practice” i.e.
– avoid auto-sort after each filter selection.
Instead provide a “Sort” or “Submit” button to use after 3 or 4 filters have been chosen.
There is nothing more frustrating – and likely to reduce site “dwell time” – than to know that at least 3 filters are required – but one has to wait 3 times for list re-sorting.
Take shirts: I “know”:
i) – my size – so there’s no point in responding with items where my size is unavailable
ii) – that I want short (or long ) sleeves
iii) – that I want blue/black ( or maybe green/brown/khaki ) – but definitely not red or yellow
I may also “know”:
iv) – that I want polo collar (or round neck)
v) – that I want buttons, (or no-buttons) – but not half-buttons
Why should I NOT be able to try all 5 filters first – without having to wait for 5 re-sorts?
Which brings up another point ….
The suggestion that “No results” should be avoided..
I disagree.
In the example above, the last thing I want when using “search” is for the site to assume “or” (between each search term).
Too many sites return dozens of (unwanted) items – because each item has at least one of the several search terms in its description / tag.