31 Ecommerce Product Filters With UX Design Best Practices

Effective filtering is the fastest way to get your consumers from the home page to the product detail page. Here's how to get started.

Ecommerce product filters, used incorrectly, can drive visitors away from your site instead of driving more sales. Would you agree that’s a potential problem every ecommerce manager should investigate?

At The Good, we’re often amazed to discover product filters working against the business, not for it. The incredible part is that fixing the problem takes focus and planning, but it’s not all that difficult to do and can produce powerful results.

In fact, when smart filtering is in place, the user experience (UX) is pleasant and helpful. And if you carry more than a few items or product categories, then filtered navigation is essential to helping your visitors narrow their product search.

If you carry more than a few items or product categories, then filtered navigation is essential. Click To Tweet

To get started, we’ll unveil 31 checkpoints you can use to evaluate the effectiveness of your ecommerce product filters. If you’re an ecommerce manager or similar, this topic is essential reading.

Get more of our ecommerce growth and optimization insights by signing up for our weekly emails.

ecommerce product filters apple
Apple’s top-level navigation helps the visitor get quickly to the category of choice. Navigation is often the first type of filtering.

The 31 Checkpoints for Ecommerce Product Filter Design

Whether prospects searching your ecommerce site know exactly what they’re looking for or need some guidance, attention to these checkpoints will help make sure their experience on your site is geared towards helping them buy.

We’ll also provide UX filter examples to illustrate the points given.

ecommerce product filters apple
Apple’s bottom homepage filtering (above) is rather plain and UX unfriendly. Would you say one of the world’s premier tech firms fails with filters?

1. Keep it simple. That’s the number one rule for configuring filters. The easier they are to identify and operate, the better your visitors will like them.

2. Think before you start. Ecommerce filter design work can get complicated in a hurry. Plan yours carefully before you begin. Time invested here can pay off big in the development phase.

3. Test as you develop. A filtering system that makes sense to the design team may not play well in front of a live audience. Test early and test often. The sooner you catch problems, the easier they are to solve.

4. Consider your products from the viewpoint of your customers. What information do they need in order to make a wise purchasing decision? Solicit help from your staff and your audience to prepare an exhaustive list of product attributes.

5. Use the words your customers use to describe your products. Avoid industry jargon and branding terms. Your ecommerce product filters should be absolutely practical and common sense. Don’t make customers struggle to find exactly what they’re looking for.

6. Include in your filter terminology any product specification important enough to use in a product description or product listing.

ecommerce product filters epicurious uses a technique known as “faceted navigation” to let visitors combine filters. Notice (above) this search will return recipes for healthy dinner salads.

Resource: See Filters vs. Facets: Definitions by the Nielsen Norman Group.

7. Look for higher-level groups of attributes you can use for busy product categories. Dresses might be grouped by occasion or season, for example. Thematic filter groups can help the visitor quickly hone in on the desired product.

8. Make filters stand out from the rest of the page. Visitors may not wish to use the filter immediately, but user experience is enhanced just by making the option available.

9. Different products require different filter configurations. Product groups help at both the design and the functional levels.

Enjoying this article?

Subscribe to our newsletter to get more just like it, sent straight to your inbox every week.

10. Make sure the visitor receives visual confirmation that your ecommerce filter navigation is working. For optimum user experience, the current filter state (waiting for input, working, output delivered) should be readily apparent.

11. Test filter placement with your audience. Many companies find the left side of the page best for ecommerce product filters. Others get better results on the right. You won’t know for sure until you test placement on your own ecommerce site. Never stop testing.

ecommerce product filters mastercraft
Note how Mastercraft (see above) has studied their information hierarchy from a UX perspective. Visitors can begin with a search, or they can choose from a top-level category that then drops down and opens up to further selections to get where you want to go quickly.

12. Don’t list all available filters if the options will overwhelm the visitor. Instead, use grouping in the displayed filter list to help shoppers keep moving along the sales path.

13. Consider using different filters for mobile and desktop. Here again, testing will tell you when you are on target.

14. Optimize for filter speed as well as for practicality. Visitors won’t hang around long waiting for results.

15. Leverage data from filters to help you better understand the desires of your customers. Do they favor certain colors over others? Do you see seasonal jumps in certain product attributes?

Leverage data from filters to help you better understand the desires of your customers. Click To Tweet

16. Observe filter usage to help you keep streamlining filter categorization. High-traffic filters may serve visitors better by being moved up to a higher level in the scheme.

ecommerce product filters scottevest
ScotteVest opts for image-based filtering on the homepage. What’s your vote: works great or too much work? Let us know in the comments below.

17. Remember that filters not only help visitors find what they’re looking for, but potentially shows them items they hadn’t thought of before the search. Ecommerce product filters are integral to marketing as well as to sales.

18. Think of filters as tightly-focused, super-helpful search engines that guide visitors deeper into your product catalog. Make a study of the best UX practices for filtering.

19. Jump ahead of the competition by providing exceptional filtering as a user experience (UX) feature. Most ecommerce websites get a failing grade when it comes to the filtering experience.

20. Always use filters on ecommerce sites with large product catalogs, but consider a filter even for stores without extensive product offerings. Anything you do to improve UX is good for your business.

21. Indicate product quantity on the filter by displaying how many products fall under that filter category.

ecommerce product filters patagonia
Patagonia opts for a suggestions slider on the homepage that gets replaced by a drop-down list of categories and items when the Shop button is selected. Just right or too much? Let us know in the comments below.

22. Allow filtering by product reviews. This is a form of social proof and can draw purchases based on the feedback of others alone.

23. Make it as easy for searchers to remove filters as it is to add them.

24. Filter changes should be separate events in browser history. Visitors like to rely on the browser back button and will assume that it will revert to the previous filter.

25. Hide filter options that will return zero results.

26. Allow visitors to apply multiple filter values of the same type. If they want to look at green and blue jackets, let them. Don’t force them to select one or the other.

27. Show applied filters in the original location and in an overview. Make it easy for the user to find all the current ecommerce product filters so they can edit as needed.

28. Don’t allow scrolling in filters, just truncate and provide an expansion option. Including a huge list makes for poor usability. If a user wants to see the complete list, let them expand it with a selector.

29. Truncate filtering values for long lists. For most websites, ten options is optimal.

30. Always run user tests on your filters. This will ensure your filter choices are validated by actual users, prior to launching for all visitors.

31. Order filters by importance, not alphabetically. Here again, choose your filtering plan according to the setup that will be most convenient for your customers.

ecommerce product filters amazon
Amazon includes filtering of search results via the left sidebar. Note the “See All 16 Departments” arrow to limit excessive options and cut down on confusion.

Where are you going to start first?

How did you do? How many of these items can you check off?

If you have a ways to go, don’t worry, you’re in good company. According to a report, only 16% of ecommerce websites are providing a good filtering experience. That means 84% of ecommerce sites have room for filtering improvement.

But remember, you’re not improving these filters for the filters sake. Every one of these improvements means that you’re making it a little easier for your consumers to purchase from you.

In short, the more you work to include these checkpoint items, you’ll not only work your way into that 16% but you’ll also provide a killer user experience for your visitors and most importantly, you’ll drive even more conversions.

So, what filtering checkpoint are you going to apply to your ecommerce site first? Leave a comment to let us know!

David Hoos headshot

About the Author

David Hoos

David Hoos is the former Director of Marketing at The Good, conversion rate experts who deliver more revenues, customers, and leads. David and the team at The Good have made a practice of advising brands on how to see online revenue double through their conversion rate optimization services.