Filters for Websites: A Checklist to Increase Conversion

According to a study, by implementing a product filtering system you can shorten the user journey, increase LTV and increase the conversion rate of your online store by 26%. If you want to know how to configure filters on an online store site with usability in mind, this article is here to help you. Here you will get practical tips, and illustrative examples, and find out what to consider in order to make filters on website both effective and functional.

How to use filters on your website according to usability? How do make filtration effective and functional? Practical tips and real case examples.

What are Filters on Websites and What Are They Good for Your Online Store?

Filters on websites are a tool that simplifies your online store navigation, helps the user find the necessary product, improves behavioral characteristics, and can make your site more visible to search engines. A properly designed and customized filter shortens the user journey, improves the LTV, can increase the average order value, and other project KPIs that affect the profits of your business in general.

Design of your website filters - which one to choose?

Here are two most common approaches to website filter design:

• in the left sidebar;
• horizontally under the website header.  

You can combine these approaches to simplify and speed up search for the necessary product.

If we are talking about a big online store with a wide range of products, there will be many search parameters involved, so it is better to use a side menu. This option works well for online electronics stores, as well as for retailers selling children’s products, fabrics, and so on.

For fashion e-commerce websites it is better to use a top filter menu, as there will be much fewer search parameters involved. Such a menu takes up less space and lets you add more thumbnails to the product list, which plays an important role in decision-making.

Filter parameters should be prioritized in accordance with their popularity: for the side filter from top to bottom, for the horizontal one — from left to right.
If there is a filter by brand, show 5 most popular brands first, and only then display the list in alphabetical order.

Add search by brand — it will speed up and simplify the task for the user, as he/she will not have to scroll the whole list to find the brand he/she needs.

Check-list of website filter design and settings

1. Correct filter performance

It is important that search results correspond to the specified filter parameters. Test the performance of all the parameters to avoid the display of irrelevant items and “Zero Search Results” message on the search results page.

2. Accent on the filters

Make your filters noticeable, so that the user doesn’t have to look for them. For example, on the Zara website one might not immediately see the filter button in the upper right-hand corner.

In the mobile version of your online store also make filters more accentuated and visible to create more chances for the user to use them. In this way you will narrow the product list down to the most relevant items and make the user journey to purchase shorter.

3. Adding new filter parameters

When new parameters are added, the filter results page should not be reloaded, with the previously applied filters for the website staying in place. It is important that the user’s focus remains in the same place, and he/she doesn’t have to search for the necessary parameters again.

There are 2 ways to implement it:

• Ajax content upload — the page content is automatically uploaded from the database, without visible reloading of the entire page. This approach lets the user access the necessary product faster without having to click on pagination links.
• Add a “Show” or “Apply” button to be pressed after a certain filter parameter is selected for an informed decision to apply a filter or a combination of filters on the website.

4. Quick filters panel.

Add a panel with the most popular and frequently used filtering parameters for a specific product category so that the user could quickly go to the filter results he/she needs. Being an additional source of quality targeted traffic, such filtering pages contribute to your online store SEO.

5. Filtering vs sorting.

Don’t mix up product sorting and filtering. These are completely different features. The purpose of filters on websites is to narrow down the product list by a specific parameter, whereas sorting simply changes the order of items on the product list by a certain criterion (price, name, promotion, new to old, etc.). Make a distinction between these tools so as not to confuse your users.

6. Parameters of filters for different categories

Filter parameters and their prioritization should correspond to the product category and vary depending on the selected one.

For example, if a user has entered the “TVs” category on the Amazon website, a list of filter parameters, relevant for choosing a TV, is displayed. When moving to another section, for example, “3D glasses”, the set of parameters will change according to the specific features of this product group. In this way, the website filters are as useful for the customer as they can be, speeding up and simplifying the search and improving the website KPIs.‍

7. Displaying the applied filter parameters.

Show the user which filter parameters have already been applied. Offer an option of resetting all parameters at once or changing individual ones.

Don’t dwell on the standard techniques. For example, the Zlato.ua online jewelry store provided users with the opportunity not only to view and reset the filter settings, but also edit individual parameters without deleting and re-adding them. In this way, we took care of the customer, making the service even more customer-oriented.

8. Thematic filters for websites.

Do not limit yourself to basic filters for websites, you can also add thematic ones. The main thing here is not to overdo it and not make filter names too complicated. Remember, the main task is to facilitate the search for the necessary product and narrow it down, and not confuse the user.

Analyze your visitors’ search queries. For example, if a user wants to buy a microphone, you can add such filters as “iPhone microphones”, “microphones for singing”, “microphones for conferences”, “microphones for video camera”, etc. This will speed up the process of selecting products for your users.

9. Collapse and expand filter options.

If we are talking about a big online retailer with a wide range of products and many different filters on websites, add an option of filter collapsing and expanding. Thus, your filters will not look endless and frightening.
Even though there are many nuances to consider when designing and adjusting your product filtering, if everything is done properly, filters can make your service more customer-oriented and increase the conversion rate of your online store.

So, there are many nuances to consider when designing and configuring product filters. However, if you do everything correctly, filters on websites can make the service more client-oriented and, thus, increase the conversion rate of an online store by 26%.

‍