Your eCommerce product filters are one of the most essential elements impacting your customers’ user experience and your website performance. Accurate, comprehensive, and well-organized product filters are an invaluable tool for shoppers who are exploring and searching for products on your site.
For brands and retailers with thousands of SKUs, optimizing your eCommerce product filters increases customer engagement, enables seamless product discovery, and drives sales. Shoppers who engage with filters are more likely to find the exact item they want, and consequently, to convert.
Given how much of a difference product filters make, it’s surprising (and a shame) that only 16% of major eCommerce sites provide customers with a good filtering experience, according to data from the Baymard Institute, which routinely conducts some of the most comprehensive, longitudinal studies on eCommerce sites’ usability.
An effective filtering system enables shoppers to connect with the most relevant items. It allows users to narrow down an overwhelming product selection to only those that reflect their unique needs and preferences. But what exactly makes for effective product filters?
Where should you place them? What are the non-negotiables? Which filters do you include and how do you arrange them?
Here are key UX best practices for eCommerce product filters that you should consider, implement, and maintain to achieve a superior online shopping experience:
1. Include Category-Specific Product Filters
In addition to site-wide filters such as brand, price, and ratings, each category requires a different set of filters specific to the type of product it contains. Grouping products by these category-specific criteria helps in both the design and functionality of the filtering system.
For a category like shoes, Nike shoppers are interested in the ability to filter by “activity,” “technology,” “closure type,” and more. The athleticwear giant makes this easy with a list of detailed filtration options, wherein shoppers can find the criteria they care about easily and select the relevant checkboxes.
Depending on the brand, category-specific filters can also address important product attributes that are difficult to discern from looking at a photo. For example, shoppers on Patagonia‘s site can filter climbing jackets according to two main types, but then they can further filter for “materials & processes,” a relevant option for shoppers who choose Patagonia for its brand values.
2. Speak Your Customers’ Language When You Refine Filters
eCommerce product filters are designed to make your site’s inventory easy to navigate and help shoppers find what they’re looking for. Consider your products and filtering system from the viewpoint of your customers, and use the exact words your shoppers use to find and describe products. Review search queries to gain deep insight into how your shoppers speak and avoid industry jargon that they are not familiar with.
You can also add text and imagery to better connect with your shoppers. For example, as shoppers go further from a general category to a specific product type, Kohl’s provides not only easy-to-understand filters but also engaging photos and copy that give more context to the filters.
3. Assign Thematic Filters to High-Level Groups of Product Attributes
The Baymard Institute’s research further found that 20% of top eCommerce sites lack thematic filters. This is a huge missed opportunity when you consider that almost all brands and retailers sell products with obvious thematic attributes, like season and style.
In addition to this, we know that many shoppers don’t start off with a specific product in mind, rather a general idea of what to buy, like “dress for wedding” or “gift for dad.”
When optimizing product filters, look for higher-level groups of product tags or attributes that make it easy for users to explore related items. Done well, thematic filters also enhance product value and promote brand storytelling.
Jewelry brand Ernest Jones understands that its customers often shop by major life occasions, so it enables shoppers to filter by “anniversary,” “birthday,” “graduation,” and more.
4. Never Show Zero Results
This is one of the basic eCommerce UX non-negotiables, and yet, shoppers often encounter zero results when searching and filtering. Receiving an error or null results after selecting filters is a frustrating experience. You won’t always have the perfect item in stock, so make sure that you exclude or gray out options that lead to zero results. Another option is to have a special landing page if shoppers end up with “nothing found.” Here, you can recommend related products or relevant items based on their real-time browsing behavior.
5. Show the Right Number of Filters to Avoid Shopper Overwhelm
Deciding on which filters to show and hide depends on your product offering, overall UX design, and the specific product category. Too many options, and you risk overwhelming customers. Too few, and you risk creating a rocky experience that prevents shoppers from finding what they’re looking for.
For the most part, eCommerce sites implement filters using one of three layouts: an inline scrollable filter menu, a long list of all available filters, or truncation after a certain number of visible filters. Research has found that the first performed the worst and the last one the best — but only if it was implemented with a flawless user interface.
If you plan to truncate filters, do so when you have 10+ product tags listed in a given section. To ensure shoppers notice the hidden filters, include a clear CTA, like SHEIN‘s “+View More.” Make sure that the visible filters are the most important ones for your users.
6. Promote Important Filters
Promoted filters help shoppers narrow down results before getting into the details, making the search quicker and easier. You can place them at the top of the page, rather than simply at the top of your list of filters to better grab attention and help direct shoppers according to the characteristics they care about most.
In this example, Overstock helps shoppers further zero in on the exact product type they’re keen on exploring with image-based promoted filters for different types of organizers.
7. Choose the Right Filter Placement for Your Audience
A Nielsen and Norman Group eye-tracking study found that 69% of consumers spend most of their time looking at the left half of the page. This makes a case for the traditional sidebar placement of the filters. However, another study revealed that a horizontal toolbar can lessen a known issue that arises when you place filters on the left side of the screen: Shoppers may overlook it and think that the sorting options at the top of the page (usually for price and star rating) are the only filters available.
While the horizontal top toolbar can outperform the traditional sidebar when it comes to usage as it unifies filtering and sorting tools, its main limitation is space. So, for brands with an extensive list of filters, it’s best to consider how to maximize that real estate and if horizontal placement is the right option at all.
Boohoo has a horizontal toolbar that combines filtering with the sorting tool. The retailer also ensures that shoppers notice the filters with large drop-down arrows, in which they can include multiple options that wouldn’t otherwise fit.
Rebecca Minkoff, on the other hand, combines a horizontal toolbar and sidebar, to gain the benefits of both layout types.
8. Provide Compound Filters & Keep Selections Visible
It’s most often a combination of factors and product attributes that influence a buying decision, making it critical for consumers to select multiple tags within and across filter types. Clearly displaying which filters are selected at any given time keeps users aware of the criteria they set for the products they’re currently viewing. It also provides them with easy access to deselect or edit applied filters as needed.
The applied filters on Cabela’s are prominently located on top of the filtering system. With just one click, shoppers can also remove a selected attribute.
9. Live-Update Products as Shoppers Filter
The renewal of the product selection based on filters can happen per batch or live. A batch update occurs when shoppers hit “apply” after selecting all of the relevant filters. On the other hand, a live update, or interactive filtering, shows consumers instant visual confirmation every time they select a product tag. It’s also more seamless, without a page reload. The catch with live-updating products is that it must be fast enough to ensure a smooth user experience.
Another smart practice is displaying the number of items remaining after each update to keep shoppers aware of the status of their search. This way, they know the impact of each filter on their current product selection.
10. Experiment With Visual Filters
Similar to promoted filters, visual filters enable shoppers to take a first step into narrowing down their product selection with minimal effort. By using a combination of image and text, you can provide additional context for product types while grabbing shopper attention.
To help shoppers visualize products, Bonobos includes a visual guide for their “fit” filter.
Coleman Furniture has a “product finder” that includes a short image-based questionnaire to further narrow down the list of items to view.
Enable Smarter, Friction-Free Product Discovery
The ultimate goal of eCommerce product filters is to help shoppers navigate your large inventory more systematically and easily uncover the best products. With a smarter filtering system, they are guaranteed to have a better, simpler, and faster product discovery experience that leads to more positive customer journeys and purchases.
By informing your filters with robust product metadata, you not only provide a more detailed and targeted navigation infrastructure, but you also have the opportunity to learn more about shoppers’ preferences at the granular level. For example, you can better understand which product attributes are trending and need constant replenishment, as well as which products you need to promote more with smart merchandising rules or discounts.
As you optimize you eCommerce product filters, you’ll gain the deep insights to make better business decisions and improve your customer experience in kind.