Designing filters and sorting

Filter or facet?

Kathryn Whitenton of NN/g separates two terms in a 2014 text. A filter is any tool that removes from a large set of content whatever doesn’t meet a criterion. Faceted search, on the other hand, offers a separate filter for each property of the content.

In a fashion store, I build these facets from category, price, size and colour.

According to Whitenton, the difference is a matter of degree. Facets are more flexible in very large sets and also show what the set contains. But they are expensive to design and maintain, because you have to keep data for each facet on every old and new product.

Her recommendation I like most: before investing, make sure your users really need facets. In a category with twenty products, a simple filter is often enough.

Types of filters

In product filters I most often see two controls: values from a list, such as category and size, and ranges, such as price. Sometimes a single toggle is added, such as “in stock only”.

For values from a list, the most important rule is to allow several options within a group. According to a 2024 text by Iva Olah (Baymard), 15% of sites in the institute’s e-commerce benchmark don’t allow this. There, users switch options on and off one at a time and have to remember the results.

Olah’s logic is simple: “and” between groups, “or” within a group. Choose Jacket and over $150, and you get products that meet both. Choose S and M, and every product available in either of those sizes is in the list.

Show the options as checkboxes so users understand they can choose several.

Next to the options, write how many products remain with that choice. Katie Sherwin of NN/g says in a 2016 text that these numbers protect against searches with no results. In the example below, the number in brackets next to each option does that.

Live example: a list of twelve products

I built the list below for this page. The filters work with “or” within a group and “and” between groups. After every choice, the result count updates and is announced to the screen reader.

Filter and sort

12 products

Filter

Sort by FeaturedPrice: low to highPrice: high to lowBest sellingNewest

Category

T-shirtSweatshirtJacketPants

Price

under $75$75–150over $150

Size

SMLXL

Show 12 products

• T-shirtBasic cotton T-shirt$34.90Size: S M L XL
• SweatshirtHooded sweatshirt$89.90Size: S M L XL
• JacketLight windbreaker$179.90Size: S M L
• PantsSweatpants$74.90Size: S M L XL
• T-shirtBreathable running shirt$54.90Size: S M L
• SweatshirtHalf-zip fleece$124.90Size: M L
• JacketQuilted jacket$289.90Size: M L XL
• PantsCargo pants$139.90Size: M L XL
• T-shirtLong-sleeve thermal shirt$69.90Size: M L XL
• SweatshirtOversized sweatshirt$109.90Size: S M
• JacketRain jacket$229.90Size: S L
• PantsOutdoor leggings$64.90Size: S M

Because JavaScript is off, the filters don’t work. All twelve products are listed in the featured order.

A fashion list with twelve made-up products. Choose category, price and size; your choice appears at the top as a chip, and each can be removed with one click. Choose Jacket and under $75 together and you see the no-results screen. On phones, the filters sit behind the Filter button.

Notice two things in the example. When you choose Jacket, “under $75” shows (0), so you know the result before you choose. If you choose it anyway, the list empties, and it says how many products come back if you remove which filter.

Show the active filters

Kathryn Reeves (Baymard) recommends in a 2020 text (updated 2026) showing a summary of the active filters above the list. 28% of the sites tested lack such a summary.

Without it, the user isn’t sure whether the filter took effect and doesn’t know why they are seeing these products. To remove a filter, they have to open the panel again and search.

According to Reeves, the problem is bigger on mobile, because the user has to open the filter panel again to see their choices. On desktop too, a choice at the bottom of a long sidebar is easy to overlook. Filters the system applies itself also become visible through the summary.

Each filter in the summary should be removable with a click, with a “Clear all” link next to them. A counter “Filters (3)” alone isn’t enough, because it doesn’t say which three.

Don’t move the chosen option in the panel either. In Reeves’s data, 97% of the sites tested leave the chosen option in its original place.

Result count and zero results

The total number of results should be visible at all times. Whitenton’s 2015 text on mobile faceted search asks for this explicitly: even when the user scrolls through a long filter list, the total stays visible.

The number has to reach screen reader users too. That is what WCAG 2.2 success criterion 4.1.3 Status Messages, level AA, requires. One of the W3C’s examples for this criterion is exactly this: the text “5 results returned” that appears after a search.

I write the result count in an area with role="status". Focus stays where it is, and the screen reader still reads out the number.

Zero results mustn’t be a dead end. Say which filter emptied the list and offer to remove it with one click. The text for this screen is described in the empty state pattern.

Zero results from the search field are a different problem. To catch typos and make suggestions, see the pattern on search and autocomplete.

Apply instantly or with an “Apply” button?

Sherwin distinguishes two approaches. With instant application, the list reloads after every choice. With batch application, the user chooses several filters and the list reloads once at the end.

Which you choose depends on the user’s intent and the website’s speed. According to Sherwin, instant application only feels good when the response comes in under a second.

If the list flickers with every choice, that is distracting. For this case the text recommends dimming the results area and showing a progress indicator.

Sherwin also describes a middle way. You put an “Apply” button there, and if the user makes no new choice for one to two seconds, the filters are applied by themselves. While waiting, a progress indicator is again visible.

Jumping to the top of the list after a filter is applied needs care too. According to Sherwin, the user can lose their bearings. And if they are still choosing, the risk of clicking the wrong category rises.

The filter panel on phones

On phones, filters don’t fit next to the list; they go behind a button. Instead of full-screen filter pages that separate the user from the results, Whitenton recommends a tray that opens from the right.

When the tray is open, part of the results stays visible behind it. The user sees how their choice changes the list.

The same text says that a word like “Filter” on the button is easier to understand than an icon. I add the number of active filters to the button: “Filter (2)”.

Sherwin recommends batch application on mobile, because pages often load slowly on the go. On the button that closes the panel I write the result count: “Show 5 products”. That way the user knows before closing what they will see.

Every checkbox in the panel must be easy to hit with a finger. Make the whole row clickable and don’t pack the rows too tightly. The sizes are described in the touch target pattern.

Sort options and the default

Sorting is a different task from filtering: it removes no product, it only changes the order. Mark Crowley (Baymard) names four essential sort types in a 2021 text: price, user rating, best selling and newest. 64% of the desktop sites tested don’t offer these four together.

According to Crowley, price is the only essential sort that has to go in both directions. Rating and newness can be one-way, because users in the tests almost never looked for the worst-rated product. Very few used alphabetical sorting in the tests either.

Also, don’t put “Sort by” as an option in the drop-down list; it confuses. In Crowley’s data, 30% of sites do this.

The default sort, on the other hand, is the most often overlooked decision. Reeves describes in a 2021 text that users judge a category by its first few products. If the first screen always shows the same kind of product, the user thinks the range is narrow and leaves the category, perhaps even the website.

A default sort by price also leaves a wrong impression of the price range. 24% of desktop sites don’t use the default sort to show the breadth of the assortment.

Reeves recommends taking the best-selling order as the basis and bringing every product type that makes up more than 10% of the list into the first 20 products. On mobile this number drops to about 10.

As a name for this order, Reeves recommends “Relevance” or “Featured”. Don’t use “Popular”, because test users took it for the best-selling sort. I use “Featured”.

In the example above, “Featured” spreads the four categories over the first four cards. Think of it as the first step towards the product detail page: if users see nothing suitable on the first screen, they never get there.

My note

When I audit a store, I first try ticking two options in one group. Then I try removing a filter on my phone. These two attempts show most problems at first glance.

The most common mistake I see: the filters stay at a search plugin’s default settings. Options come in database order, sizes appear as “XL, S, L, M”, and counts are missing. Which filters appear in which category should be decided by the product team.

I also ask specifically about the default sort. Most teams aren’t aware that it is a decision. Filtering and sorting are among the first topics I look at in an analysis of e-commerce UX.

Checklist

Before launch, I check a product list against these points. If you want me to look at your store’s filters: the UX audit covers this.

• Several options can be chosen within a group; the options are checkboxes.
• “And” applies between groups, “or” within a group.
• Each option shows how many products remain.
• Active filters sit as chips above the list and can be removed one by one.
• There is “Clear all”.
• The total number of results is visible at all times and announced to the screen reader.
• With zero results, it suggests which filter can be removed.
• On mobile, the filter button is labelled and shows the number of active filters.
• Sorting offers price, rating, best selling and newest.
• The default sort shows the breadth of the assortment on the first screen.