Ecommerce filters: how to help people narrow the catalog

Good store filters let people tick several options in the same group, apply choices at the pace of the person filtering and keep what’s active in plain sight. All three still fail on big stores. In Baymard Institute testing, 15% of stores don’t accept two options from the same group. Another 28% don’t show a summary of the filters applied (Baymard).

What filters are for

A filter is the tool for someone already facing a long list who only wants what meets their criteria. NN/g separates two roles. A filter removes whatever fails a condition. A facet suggests categories and attributes the person might not have thought of, which turns search into navigation.

The controls are simple on purpose: checkboxes and menus with everyday labels. With them, any shopper can build a complex query without knowing Boolean logic (NN/g). That works for people who already know what they want. Weighing the last handful of options is a different job, covered in the post on comparison tables.

Several options in one group

Someone looking for blue or black jeans needs to tick both colors together. When the store accepts only one, they filter by blue, memorize what they liked, untick it, filter by black and try to remember everything at the end. Baymard describes that path in nine steps and reports participants giving up on products that would have worked.

The rule shoppers expect has two parts:

Across different groups, it’s “and”. Black plus brand X shows only items that are black and from brand X.
Within one group, it’s “or”. Brand X plus brand Y shows items from either one.

The same article asks for checkboxes on the options, since the control itself signals that more than one can be picked. In testing, it was common for people to apply five or six filters, and some went as far as ten (Baymard).

Apply right away or wait for a button

There are two ways to apply filters. With interactive filtering, the list changes on every click. With batch filtering, the person ticks everything and confirms with a button. NN/g ties the choice to two questions: what the person intends and how fast the site responds.

People who are exploring benefit from interactive filtering, because each result sparks an idea for the next filter. People who arrive with several criteria, like size, color and length, get annoyed when the page reloads on every tick. When the site may be slow, batching saves waiting, which is why NN/g recommends it on phones.

There’s a middle path. The system waits for the person to stop moving around the filter area and only updates after one or two seconds without activity (NN/g). Meanwhile, a progress indicator confirms the click was received. Dimming the whole list during the swap keeps each thumbnail from flickering on its own.

Where the page goes next

After filters apply, the page can jump to the top or stay put. Jumping mid-choice makes people lose their place and can land the next click on the wrong option. Staying put fails too when only a few items remain and the area next to the filters looks empty. NN/g shows a case like that, where the blank screen read as either loading or no results.

The rule is the same as in the previous section. While the person is still working the filters, the page doesn’t move. Once they’re done, taking them to the top shows what changed.

Show what’s active

A summary of applied filters fixes three problems Baymard saw in testing. Without it, there’s no immediate confirmation that the filter took effect. There’s no quick way to remove one. And the list has no context, the way a page title tells you where you are.

The third problem costs the most. Someone who forgets an active filter may decide the store doesn’t carry the product, when removing one condition would have been enough. The same article mentions filters applied without the person choosing them, like a homepage shortcut to “armchairs under $300” that lands with three conditions already set.

A few habits help:

each item in the summary has a large “x” to remove it, and there’s a button to clear everything;
showing only a count, like “Filters (3)”, isn’t enough, because people have to open the panel to see which ones;
on stores with technical products, the group name goes with the option: “Width: 90 cm” says more than “90 cm”.

According to Baymard, 72% of benchmarked stores already show that summary on desktop. A store that doesn’t stands out against what shoppers find everywhere else.

On a phone

A small screen takes away what made filters work on a computer: seeing the controls and the list at the same time. Many sites push filters to a separate screen, and people bounce back and forth to check whether the choice worked. NN/g argues for a panel that slides over the list, with the result count pinned at the top and part of the list visible behind it.

The same piece asks for a word on the button, like “Filter”, instead of an icon of lines and circles that not everyone recognizes. For the applied filters summary, Baymard accepts a row that scrolls sideways, as long as the last item shows cut in half. That cut is what tells people there’s more to the right.

What I take from my own work

From February to September 2022 I was a senior UX designer at Newfold Digital, where I built a system for searching and filtering domains that simplified how users picked one. That role is on my full profile. I don’t have a measured number from that work to show here.

The other lesson comes from the Le Biscuit case, a store with thousands of home and lifestyle products, built on a design system tied to its content schemas. The way I see it, good filtering starts before the screen. If product width doesn’t exist as a field in the catalog data, there’s nothing to filter on. Baymard gives a similar warning: with a poorly categorized catalog, not even the best filter logic saves the list.

Where the sources disagree

The NN/g piece on the mobile tray, from 2015, treats watching the list change as soon as an option is ticked as the ideal. The NN/g piece on when to apply, from 2016, recommends an apply button on phones, even with the tray. The two meet at speed. Instant responses favor updating right away, and a slow network favors batching.

The common mistake: letting the list hit zero without a word

The most frequent slip is a filter combination that returns nothing and doesn’t say why. NN/g notes that facets often show how many items each option holds, which heads off zero results before the click. Together with the summary of active filters, people can see what they cut and undo the excess. For when a text search finds nothing, see the post on store search.