6 Best UI/UX practices + 5 Mistakes to avoid for your filter design (with Case studies)

Ellie Ho

June 17, 2024

December 3, 2020

•

7 min read

Optimize the UI/UX of your filter tree

Try Boost AI Search & Discovery

Get started

Search and filter is a fundamental online activity for e-shoppers in the fast-growing world of eCommerce. While search is not enough to find what they want, product filters give a helping hand to narrow down the results and offer products that most match shoppers' interests. According to DigitalCommerce360, visitors who use filters are 52% more likely to convert than those who don't.

Sadly, an alarming finding from a usability test done by Baymard Institute is that “Only 16% of websites provide a good filtering experience, with sufficient filtering types available, a balanced filtering design, and a filtering logic that aligns well with user expectations.”

From our experience of providing search and filtering solutions for Shopify stores, we have compiled a list of 6 best practices for filter design that all eCommerce sites should apply to enhance their UI/UX performance.

1. Choose appropriate facets or filter options

A one-size-fits-all filter rarely exists in eCommerce sites due to the differences in products. It is necessary for retailers, especially those with diverse products, to be able to deliver relevant filtering options for each category and collection.

‍

Sephora provides two different filters for Foundation collection (left) and BB&CC Cream (right), although these two collections are in the same category Makeup > Face (Source: Sephora)

The product aspects should be the very first consideration when it comes to filter design for online business. In general, if a product attribute must be shown in the product listing, it should also be available as a filter, for example: size, color, or variant.

However, there are other equally essential factors to consider when designing eCommerce filtering.

A good understanding of what product aspects are important to customers will be of great help. For example, many e-stores include location as a filter option so online shoppers in urgent need can quickly narrow down nearby items. Rating is also a popular refinement criterion because 88% of customers believe in online reviews as much as personal recommendations.

Lazada Philippines offers Location as a filter to help customers find products available in their region, and the Rating filter allows e-shoppers to filter out low-rating products. (Source: Lazada)

‍

Last but not least, it's always beneficial to examine how your competitors design their filter trees. Standard design patterns create familiarity and relevance so customers don't have to spend time getting used to a new filter design. Some filter options that work for many product types are:

Brand
Material
Color
Average Rating
Price
Size
Availability

Customize collection filters with Boost

It will take a great deal of time and effort to build disparate filters for each collection from scratch. Fortunately, there are some third-party apps to help you with that. Boost Filter & Search is among the most customizable apps for Shopify store owners to build website filters.

Check out our Demo site to see how Boost filter looks like.

After installation, if you go to Filter > Manage filter trees, you will see a default filter tree for All collections and another one for the Search result page. These already-made filters have the most common filter options, such as Vendor, Price, Color, and Product Type. You can duplicate one of them to quickly create a customized filter for a specific collection.

We prepare two default filter trees so you can quickly create a new one by duplicating the already-made one and then edit it.

If you want to start from scratch, have a further read on How to create a Custom filter tree.

For further editing, you click the filter you want to touch up, then you can change the label and the display collection as well as change the filter option.

After clicking on a filter option, you will see a pop-up named Edit filter option where you can deeply modify the filters to follow other best practices for filter design.

2. Enable multi-select filters with various sorting options

As faceted navigation with dynamic filters is mostly used in eCommerce, multi-select filters are a must since it's impossible to find the right product with only one refinement.

Baymard reveals from their usability test sessions that 45% of shoppers attempted to apply multiple filter values of the same filter type. However, one-third of tested sites failed to do this.

The Price filter on Dick’s Sporting Goods is mutually exclusive, which means customers interested in products from $100–$250 (covering two filter values) can’t see all relevant results at once. (Source: Dick’s Sporting Goods)

Don't forget to look into the “AND/OR" logic to make the after-filter results relevant. Different filter options should follow an “AND” logic, while different filtering values of the same option should follow an “OR” logic.

Source: Headphone Zone

Based on the selected filter values, the returned earphones after refinement should match the following criteria:

In one of the categories: New Arrivals OR Top Picks
AND having either features: Best for Calls OR Active Noise Cancellation

Besides multi-select filters, a user-friendly product list should have various sorting options. In the same usability testing, Baymard also discovered that users “often preferred the “soft” boundaries of sorting over the “hard” boundaries of filters.” Filters are a “hard” boundary because if an item doesn’t strictly meet specific criteria, it will be left out. On the other hand, sorting only changes the product sequence and doesn't cut off any product.

A single sorting click can significantly speed up the user’s product exploration and selection process.

While alphabetical sorting order rarely fits in the context of eCommerce, some useful sorting options are:

Arrival/Release Date
Popularity
Rating
Price
% Sale

Also, to avoid lengthy sorting drop-downs that may confuse customers, we recommend you have a maximum of five sorting options only.

Multi-select vs. Single-select

Why do we keep the single select option?

There are some filter options that should have mutually exclusive values, like product availability. Logically, customers will either choose to view either in-stock items or out-of-stock items rather than both of them.

It's also simple to switch from multi-select to single-select or vice versa on Boost app.

On the General tab in the Edit filter option pop-up, there is a setting named Option select to enable multi-select or single-select. By default, Multiple select is chosen.

3. Avoid industry jargon and ambiguous names

Customers often fail to apply correct filters when a website contains jargon-heavy and industry-specific filter names. Even worse, many potential buyers will abandon the site if they don't know how to narrow down the product list to match their needs.

Understandability issues are critical, so site owners should try replacing industry-specific filters with commonly used words.

Season Rating, which indicates the minimum temperatures in which the bag can comfortably be used, is jargon in the topic of sleeping bags. While Sleeping Bags Outlet (up) expects ordinary customers to know what it is, REI (down) helps us out by using a more understandable term, Temperature Rating.

Still, there are many cases when we can’t find the right words to replace the industry jargon. Then, it's better to use a tooltip to give further explanation or provide a visual display.

In addition to the explanation for Pile Height in parentheses, Wayfair also has a visual display so customers can imagine how the products will look after selecting a certain filter value. (Source: Wayfair)

Display a tooltip to explain technical terms

Tooltips are useful if you want to give customers a further explanation about the facet.

To enable a tooltip for a facet, Boost users can switch to the Advanced tab when editing the filter option.

After checking the Display tooltip box, you will see a space to write the description or explanation.

The Advanced setting in the Edit filter option allows you to display tooltip content of less than 120 words. This is the optimal length in order not to damage the customers' viewport.

If you find a similar but more easy-to-comprehend word for the filter name, switch back to the General tab, go to Option label. There, you can change the filter's display name.

4. Have collapsible filters with a search box

The long list of more than ten filtering values can impair user experience because it blocks the view of all other filter options. That's why you need collapsible filters to make the website interface neat and clean. Filters with a hide/show button are usually applied on mobile versions due to the limited screen space.

Furthermore, if you have a facet with so many values, it’s a great idea to include a search box so customers can quickly find the value they want without having to scroll down. Just remember that the values in this filter option must be familiar, or else shoppers won't know what to search for.

The search box in the Category filter on Yummy Bazaar is a lifesaver for customers. Instead of scrolling down over 30 values, they just need to type the values they want. (Source: Yummy Bazaar)

Another thing you should try is to truncate the long list with a “Show All Values" or “View more" button. When implemented appropriately, truncated lists perform better in terms of UI/UX than inline scroll areas.

When using truncation for product filters, you need to consider:

The number of values to display before truncating. 10 is an ideal number, but it also depends on the total number of values.
The styling of the “Show All” button must be outstanding so customers don't mistake it for a clickable filter value.

REI combines a search box with a truncated list in the Brand filter. The brand name is not what all customers expect to remember, so searching may be difficult for them. In that case, they can choose to see all the brands (Source: REI)

How to create collapsible filters for Boost users

The Advanced setting also lets Boost users make a filter option collapse.

A truncated list can be done by simply changing the Show more type to View more or View more with the scroll bar.

If you choose View more with scrollbar, when clicking "View more", the Scrollbar will be applied to the list.

To make the filter collapse or add a search box, all you need to do is tick the relevant checkbox.

If you aren't sure about any setting, there is a tooltip for further explanation right next to it. Also, the app has a preview section to help you visualize the difference of each setting.

Trusted by fast-growing brands

Start your 14-day free trial

Get started

5. Allow customers to edit the filter quickly

Normally, all websites will highlight or add a checkmark to the selected filters. The thing is, in a long filter tree, this practice doesn't give customers an overview of all the applied criteria. They may forget to uncheck the filters before continuing with the new one, which causes disoriented results after refinement. Hence, it’s helpful to let them know which filters are applied and have a button to clear a single filter as well as all filters.

Information about selected filters should be placed on top of the vertical filter tree. This location allows most users to review or remove the applied filters quickly.

A nicely done filter tree with applied filter information on Red Dress (Source: Red Dress)

Another prominent place to display applied filters is right above the product list. However, the product list can be pushed down when using this position.

The applied filters on H&M have a large close (x) button with the heading “Selected Filters” so customers won't mistake them for the filtering toolbar. Also, there are some hidden applied filters, which customers can view after clicking the drop-down icon. This is to make sure the product list below won’t be pushed out of the viewport as more filters are applied. (Source: H&M)

Show applied filters and various sorting options

To display what filters are being selected, you navigate to Filter > Filter settings and check the Show Refine By block box.

‍

Also, in the Filter settings, if you turn to the Product list tab, you will find the Sorting setting. Boost provides various sorting options based on price, create date, product title, relevance…

6. Optimize filter UI for mobile devices

As of 2024, M-commerce is estimated to account for approximately 45% of total eCommerce sales in the U.S. Globally, mobile commerce has grown to dominate, with projections indicating that mobile shopping will represent 62% of global e-commerce revenue by 2027.

Given this, optimizing your filter UI for mobile devices is essential for a positive user experience and maximizing conversions. The limited screen real estate on mobile devices requires careful consideration of several factors:

Responsiveness: Your filter design must adapt seamlessly to various screen sizes and orientations. Avoid fixed-width layouts that force horizontal scrolling or elements that become unreadable on smaller screens. A responsive design ensures a consistent and usable experience across all mobile devices.
Off-canvas layout: An off-canvas layout is highly recommended for mobile. This clever design tucks the filter menu away neatly, revealing it only when the user taps or swipes a clearly visible icon. Off-canvas layouts prevent the filters from overwhelming the main product display, keeping the interface clean and uncluttered.

Off-canvas layout for filters on mobile devices. Visit our demo store to explore more filter designs that Boost AI Search & Discovery offers.

Touchscreen friendliness: All interactive elements—buttons, sliders, checkboxes—must be large enough to be easily tapped with a finger. Avoid small, closely spaced elements that are difficult to select accurately. Ensure smooth and intuitive scrolling behavior.
Easy navigation of the filter icon: The filter icon should be prominently displayed and easily recognizable, ideally in a consistent location across all pages. Users should be able to quickly locate and access the filtering options without searching. Consider using a universally understood icon, such as a funnel or filter symbol.

7. Common mistakes in filter design

Now that we've covered the best practices for a top-notch filtering experience in eCommerce, let's explore some potential pitfalls to avoid so you can keep your customers happy.

We'll look at common traps, frequent oversights, and areas where things can sometimes go wrong, helping you steer clear of these issues and ensure a smooth shopping journey for everyone.

1. Overcomplicating filter options

Too many filter options can be paralyzing. Sincerely, you don’t need hundreds of colors listed in the coloring filter. Keep it simple and focus on the most popular choices using Merge values.

2. Filters not retaining user selections (“Broken filters”)

Imagine selecting filters, navigating away, and returning to find your choices vanished! That's a significant usability failure. Ensure your filters remember user selections throughout their session – it’s a game-changer for a seamless experience.

3. Rigid filters that are hard to modify (“Frozen filters”)

Shoppers shouldn't feel trapped by their filter choices. Provide easy ways to adjust or remove filters without starting from scratch. A prominent “Reset Filters” or “Clear All” button is your best friend here.

The “Clear All” button to remove selected filters is helpful when shoppers want to reset their selection.

4. Filters returning zero results

Nothing's more disheartening than seeing “No results found”, not only in searching but also in the filtering experience. If a filter combination yields zero results, you might want to hide it so customers won’t choose that combination anyway. Another workaround is to offer helpful suggestions or alternative search paths.

By default, Boost will hide filter options where no product is available, but you can choose to show them.

5. Poor filter placement and visibility

Don't make users hunt for your filters! Place them prominently where they're easy to find. On desktop, product filters have two common locations: on top or the left-hand side of the product list. On the other hand, the prominent placement of the filter on mobile is on the right-hand side. Also, avoid burying filters below the fold or in unexpected locations, like at the end of the collection page.

All desktop layouts of Boost’s filters.

All mobile layouts of Boost’s filters.

Case studies: eCommerce websites with excellent filters

Sparkle in Pink

Sparkle In Pink shines with some excellent filter design choices that create a truly delightful user experience.

One standout feature is showing the product count beside each filter option, allowing shoppers to see what's available in each category instantly. Using visual swatches for color filtering helps customers visualize the product's appearance.

They've also nailed it with clear, concise filter labels that perfectly match customer expectations while ensuring a mobile-friendly design with an off-canvas layout.

Özel Beslenme

Özel Beslenme's filter design effectively addresses the challenges of navigating a large online grocery store.

With a huge range of product categories, they've smartly incorporated a search box within the category filter. This lets customers quickly pinpoint the desired category without having to scroll through a long list. Furthermore, this store provides a review rating filter, allowing customers to select products based on customer feedback.

Go the extra mile with filter analytics

The above-mentioned practices aim to increase filter engagement, which is likely to lead to more sales. But with advanced features like the Analytics of Boost Product Filter & Search, you can do a lot of things.

Data about filter clicks, filter combinations, and so on can give you deeper customer insights. You’ll know what criteria they mostly use to narrow down the product list; then, you can continue to improve the filter design by placing those filter options on top.

If you own a Shopify-based store, give Boost a try, and we won't let you down.

Trusted by fast-growing brands

Start your 14-day free trial

Get started

Ellie Ho

•

Content Marketing Specialist

June 17, 2024

•

7 min read

6 Best UI/UX practices + 5 Mistakes to avoid for your filter design (with Case studies)

Try Boost AI Search & Discovery

Start your 14-day free trial

Related Posts

Semantic Search for Shopify: Everything You Need To Know

Everything An eCommerce Store Owner Needs To Know About Dynamic Filtering

[Infographic] Dig Into Search Foundation Of Boost AI Search & Discovery