Display quantities

Displaying quantities next to filter options helps users make informed decisions by showing how many products are available for each choice. It provides immediate feedback about the impact of their selections, guiding them toward options with meaningful results.

This improves usability by setting clear expectations and preventing frustration from selecting filters that lead to few or no results. Quantities also create a sense of transparency, building trust in the interface while enhancing the overall filtering experience.

Facet types

Slider

Use a slider for numerical values. Can be a single value slider or range slider (min/max).

Link or checkbox?

• Link for single-select navigation filters, like category.
• Checkbox for multiselect filters, like sizes.

Price

Price is important to the majority of users — in fact, during mobile testing sessions, 80% of users tried to filter product lists by price.

Users generally have an idea of a suitable budget for their purchases, and, whether they apply a Price filter first or after tailoring the product list with other filters, most will only want to consider items that are affordable (or, conversely, that aren’t “too cheap”).

Price, therefore, is a key factor in the decision to purchase.

Tip: use a bucket slider to allow finegrained control on certain value groups. For example, if your productset has a lof of products in the low-end and less in high-end price-range, it's still easy to select a range from 0 - 20.

Size

https://baymard.com/blog/apparel-put-size-filter-near-top-and-expand-for-sidebar-filtering

Color swatches

Color is a common product variation on sites in many industries such as apparel, home & hardware, and houseware & furnishing, among others.

Individual users, of course, have strong preferences for certain colors, and would never consider products in other colors.

For example, users might always tend to buy blue jeans, but never black; or would never consider any color for kitchen appliances other than stainless steel.

As a result, they’d need to exclude some items from product lists as soon as they start the product-finding process.

Without a Color filter type, getting a product list that contains only those colors a user is truly interested in purchasing would be impossible, and product lists would be cluttered with items in unwanted colors.

Use accordions

If a product lister page has a lot of facets, it is recommended to put more emphasis on the most important facets. A common way to do this is using accordions. Accordions are a proven design pattern for progressive disclosure, offering a clean and user-friendly way to manage filters.

Keeping the most important filters open by default ensures users can quickly access key options without feeling overwhelmed.

This approach reduces cognitive load, saves screen space, and keeps navigation effortless, especially on mobile devices. Less critical filters remain easily accessible in collapsed sections, encouraging exploration while maintaining clarity.

By prioritizing key facets and organizing others, accordions create a focused, scalable, and efficient filtering experience that enhances usability and drives conversions.

Show-more/show-less

The same principle applies to managing facets with many options. By displaying only the most relevant items initially and allowing users to expand for additional options, this approach keeps the interface clean and focused while avoiding information overload.

See Sorting filters for best practises on displaying the most relevant items initially.

In-filter search

In-filter search is a powerful way to handle facets with many options. It allows users to quickly find specific items by typing keywords, avoiding the need to scroll through lengthy lists.

This approach enhances usability, especially for filters with dozens of options (e.g., brands or categories), by reducing effort and saving time. It ensures the interface remains streamlined while giving users precise control to refine their search effectively.

Sorting filters

Common ways to sort items:

• Smart: Tweakwise can sort the filters based on usage.
• Alfabetical: sometimes it makes more sense to scan by value, usually good for brand names.
• Productcount: options with higher product counts are often more relevant to users, as they offer a broader selection and are more likely to match their needs.
• Custom: if you need more fine-grained control.

Prevent no-result pages

Prevent users from landing on a page with 0 products to avoid frustrates unnecessary issues for search engines.

Ensure links or URLs are only created when a valid user selection exists (with products available). If a filter leads to zero items, grey it out or remove it entirely. Adding item counts next to each filter further enhances usability by helping users make informed choices.

This approach keeps users engaged on your site (reducing back-button clicks due to empty results) and minimizes the number of irrelevant URLs indexed by search engines.