Filtering Design Best Practices to Improve E-Commerce UX

Every day, people visit online stores and leave them without making a purchase. They are simply unable to find what they need. And this relates to every e-commerce website. There can be multiple reasons for this like the lack of product or contact information, weak CTAs, problems with the checkout process, etc. Yet, very often the main reason is the poor filtering design, driving visitors away instead of delivering profits. Having analyzed the filtering design of about 30 major e-commerce websites, I can now say that even there can be room for improvement.

If a website contains a large number of products (and e-commerce websites almost always do), a filtering system is a must. Filtering is useful for any online store, even without extensive lists of products. Filters are a great chance to present a variety of products, improve the UX, reach a wider audience, and increase sales. Even the simple act of adding filters at all can increase a website’s conversion by 26%. Fixing issues with filters UX design can produce powerful results.

This article focuses on desktop filtering UX. Mobile filter design is a topic that deserves special attention and a separate write-up. One thing is certain: when developing a UX filter design, the rules for desktop and mobile can differ substantially. Also, it’s worth noticing that this article is loosely based on the findings of the Baymard Institute. It’s probably the best place on the net for a designer to get acquainted with the basics of e-commerce filtering design. 

Why e-commerce filters are important

When I was a kid, I remember that most TV remotes were confusing even for adults, let alone kids.

Today, modern TV remotes look different.

What’s your opinion?

Too much of a good can be bad for UX. Hick’s Law illustrates this point. It’s a law of psychology that applies to web and interface design. It states that the more choice options there are, the more time it takes for a person to select one. That is, to increase conversion, it’s necessary to reduce the number of options. In the ideal buyer world, there is a wide choice, but no need to choose. You just get what you need right away. That is why a lot of people would rather pay an expert a pretty penny to be presented with only one, most suitable product or service. The purpose of the website filters is to give a person the opportunity to remove all that is not to the point, so that only what best suits their expectations remains. This means a more personalized experience.

In the words of Nielsen Norman Group,

“Filters analyze a set of objects and eliminate any that do not match the selected criteria”.

If an online store offers hundreds of categories of goods, structuring the catalog alone is not enough. Adding a smart filtering system greatly improves a store’s user experience making it enjoyable and effective. Product filters must be functional. It’s not like they are there to reduce the apparent oversupply as such. They are needed to increase the relevance of the results. This is what a user is after. A small number of proposed options + their relevance = your aim. Filters are also very useful for SEO. If users can easily and quickly navigate your website, Google will notice it and appreciate it and make the website more visible.

So how to make filters that work? Let’s take a closer look at the filter design best practices.

Filtering design best practices

1. The “No filter” state

I am a supporter of the “data first, filters later” principle. It’s easier for a person to first make a choice among several categories and apply filters later than to formulate an abstract query and be overwhelmed with an endless list of filters. Like a visit to a brick-and-mortar store never starts with a study of the price list, but rather with studying a window. When in doubt, a salesperson can help to “clarify the request”. For example, a visitor to an online photography store expects to find cameras, not checkboxes. Give them some special deals for starters and make it clear how to find the major product categories.

2. Choose the best filters location

Baymard has published a large article comparing the different approaches to the arrangement of filters on e-commerce websites. In short, the results of their study show that a horizontal filter bar while not suitable for every website, significantly outperforms the left-sided one in terms of convenience and efficiency. On the one hand, in the case of sidebars, the problem is that they are visually separated from the results and placed on the side panel, where the navigation, banners, and other service elements are often located, so users frequently overlook them. About 80% of online stores use a sidebar for filtering, so most users are used to seeing it there, and such an important part of an e-commerce website as a filtering bar is better to have a predictable location.

However, faceted navigation and filters placed in a sidebar allow users to refine results by applying various selections, leading to a more successful and efficient shopping journey.

As for the horizontal bars, one of their advantages is that they allow a user to keep their attention in one place. A user is not able to do anything else at the same time anyway.
Wayfair is one example:

Victoria’s Secret doesn’t have a lot of filter options to offer, so the horizontal filter bar works well for them:

However, often after checking the results of filtering people tend to slightly adjust the parameters and filter some more. In this case, it’s more convenient when the page displays filters on the sidebar. In addition, the horizontal filter may be less scalable and require an individual layout for different product pages.

3. Choose the best way to present your filters

As for the filters web UI, most e-commerce websites display filters in four main ways:

• All filter options at once.
• Adding the scroll feature into each filter category.
• Showing only the filter headers with a selection option.
• Truncated filters (displaying a subset of the filters and providing a View More or View All hyperlink to represent the rest of the filter options).

The idea is that a filter bar should display only the fields with high relevance. Remove or hide the rest. Then there won’t be a need for lengthy lists.

Things to remember when truncating the filter parameters:

• Do not crop popular product filter options. When choosing what to hide, choose the ones that are less popular among your typical consumers.
• Make sure the “View More” link is clearly visible and easy to use. This may involve adding the various styles, the + and – characters, arrows, or special phrases such as Show / View More.

4. Interactive over batch 

Batch filtering means that the page refreshes and gives results only after you’ve made some selections and clicked the Apply button. Interactive filtering is when the system reacts to your every choice and refreshes the page every time. This was controversial some years back (and maybe sometimes it still is) but I prefer shopping on websites that use interactive filtering. It’s more convenient and requires one less click action. But only when it’s done quickly, of course! I get irritated when I’m made to wait after my every move, so this way of designing filters only applies to websites that don’t have problems with loading speed. This is pure hell when you need to select more than 1-2 parameters and wait even for one second each time. What if I need to make 15 choices? Interactive filtering is very popular among major e-commerce websites, including Amazon or 6pm. 

However, it doesn’t mean that you have to choose interactive filtering. When designing a filter system, the choice between introducing batch or interactive filters depends on the user’s intention (whether they plan to use several selection criteria or only one) and the site speed (how quickly a user gets the search result). Those users who do not have a clear idea of what exactly they want should first understand the structure of the search and what choice options they have. In this case, they will benefit more from interactive filters.

Batch filtering is beneficial if a website has speed problems. It saves a user time between requests. That is, instead of waiting for the result of each request, a user waits only once.
A huge disadvantage of batch filtering is the risk that a user selects a set of criteria leading to a null result. Actually, during my research of the major e-commerce websites from Amazon to Nordstrom and Adidas to Nike, I found very few examples of batch filtering. One of them is Newegg:

5. Allow multiple selections

In order to avoid any errors and misunderstandings on a user’s part, as well as to remind them about the available filters, it’s a good idea to allow making several selections in the same category at once. This may seem like a very simple idea, however, 32% of e-commerce sites do not stick to this principle. Filters limited to one option can adversely affect site usability and customer satisfaction. A good example of an e-commerce site that gives its users the ability to filter by several criteria is Nordstrom:

6. Never say “nothing found”

Continuing with the previous point, this rule is also pretty basic. Luckily for prospective buyers, this error is not so often now as it was in the past. There is nothing more frustrating for a visitor who selects and fills out selection criteria than getting irrelevant or, worse still, null results. If the value “0” is returned by any filtering criterion, it should be excluded from the list of available product characteristics or visualized as inactive in accordance with the design. One example is the Nike website, where all the unexisting options get filtered away over the course of making selections:

7. Clearly show which filters are applied

In addition, it’s also useful to display the filtering options of your product, both vertically on the left side of the screen and horizontally, directly above the search results. In other words, repeat the selected filters at the top of the page.

When working with vertical and horizontal product filters, make sure that they:

• Display applied filters
• Highlight the options that have been selected
• Can be deleted at any time.

Etsy does it:

As well as Zappos:

8. Pay attention to the copy

Apply the rules of UX writing to the filtering design. Patterns of filter design UX include not only the logic behind but the way the filter options are formulated and presented.
There are several basic points:

• Make it predictable.
• Make it free of jargon.
• Make it simple and understandable.

9. Continually improve the user experience

Think of the filtering system on your site as another option for improving the UX site. Treat product filters as solutions for dealing with users’ problems. Good filtering design not only allows customers to find the product that is the best bet for them but also shows them that you know your product inside out. Always be on the lookout for more convenient ways to present your products and how to improve your design of filters.

For example, how about adding some pictures? Yes, right to the filters. Using visual images tips instead of words enhances the filter usability when a person is not acquainted with various types of necklines, for example, like on AliExpress:

10. Utilize AI and Machine Learning

Advanced technologies like AI and machine learning can really boost your sales and help people navigate around your website. For example, filter terms should be accurate and properly indexed in terms of SEO, as this helps users find what they are looking for more effectively. Artificial Intelligence can assist you in optimizing the search engine and personalizing the buying experience for customers, leading to higher conversion rates and improved customer retention.

Moreover, don’t forget to utilize other cool tools like Google Analytics to measure the impact of on-site search, track revenue generated through search queries, and continuously improve the search experience for better site performance.

In conclusion

Filters may seem like a small and insignificant part of a website. But in reality, it’s the filters that provide a seamless shopping experience. Filters and categories are a necessary standard that allows excluding unnecessary items from massive search results. Everything that improves a website’s UX is good for business. Each improvement means an increase in sales. Be ahead of your competitors by giving the best filtering as your user interface special feature, as well as using other useful e-commerce tips and tricks. Well-designed filtering is the fastest way to carry your consumers from the homepage to the product page and thus making it easier for them to make a purchase. And finally, an important point: do not forget that the effectiveness of the filter depends on the relevance of the results, and this is determined by the correct product tagging.

Do you want to create an eye-catching e-commerce website with amazing fileting options? Contact us and let’s build a design that wins your clients’ hearts.