What Are eCommerce Search Filters?

Filters are essential tools for refining large amounts of information effectively by providing certain criteria and narrowing down the results by excluding the items that do not match the set criteria. eCommerce filters follow this exact logic, many times adding real-time results, and other convenient features to make filtering easier.

As Nielsen rightly states, filters and faceted search are often used as interchangeable concepts today, however, this is, in fact, not the reality.

Now, what is faceted search? While still quick and easy to use, it is a more complex process that uses a multitude of site search filters that can be automatically generated by the algorithm reading the different attributes present in the database.

For example, if in an online store you type “black shoes” in the search box, you will likely get results containing either or both of those words. But if you want to narrow your search, you have to type in additional phrases and browse by relevance.

A good example for this is Zappos: if you put in the initial phrase, you will then be able to filter further by Women’s Size, Women’s Width, Men’s Size, Men’s Width, Kids’ Sizes, Width, Heel Height, and so on.

Why Use Product Filters?

Online shopping problems are in many cases caused by the customer’s inability to find what they are looking for in a quick and easy fashion.

There may be a lot of reasons for this, from a slowly loading site to horrendous design choices, but in a great number of cases, it can be distilled down to problems with the site search function and especially the use of filters – or the lack thereof.

But let’s dig in a bit deeper and talk about some of the exact benefits of using filters.

• Providing too many choices can confuse and overwhelm your customers. They can easily fall victim to the paradox of choice and leave your site without making a purchase, even if you have what they want.
• Filters narrow down the choices while still offering comparisons.
• Filtering also makes finding the ideal products much quicker than scrolling through endless category pages, and thus, also improve user experience.

According to the Baymard Institute, which conducted a thorough analysis of many of the largest online stores:

Analyzing [71 Major eCommerce Sites] we’ve found the average site to perform mediocre at best, and 36% of sites to have such severe design and feature flaws that it was downright harmful to their users’ ability to find and select products.

In fact, according to Smashing Magazine, as many as:

• 42% of top e-commerce websites lack category-specific filter types,
• 20% of top e-commerce websites lack thematic filters,
• 32% of websites either have insufficient truncation design

and the list could be even longer. In fact, Baymard concluded that only 16% of the analyzed sites provided a good filtering experience.

In short: this is an area where you can easily compete with the largest online retailers in the world, and win.

Learn more about the most important eCommerce search engine features to increase conversion rate by 15% & revenue by 47%.

E-Commerce Product Filter Design Strategies

First, let us look at a few basics about how you should present your filters to ensure the best user experience.

The most important things to think about are:

1. The best location for your filters

When thinking about the placement of your filters, you basically have two options: a horizontal filter bar on top of the page, or a vertical filter bar on the left side of the screen.

There are pros of each option.

• A horizontal filter bar will be more effective in focusing the attention of the shopper and in many cases will be more convenient to use.
• A vertical sidebar on the left is where users are used to finding filters, so it offers a familiar experience, and it can also contain a much larger number of filtering options.

Amazon is one of the best-known examples for the vertical filter bar, offering even dozens of options depending on the products.

Victoria’s Secrets uses both: when you enter a search term, you are given a sidebar for faceted filtering, however, on category pages they opt for the simple horizontal bar, given there are fewer options inside a certain category:

Learn more about the tpyical beauty industry challanges in eCommerce and important search features to increase conversion rate & revenue by 6%

2. Horizontal Search Bar: Design and Customer Experience

In addition to the two solutions above, Algolia has tIf you opt for a horizontal search bar, you have to pay very close attention to how you design it to keep the customer experience excellent.

• You will have limited space, so you might want to hide some of the filtering options – you can read about how to do it in the next few paragraphs.
• Make sure the drop-down menus don’t automatically disappear when the cursor is not hovering over them.
• Use icons to help shoppers quickly understand the options and to streamline navigation.

IKEA opts for a hybrid solution: on category pages, they present the most important filters horizontally, while also providing an option to open a vertical filter bar on the right for additional options.

And their main bar is also simplified, you can only see the first 4-5 options right away, so the drop-down menu doesn’t cover your entire screen.

3. Present your filters wisely

If you have a large number of filtering options, you have to make some compromises when presenting them to your shoppers. Shoppers have to be able to access all options while focusing mainly on the most popular and most frequently used ones.

There are a few ways to present the filters:

• You can offer all filtering options at once, which can be a bit overwhelming if there are a lot of them.
• You can add scrolling to the individual categories. Moving the mouse in and out of the different boxes where you want to scroll however can be a bit inconvenient and can cause accidental scrolling on the page itself.
• You can opt for showing only the filter categories or headers as drop-down options.
• You can use truncated filters, where you present some of the options – preferably the most popular ones – and provide a “show more” option.

The main goal is to restrict the length of the sidebar in order to present as many of the filter categories as possible while also hiding some of the specific options.

Pay attention to UX: if you decide to hide options behind a scroll, a drop-down menu, or a “show more” link, make sure that it is clear to the user how they can access the additional options. For example, you can use different colors for links and arrows.

4. Make sure applied filters are obvious

It is always important that the users understand exactly where they are in any process. This is also true for filtering, so the applied filters should always be obvious.

Shoppers should understand exactly which filters are applied and why they are viewing the given set of results. They should be able to easily make changes to the filtering options if they are not satisfied with the results.

You can make applied filters obvious in multiple ways, for example:

• With checked or filled checkboxes.
• Displaying cancellable tags.
• Providing a back arrow for selected subcategories to go back one level.
• Displaying the currently applied filters in a horizontal bar above the results.

The main goal is to make it easy for your shoppers to navigate amongst the applied (and non-applied) filters.

5. Your filtering decisions are SEO decisions, too

Apart from the user experience, you also have to take into account how different approaches to filtering affect your organic traffic.

For starters: filtering, and specially faceted filtering, are great tools, but they don’t in any way replace the need for category and subcategory pages.

This mainly has to do with your URLs – which are not primary ranking factors normally but bear weight in eCommerce. Here is how it works: you can’t put in-depth written content on category or product pages, your product descriptions can only be so detailed before they become counterproductive.

So what you do is create a category page. For example, if you want to rank for “leather jeans”, you will have a category page in your store with the URL

random.com/leather_jeans.

This is more likely to rank with all the products listed on it.

But this is only the smaller part.

Every time someone enters a phrase, a new result page will be generated for the results, with the URL something along the lines of

random.com/search/products/?q=leather%20jeans
or
random.com/s?k=leather+jeans

and so on. And then the filters get added to that.

The first problem is duplication: now you have dozens, hundreds, or thousands of URLs with the same phrase. This can be mitigated by telling the developers to add canonical tags to the category pages for the phrases you want to rank for.

To avoid this problem,  it makes sense to have you developers indicate in the robots.txt that Google should ignore all search-related URLs.

Basically, you don’t want the majority of your crawled URLs to look like this:

Ecommerce Product Filter Types

Based on the type of products you are selling, there can be a myriad of attributes that your shoppers can filter for.

The most common ones used across eCommerce sites are:

• Brand
• Price (or price range)
• User ratings
• Color
• Material
• Size
• Theme (e.g. occasion)
• Popularity

Also, you can include filters for ongoing promotions.

Keep in mind that it also matters how you visualize these filtering options and how useable they are. To give you a good idea of the basic requirements for a good filtering experience, let’s talk about…

Product Filtering Implementations

6. Use category-specific filters

There are general eCommerce filters that can apply to a larger range of products, and which are very handy on category pages. They can narrow down the results without the need to specifically search for something. For example, in a store selling clothes, there will be a set of site search filters that can be generally applied to most products like gender, size, color, or price range.

These category-specific eCommerce filters should be treated uniquely. You should bring your shoppers’ attention to them to encourage filtering and thus provide a better customer experience.

So how can you do that?

7. Use horizontally displayed promoted filters

As we have seen in IKEA, they use a hybrid solution of horizontal and vertical filter bars, which makes sense because there is a great difference between eCommerce filter types even if they seem similar…

You may call these “promoted filters”, which encourage shoppers to select one or more to get to their desired products faster.

But as with all horizontally displayed filters, they have to be curated carefully, because again, you have very limited space to present them.

9. Use real-time interactive filtering

As a general rule, every process in your store should be as short and quick as possible. Not because you want to rush your customers to the check-out page, but because they should feel that the shopping process is easy and streamlined.

This also applies to search and filtering. Most stores use batch filtering, which means the user has to choose the desired filters then take an action – click on a button, usually – for the results to be displayed.

This is especially handy if you have a great number of filtering options, as clicking a button every time the shopper wants to narrow down a search can get old quickly.

Batch filtering on the other hand can also have its own advantages, mainly if your site has issues with speed. This is of course an entirely different problem, but if you absolutely have to cut some corners, using batch filtering can help.

10. Allow your customer to apply multiple filter values

While shopping, people often want to see a wide range of options that cannot be described by one filter.

Let’s say they want to buy a book written by Isaac Asimov. Now, Asimov published almost 500 books in his lifetime, and on wildly different topics. He authored science-fiction and fantasy books, textbooks, mystery, thriller and horror books, and even cooking books.

They might be interested primarily in his fiction, but that means the customer has to look at a number of different genres because this includes sci-fi, fantasy, horror, and so on.

This can be complicated and frustrating for shoppers.

So, always make it possible for people to select multiple values of a filter, and display all the results that match those values. If they want to narrow down their search, they can always discard some of the selected options.

11. Offer thematic filtering options

For many products, plain attributes are not enough to filter results.

For example, if I am shopping for shoes, I already know what size I want to filter for, I also know what colors I like, if I want it to be waterproof, and so on. But mainly I want to filter by activity.

I might need it for running, hiking, for everyday commuting or for a certain social occasion. There might not be a separate category for all of these, but as a shop owner, you can take the products in a category and assign thematic filters to them.

This will help your customers locate the specific type of product they want and improve their experience on your site.

Macy’s for example offers an entire filter where you can select the exact occasion you need the dress for:

12. Make filter changes separate browser history events

If a customer narrows their search too much and wants to get back to the previous set of results, they may just discard the filter value they applied last. But many of them will do something else: hit the back button of the browser.

This is because when the displayed results change in front of their eyes, they tend to look at this as a new page – even if there was no apparent page reload.

And if they hit the back button, that can lead to an unpleasant experience if they are taken out of their search, and taken back to a category page for example.

13. Display the applied filters separately

Make sure that your customers can always see which filters have they already applied – this makes it easier for them to navigate the results, discard filters, or apply more to further narrow down the results.

If you don’t display the applied filters separately, shoppers may misinterpret what they are seeing – especially if there are many filtering options as they might not remember what they already applied.

This way you can make it clear to shoppers what criteria affect the results they are seeing and provide convenient options to change them.

For example, eBay displays the selected filtering options right above the results, where you can deselect them with a single click:

Key Takeaways

Using filters that are optimized not just for your products, but for the behavior of your customers will increase your profits. It’s that simple.

Exits and cart abandonments will decrease, while average order value and overall conversion rate will increase.

This is because you make it quicker and easier for shoppers to find exactly what they are looking for, providing them with a great experience.

In order to do that, you must pay attention to the best practices and design your filtering solution in a way that can actually help.

If you do that, you can successfully outperform some of the largest brands and online retailers in the world.