It's proven that shoppers convert more when they use filters and find specific products.
However, a study shows only 16% of eCommerce brands provide good filtering experiences to shoppers.
In this article, weâll explore ways online stores can improve product filtering UX make shopping 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.â
16 minor filtering UX changes that make a major impact on sales
Implement these small filtering 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 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.
- Or like The Red Zone (as a case study)
11. Apply 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 seasonsâlike winter, or 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 the USâ top eCommerce websites lack this attribute.
12. 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.
13. Display filters visuallyÂ
While the product listing page loads again, itâs important shoppers need to know that the correct filters have been applied.Â
First, let the filters stand out from the rest of the page. You can achieve this by highlighting it through a headline or a different color for the filtering text. While choosing, make the check box a different color as well. Â
Then, show applied filters in the original location on the left side and an overview right under the webpage header. Â
14. Order filters by importance, not alphabetically
While sorting, stores usually go alphabetically. However, to set up your filtering system, itâs best to display them according to certain criteria.Â
Take a look at what shoppers are searching for in the search bar and the most applied filters. These will help online stores to create a filtering system thatâs more useful for a seamless shopping experience.Â
15. Consider using different filters for mobile and touchscreen devices
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.
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.
Image Credit: Thierry MeierSlide 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.
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
16. Decide on placement on different screen sizes
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.
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.
.svg)
.svg)
.svg)
.svg)
.svg)
