Product filters and faceted navigation: UX best practices

A category page with 400 items is not a selection; it is a chore. Filters are how shoppers cut that list down to the handful that match their size, budget and taste. When filters are well planned, people reach suitable products in seconds. When they are missing, irrelevant or awkward on a phone, shoppers give up scrolling. This guide focuses on product filter UX: which filters to offer, how they should behave, and how to make them pleasant on a small screen.

Filters and facets: a quick definition

People use the words loosely, so it helps to be clear. A filter narrows a list by a condition, such as "under ₹1,000". Faceted navigation is a system of several filters based on product attributes (facets) like size, colour, brand and material, which can be combined. On most modern stores, the filter sidebar or drawer is faceted navigation.

The design principle behind both is the same: let shoppers describe what they want using the attributes they already think about.

Choosing the right filters for each category

One global set of filters for the whole store rarely works. Size is essential for footwear and meaningless for cookware. Capacity matters for pressure cookers, wattage for mixer grinders, fabric for sarees.

How to decide what each category needs

1. List the questions a salesperson in a physical shop would ask for that category.
2. Check which attributes appear in your search logs, such as "cotton", "5 litre" or "under 500".
3. Look at customer queries on WhatsApp and phone calls about that product type.
4. Keep the filters that most shoppers would use; drop those that only suit a few.

Price, availability and customer rating tend to be useful across most categories. Beyond that, aim for roughly five to eight filters per category. More than that becomes a wall of options.

Clean data comes first

Filters are only as good as your product data. If half your shirts have colour recorded as "Navy", some as "navy blue" and some not at all, the colour filter will hide products. Standardise attribute values before launch and make them required fields when adding new items.

Show counts and hide dead ends

Next to each filter option, show how many products match, such as "Cotton (34)". Counts help shoppers predict the outcome of a tap and avoid choices that leave only one or two items.

Counts should update as filters combine. If someone selects "Size 9", the colour list should reflect how many size-9 shoes exist in each colour. Options with zero matches can be greyed out or hidden. Hiding keeps lists short; greying out shows that the option exists in the store generally. Either is fine, as long as a shopper can never select their way into an empty page without warning.

Multi-select within a filter group

A shopper who is happy with blue or black should be able to tick both. Within one group, selections normally combine with OR logic: blue OR black. Across different groups they combine with AND: (blue OR black) AND size M.

Single-select radio buttons are appropriate only when options exclude each other, such as sort order. Use checkboxes for the rest, and make the whole label tappable, not just the tiny box.

Handling ranges such as price

Price works well as preset bands (under ₹500, ₹500–₹1,000 and so on) or as a slider with two handles. Sliders are fiddly on phones, so pair them with minimum and maximum input boxes. Base your bands on actual prices in the category rather than round numbers that leave some bands nearly empty.

Designing filters for mobile shoppers

On desktop, a left sidebar is the usual pattern. On a phone there is no room, so filters move into a drawer or full-screen panel opened by a "Filter" button. This is where most filter experiences fall apart.

Mobile filter drawer checklist

• A sticky "Filter" button (and separate "Sort" button) visible while scrolling
• Filter groups collapsed by default, with the most used group open
• Tap targets around 48 pixels tall with space between options
• A button such as "Show 23 results" that updates its number as choices change
• A visible "Clear all" link inside the drawer
• The drawer closes and returns the shopper to the top of the updated list
• The phone's back button closes the drawer instead of leaving the page

Decide between applying each selection instantly or batching them behind an apply button. Instant updates suit desktop. On mobile, reloading results after every tap can feel jumpy on a slow connection, so a single apply button is often calmer.

Making it easy to see and clear active filters

Once filters are applied, show them above the product grid as removable chips, for example "Cotton ×" and "Under ₹1,000 ×". Shoppers can then see why the list looks the way it does and remove one condition without reopening the whole panel.

Add a "Clear all filters" link beside the chips. Also keep filter selections when a shopper opens a product and presses back. Losing all selections after viewing one item is one of the most irritating filter bugs, and it is common.

Testing your filters with real shoppers

Pick a realistic task, such as "find a cotton kurta in size L under ₹800", and ask three or four people who do not work on the store to complete it on their own phones. Watch without helping. Note where they hesitate, what they tap first and whether they find the clear option.

In analytics, check how often filters are used and which ones are ignored. Filters nobody touches can be removed or moved lower. If you are planning a new store or a rebuild, our team designs category filtering as part of online store development.

Frequently asked questions

Should filters be on the left or at the top on desktop?

A left sidebar suits stores with many filter groups. A horizontal bar of dropdowns above the grid works for categories with only three or four filters and leaves more room for products.

How many options should a filter group show before "show more"?

Showing around five to seven options and hiding the rest behind a "Show more" link keeps groups scannable. A search box inside long lists, such as brands, also helps.

Should out-of-stock products appear in filtered results?

Many stores provide an "In stock only" filter or place sold-out items at the end. Showing unavailable products first frustrates shoppers who filter carefully and then find nothing to buy.

Do filters slow down the category page?

They can if every change reloads the full page or runs heavy database queries. Updating results without a full reload and caching filter counts keeps them responsive.