It's no secret that people love to shop from easy-to-use websites. And it's no surprise that filtering is one of the top three profitable features of an eCommerce site.
On an average, 30 percent of shoppers use filters. And, these folks also convert two to three times more than - people who never use filters. Clear sign that filtering is crucial business.
Unfortunately, only 16 percent of eCommerce brands provide good filtering experiences to shoppers.
In this article, we’ll explore ways you could improve your eCommerce filter UX to make your shoppers’ lives easier :-)
4 reasons why eCommerce Filters matter
- Too many choices overwhelm people, making it easier for shoppers to reduce product options leads to increased conversion.
- Filtering matches product discovery to shoppers’ intent.
- It makes eCommerce website navigation sweet and seamless.
- Filters cut down on the time shoppers spend searching for products, leading to a quicker checkout.
How is Filtering different from Sorting?
People often mix up filtering and sorting. Though both make shoppers’ buying decisions a lot faster, they differ, and here, we demystified them.
Filtering helps shoppers narrow down the number of items displayed in any category into a manageable list. It helps streamline navigation in websites with an overwhelming number of products.
Sorting, on the other hand, helps shoppers rearrange the product range based on selected criteria. Users could sort products based on alphabetical order, brands, price range, or the most recent.
Filtering reduces the number of results based on the filter attributes.
Sorting re-ranks the list without reducing the number of products. It ranks relevant products on top based on the sort attributes.
When a shopper filters by ‘$10 to $15,’ filtering removes products with prices that fall outside the range. But when they sort by that attribute, the website ranks products within the price range top of the result, pushing the rest below.
Other ways they differ include:
- Shoppers can further refine filters by using facets. Facets don’t often work with the sort functionality.
- The sort feature often appears as a drop-down menu above the product grid, while filters typically sit on the left-hand column.
- By default, eCommerce websites don’t filter the product list, but they often apply a default sort option. For example, the eCommerce website sorts the product list by ‘Top Rated’ at default in the screenshot above.
- Filters personalize the list; sorting adds relevance.
eCommerce Product Filtering: 7 Key Lessons From Amazon
We studied Amazon to understand how big eCommerce brands offer product filtering, and we learned seven things. Let’s examine them.
Amazon’s Filter UX is Intuitive
Amazon makes product filtering sweet and pretty straightforward.
The filters offer shoppers a seamless user experience. First-time shoppers also find Amazon filters effortless.
The location of the filters in the left-hand column of the product list makes them prominent and accessible. And Amazon doesn't overload filtering with irrelevant attributes.
Users Can Apply Multiple Filters
About 35 percent of the US eCommerce websites don’t allow shoppers to apply multiple filters.
Sadly, close to half of online shoppers use it. Overlooking this expectation could make shoppers spend an unreasonably amount of time searching for products, which is never good for conversions.
Amazon makes it easy for its shoppers to apply multiple filters, enabling them to narrow down their product search to their specific intent in a few clicks.
A visitor shopping for a used HP laptop with a good customer rating on Amazon could apply multiple filters easily to drill into the right product in a few minutes.
Amazon Allows Shoppers to Filter by Customer Rating
The best-selling products have 4.2 to 4.7 ratings, so Amazon makes it straightforward for shoppers to filter products by customer rating.
About 70 percent of shoppers use rating filters to weed out bad businesses; of course, no customer would want to spend on products with low ratings.
Amazon uses a rating filter to enable shoppers to simplify their searches.
Amazon is All for Relevance
Amazon uses filters and sorting to make product discovery more relevant.
For instance, a shopper looking for a used HP laptop with a good customer rating and a price between $500 and $1,000 could use multiple filters to drill into the products. The shopper could sort by ‘Low to High’ price to refine the product search.
If shoppers intend to purchase a premium product or new arrivals, they could sort the product list to match that intent, making product discovery more relevant.
Amazon Has Thematic Filters
Thematic filters help shoppers see products that match specific themes.
Amazon shoppers can filter dresses based on the occasion—like casuals, nights out, work, and more, or season—like winter, summer.
Shoppers looking for work dresses on Amazon don’t have to dig through the overwhelming product list—they can easily use the thematic filter to hone in on the right product.
About 20 percent of US’ top eCommerce websites lack this attribute.
Amazon Provides Category-Specific Filters
Unlike 42 percent of other top eCommerce brands, Amazon uses category-specific filters and site-wide filters to help shoppers streamline their product searchers.
Category-specific filters are filters that are specific to the product but are not particularly meaningful for other products.
For instance, an operating-system filter could help simplify laptop searches, but it’s utterly useless to have the filter for other product lines like electronics, dresses or furniture.
Amazon supports shoppers to filter by product specifications, enabling them to narrow down product searches to their intent quickly.
Amazon Uses AI to Personalize Filtering Experience
Amazon neatly integrates product recommendations into product filtering, enabling shoppers to make more guided purchasing decisions.
It uses shoppers' browsing history to suggest products to them.
The company places the recommended products after the filter results.
- The placement prevents shoppers from getting distracted from the filter results.
- It makes the product list less overwhelming with too many choices.
- The position makes it easier for shoppers to compare recommended products and filter results.
Shoppers can easily edit their shopping history to make product suggestions more tailored.
Quick fact: Amazon generates 35 percent of its revenue from product recommendations.
Here’s a recap of the seven lessons from Amazon filtering implementations:
- Amazon makes the filter UX less overwhelming and intuitive.
- It helps shoppers narrow down to their specific intent with multiple filters.
- Shoppers can filter by customer rating to weed out bad businesses.
- Amazon uses sorting to make product discovery more relevant.
- The ecommerce website supports thematic filters.
- Users can also filter by product specifications—category-specific filters.
- Amazon uses recommended products to provide personalized help to shoppers.
10 Minor Filter UX Changes That Make a Major Impact on Sales
Implement these small filter UX changes to drive faster checkout and more sales.
1. Cover Your Fundamental Product Categories
Implement product filters on all your product categories.
You could start first with the most essential or basic product categories to provide a more personalized product search experience for the largest segment of your shoppers.
You could implement others later, but the faster, the better.
Digging through your Google Analytics’ All Pages reports could help you uncover the product categories shoppers are visiting the most. You can see the report in the Behavior reporting tab under ‘Site Content.’
Relying on page-level data for this insight could be intimidating, especially if it’s a large eCommerce website. But you could streamline this by setting up content grouping on Google Analytics.
It helps understand how a section of a website performs and allows you to drill down on the important metrics.
2. Build Filters Based On the Product Description
Study your product description to get a few ideas for category-specific filters.
A good rule of thumb is to any product specification that’s important enough to make it to the product description or product title available as filters. Amazon follows this rule to the latter.
You could see this in the screenshot below.
The product titles describe the laptops’ screen display sizes, processor types, RAM, and hard disk sizes, and Amazon has filters for each of them.
Again, use the words customers find easily relatable to describe the filters.
For example, in a clothing business, terms like ‘high waist pants’ or “summer wear” can make for good filters provided you have enough quantities in the store.
Some of the usability issues this principle helps solve include:
- It makes filtering intuitive.
- Using customers’ everyday languages makes the filters relatable.
- Using product description specs as filters help shoppers easily decide on the filters to apply.
3. Break the Disconnect
Make the applied filter view crystal clear.
eCommerce sites often have a filter checkbox UI that makes it evident that a few filters are active.
But this isn’t usually enough to improve filter usability, according to a Baymard analysis.
Shoppers often wondered if the website applied their selected filters, probably because of the positioning of the filtered items.
Baymard proved that having a separate view of applied filters improved visitor navigation and checkout rate. So, display all the applied filters in an overview—sadly, 32 percent of top eCommerce websites don’t, including Amazon.
These little things make a lot of difference.
Baymard stated that the lack of an obvious and immediate confirmation that applied filters are active is a major issue even among major brands.
Some of the usability issues it could cause include:
- Desktop users would’ve to rely on the filtering sidebar to see applied filters, meaning they would’ve to scroll deeply to see other applied filters, unnecessarily wasting their time.
- Lack of applied filters overview makes removing unwanted filters quite tricky.
- It makes finding and removing filters overwhelming for mobile users.
- When shoppers mistakenly apply a filter, which they often do, lack of applied filter overview makes finding this out challenging, narrowing the product scope beyond their intent.
- A glance at the applied filters gives context to the product list.
Pro tip: display applied filters both in their original position and in an overview.
4. Interactive Over Batch Filtering
Use interactive filtering to offer shoppers instant gratification.
Interactive filtering applies the filter in real-time as shoppers select and deselect the filters. Batch filtering only applies the filters when users click the apply button. NewEgg eCommerce store uses batch filtering.
Amazon and most eCommerce brands use interactive filtering, but this could be damaging for a slow-loading website.
Shoppers rarely forgive slow loading websites—a seconds delay in mobile load times can impact mobile conversion by up to 20 percent.
Use interactive filtering on a fast-loading website to make shoppers filtering experiences more seamless. Some of the usability issues it solves include:
- Interactive filtering saves shoppers a lot of time
- It makes filtering quick and engaging
- Null filter results offer a terrible user experience; shoppers could avoid this with interactive filtering.
- Shoppers could easily fine-tune their product searches when they see instantly how the product catalog reacts quickly to their filters.
Pro tip: interactive filtering works great for super-fast websites, while batch filtering is suitable for websites with speed problems. Using it on slow loading website saves users time between requests.
Four seconds load times is a good rule of thumb—use batch filtering when it’s more and interactive filtering when it’s less.
5. Make Changing Filters Super Simple
Shoppers often try different filters when researching products. It could be frustrating if the eCommerce website makes deselecting filters less intuitive or challenging.
Provide a ‘Clear All Filter’ button that allows shoppers to deselect all the applied filters in a click. You could also use a checkbox UI to enable them to uncheck individual filters easily.
A Simple cross mark ‘❌’ next to each applied filter can also help easily take off filter options.
Some of the usability issues this principle solves include:
- Making filter deselection super simple saves shoppers’ time and frustrations.
- Clearing all the applied filters at a go helps users to start all over again quickly.
- Deselecting filters enables shoppers to fine-tune their product searches.
6. Filter by Multiple Criteria
Like explained earlier, multiple filters help shoppers to match product searches to their intent seamlessly. So design the eCommerce store to filter by multiple criteria at once.
Allowing shoppers to filter only one parameter would make them memorize the result options before applying another parameter, which could overwhelm the shoppers, frustrating them to abandon the site.
Some of the filter usability issues this principle helps solve include:
- Multiple filters help tailor product searches to shoppers’ specific needs.
- Using multiple filters at once helps shoppers save time.
- It makes filtering effortless and less overwhelming.
- It makes the product list granular.
7. Make the Filter Options List Short
Having many filter options is beneficial, but ensure it’s not unnecessarily long.
Extended options in the filter column push other filter attributes out of view, meaning shoppers would’ve to scroll a long list to access them, which offers a poor user experience.
Truncate the list when the filter options exceed ten.
Use an expandable accordion or drop-down menu to manage the truncated list.
Amazon fails this usability test—the eCommerce website doesn’t truncate filter lists that exceeded ten options, making some overwhelming.
It makes more sense to neatly hide the brands (HP, Acer and Qotom), operating system (Windows and Chrome OS), processor type (Intel Core i5, i7, i9, Intel Celeron and AMD Ryzen 5) in drop-down menus.
Macy’s neatly solves this kind of issue with drop-down menus.
Macy’s doesn’t display more than ten filter options, ensuring all the options are within view.
Here’s a quick look at some of the usability issues the short filter options list solve:
- It keeps the filters within sight and easily accessible.
- A short filter option list saves time and makes filtering less frustrating.
8. Eliminate Zero Results on Filters
Null search results negatively impact user experience. So, remove filters that return zero results.
No shopper would be happy to visit a website, search for a product, and apply filters to streamline the search, only to get a ‘Result Not Found’ message, and studies show they might not return.
About 88 percent of consumers are less likely to return to a website after a poor user experience.
Here are why eliminating zero filter results matter:
- It prevents shoppers from feeling discontented.
- It helps maintain customer satisfaction.
- It prevents misalignment with customer expectations—shoppers expect filtering to return relevant results.
9. Make Filter Changes Separate Events in Browser History
Shoppers generally think clicking the browser’s back button after applying filters will return them to the previous page. But this is not always true for most eCommerce websites.
Filters are not separate events in browser history, but you could make them one.
Shoppers often rely on the browser back button, and many expect it to revert recent filter changes to the previous filter. Make their product filtering experience frictionless by aligning back button behavior to this expectation.
Some of the reasons the principle matters include:
- Users can quickly clear filters.
- It aligns with shoppers’ expectations.
- Misalignment with this expectation could lead to customer dissatisfaction.
10. Talk Your Customers’ Talk
You are creating the filters for your customer; it’s best to rely on them for help.
Create filters based on your customers’ search terms. Refer to your GA reports and your site search data to decide what terms to use. You could survey a sample of your active customers to learn what they want.
Some of what makes listening to your customers a great idea include:
- Surveys and GA reports help you make a data-driven decision.
- It makes you create filters that are relevant to your customers.
- It eliminates guesswork.
Perfecting Mobile Filter UX By Clearing 2 Popular Debates
More than half of the global eCommerce traffic comes from mobile, meaning more product filtering likely happens on mobile devices. So making it sweet on mobile is a no-brainer.
Let’s explore how.
Fullscreen Or Slide Over Onscreen Filtering?
Fullscreen and slide-over are two popular ways you could approach mobile filtering, but which one is right for you? Let’s quickly examine them.
Full-screen mobile filtering takes up the entire screen to give mobile shoppers a focused experience. Its biggest downside is taking shoppers out of the browsing context.
Kayak uses full-screen mobile filtering.
Slide over onscreen filters appears on the screen of the results, usually from the side of the panel. It lays the filters over the search result to give content to the displayed items.
Amazon uses this mobile filtering approach.
Full-screen and slide-over filtering both makes shoppers’ mobile filtering experiences sweet and intuitive. But when is the best time to use them? Here’s what we found:
- Slide-over filtering is perfect when you have fewer filter options and want to retain context.
- Use full-screen filtering when your site has multiple filter options and wants the customer to have full focus.
Whichever you pick, ensure that the filter design suits different click patterns and finger sizes. This article could help you quickly optimize your mobile eCommerce website for more conversions.
Horizontal Toolbar Vs. Vertical Sidebar or Slide-in Bar
Vertical sidebar or slide-in bar has been the traditional placement for filters, but today, the horizontal toolbar is becoming increasingly popular.
Let’s quickly examine how the two filtering UI compare:
- A Baymard analysis found that shoppers often ignore or miss the sidebar filters and sometimes mix up the sorting and filtering tools. This usability issue also applies to the desktop, but it’s less damaging because of its larger view.
- The central position of the horizontal toolbar grabs visitors’ attention without taking screen space.
- Horizontal filters take up smaller screen space, making them come in handy for industries with naturally fewer filters, like apparel and home decorations.
- Vertical sidebar filters sit in a column, making the number of filters it could contain endless—hence, finding practical applications in industries with larger filter options or spec-driven products.
Mobile Filter UX Design Best Practices
Implementing these mobile filter UX design best practices will help you stay ahead of the game:
- Show only relevant filters.
- Put your most essential filters within view and hide the less important ones.
- Use drop-down menus to organize the filters neatly.
- Make the filters easy to change.
- Use the proper UI controls to make filtering intuitive (like checkboxes, toggles, sliders).
- Find the filters shoppers use the most and rearrange them accordingly.
- Use sorting to make filter results more tailored.
Now, What Next?
Action the ten eCommerce filter UX changes to follow in the footsteps of the 16 percent of successful global eCommerce brands that provide an exceptional filtering user experience.
Most of your shoppers will likely filter on mobile, so make the experience seamless for them.
- Use A/B tests and surveys to eliminate guesswork, and deliver a filter UX design shoppers find helpful.
- Dive into your competitors’ websites to learn what works for them.
- Use this free website conversion audit tool to uncover what will work specifically for your website.