5 Best UI/UX Practices For Your Filter Design

June 17, 2024

•

3 min read

Search and filter is a fundamental online activity for e-shoppers in the fast-growing world of e-Commerce. While search is not enough for e-shoppers to find what they want, product filters give a helping hand to narrow down the results and offer products that most match shoppers' interest. That's why filter design is important.

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 reveals 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 5 best practices for filter design that all eCommerce sites should apply to enhance their UI/UX performance.

Choose appropriate facets or filter options

A one-size-fits-all filter rarely exists in eCommerce sites due to the differences in product. 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 2 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, colors, 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 tree. 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

Learn from top Shopify brands on how they utilize Shopify filter menu and Shopify faceted search.

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, Product Type. You can duplicate one of them to quickly create a customized filter for a specific collection.

We prepare 2 default filter trees so you can quickly create a new one by duplicating the already-made 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, the display collection as well as changing 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.

Enable Multi-select filter with various sorting options

As faceted navigation with dynamic filters are 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 2 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.”

Try Free Now

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 5 sorting options only.

Multi-select vs Single select

Why 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.

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 first try to replace 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 (left) expects ordinary customers to know what it is, REI (right) 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 off using 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 after selecting a certain filter values will look like. (Source: Wayfair)

Display 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 display name of the filter.

Have collapsible filters with a search box

The long list of more than 10 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 the see all the brands (Source: REI)

How to create collapsible filters for Boost users

The Advanced setting also let 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 is to tick the relevant checkbox.

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

You might also like: 25+ Tips to Increase Shopify Conversions

Allow customers to quickly edit the filter

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 quickly review or remove the applied filters.

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, when using this position, the product list can be pushed down.

The applied filters on H&M have a large close (x) button with the heading “Selected Filters” so customers won't mistake them with 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 Byblock 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…

See all the basic settings for Filter with this tutorial video.

Go extra miles 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 insights about your customers. 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.

Try Free Now

Trusted by fast-growing brands

Start your 14-day free trial

Get started

Ellie Ho

•

Content Marketing Specialist

June 17, 2024

•

7 min read

5 Best UI/UX Practices For Your Filter Design

Start your 14-day free trial

Related Posts

Internal Search Engines: A Comprehensive Guide to Enhancing Your eCommerce Website’s Conversions

Conquer the Holiday Rush: How To Use Pre-orders to Supercharge Your Sales

How To Maximize Email Conversion Rates With AI Product Recommendations