Filtering is one of the most critical features in e-commerce user experience. Research from Baymard Institute shows that 34% of sites have poor filtering implementation, making it almost impossible for users to narrow down product lists effectively. Meanwhile, 36% of sites have design flaws so severe that they actively harm users' ability to find and select products.

For e-commerce managers, this represents both a significant risk and opportunity. Users who can't find what they're looking for will abandon your site—but those who can filter efficiently are more likely to convert.

This guide consolidates research-backed best practices from Baymard Institute and Nielsen Norman Group—organizations that have conducted extensive usability testing with thousands of users across hundreds of e-commerce sites. Each recommendation is grounded in real user behavior, not assumptions.

What you'll learn:

How to implement essential filter types that users expect
Design patterns proven to reduce site abandonment
Mobile-specific considerations for filtering interfaces
Strategies to prevent zero-result frustration
Progressive disclosure techniques to manage complex filter sets

Quick Summary: Key Takeaways

📊 Essential Filter Types (Implement These First)

Price - 80% of mobile users try to filter by price. This is non-negotiable for most e-commerce sites.

Size (Apparel) - 39% of users discover items aren't in their size after browsing. Position size filters at the top and expand by default.

Color - Constitutes 5-12% of all search queries in visually-driven verticals. Use visual swatches, not text labels.

🚫 Prevent Zero-Result Pages

Zero-result pages create high abandonment risk. 50% of sites fail to provide effective recovery options.

Best Practice: Grey out or disable filter options that lead to zero results. Display item counts next to each filter option.

📱 Mobile Filtering Requirements

57% of sites fail to make all color swatches available in mobile product lists
Minimum touch target: 7mm x 7mm with 2mm spacing
Use overlay "tray" design to show filters and results simultaneously

🎯 Progressive Disclosure

Display 6-10 filter values before truncating (10 is the sweet spot). Use accordions to collapse less critical filter types.

Keep expanded by default: Price, Size (for apparel), Color

⚠️ Common Mistakes to Avoid

15% of sites don't allow multi-select within filter types (e.g., selecting multiple colors)
32% of sites don't manage long filter lists effectively
42% of sites don't prominently display applied filters
Don't use alphabetical sorting as default (it's random and unhelpful)

Display Product Quantities (Item Counts)

Displaying product counts 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. Product counts create a sense of transparency, building trust in the interface while enhancing the overall filtering experience.

Research Insight: Item counts are particularly effective when combined with interactive filtering that updates counts in real-time as users apply filters. Nielsen Norman Group research shows this helps users avoid zero-result scenarios and understand the relationship between their selections and available inventory.

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

Link or checkbox?

Links for single-select navigation filters, like category
Checkboxes for multi-select filters, like sizes or colors

Research Insight: Baymard Institute found that 15% of sites don't allow users to select multiple filter options within the same filter type (e.g., multiple colors simultaneously), causing significant user frustration. Always enable multi-select for attributes where users logically want to see multiple options.

Price

Price is critical to the majority of users. Baymard Institute's mobile testing revealed that 80% of users tried to filter product lists by price, regardless of product type.

Users generally have an idea of a suitable budget for their purchases. Whether they apply a Price filter first or after tailoring the product list with other filters, most will only want to consider items within their budget.

Price is a key factor in purchase decisions, and users have come to expect price filters will always be available. 88% of benchmark sites offer price filters, making it a standard e-commerce feature.

Implementation Tip: Use a bucket slider to allow fine-grained control on certain value ranges. For example, if your product set has many products in the low-end and fewer in the high-end price range, users can still easily select precise ranges like $0-$20 without losing control at the lower end.

Recommendation: All e-commerce sites should offer Price filters (with the possible exception of some B2B or niche sites where price is not the primary decision factor).

Size

For apparel and accessories sites, size is a critical filter that dramatically affects conversion rates.

Research Findings (Baymard Institute):

39% of users discovered items they liked were not in stock in their size (after exploring products without filtering first)
Most users don't filter by size initially, but later encounter stockout frustration
Many sites collapse the "Size" filter or bury it below the viewport

Best Practices:

Position size filters at or near the top of the filter sidebar
Expand the size filter by default to ensure maximum visibility
Use a grid layout for size buttons rather than dropdowns to maximize visual prominence
Display size buttons in a grid format that takes up more horizontal space, attracting user attention more effectively than vertically aligned options

By making size filtering prominent, you encourage users to filter for their size first, ensuring items they explore are actually available in their size.

Source: Baymard Institute - Apparel Size Filter Best Practices

Color swatches

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

Research Insight (Baymard Institute):

Color searches constitute 5-12% of all search queries in visually-driven product verticals
54% of e-commerce sites display color search results poorly, severely impeding users' ability to find and decide on products
57% of sites fail to make all color swatches available in mobile product lists, causing users to miss available color options

Design Guidelines:

Use visual color swatches rather than text labels when possible
Enable multi-select for colors (users should be able to select multiple colors simultaneously)
On mobile, ensure minimum hit area of 7mm x 7mm with 2mm spacing between swatches
Make all color variations visible in product lists to prevent pogo-sticking between list and product pages
Combine product variations into one list item to prevent clutter

Use accordions

If a product listing page has many facets, emphasize the most important ones using accordions. Accordions are a proven design pattern for progressive disclosure, offering a clean and user-friendly way to manage filters.

Progressive Disclosure Benefits (Nielsen Norman Group):

Reduces user errors by showing only the most important options initially
Makes interfaces easier to learn and less error-prone
Gives users control over when they need additional content

Implementation Guidelines:

Keep the most important filters (Price, Size, Color) expanded by default
Collapse less critical filters to reduce cognitive load and save screen space
Maintain effortless navigation, especially on mobile devices where space is limited

When to Avoid Accordions: Don't use accordions when users need access to most filter content simultaneously, or when there are only a few filter types available.

Show-more/show-less

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

Research-Backed Guidelines (Baymard Institute):

Display at least 6 filter values before truncating (fewer confuses users)
10 values is the sweet spot for optimal usability
Displaying 15+ options impedes users' overview of other available filter types
Don't truncate a single value (the "show more" link takes the same space)
Use visual indicators (+ icon) and appropriate link styling to make the expansion option noticeable

In-filter search

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

Best Practice: Implement in-filter search for any filter type with more than 15-20 options.

Benefits:

Reduces effort and saves time for users with specific items in mind
Prevents scrolling fatigue in long filter lists
Maintains a streamlined interface
Gives users precise control to refine their search effectively
Particularly valuable for brands, materials, or technical specifications

Sorting filters

Product Count (Recommended): 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. This helps users make informed decisions about which filters will yield meaningful results.
Smart/Relevance-Based: Tweakwise can sort filters based on usage patterns and relevance. This diversity-based approach helps users visualize the full range of products available and prevents misleading impressions about inventory breadth.
Alphabetical: Use cautiously and only when it aids scanning (e.g., brand names users already know). Baymard Institute recommends avoiding alphabetical sorting as a default because it's often random and doesn't provide a representative sample of available products. Obscure names or numerals may appear first, making it impossible for users to predict relevant options.
Custom: When you need fine-grained control for specific business requirements or merchandising strategies.

Research Insight (Baymard Institute): An ideal filter sorting approach helps users visualize product diversity and gives them a solid starting point. Product count sorting combined with relevance weighting ensures users understand which options offer the best selection.

Prevent no-result pages

Preventing zero-result pages is fundamental to maintaining user confidence and preventing site abandonment. Landing on a page with 0 products frustrates users and creates unnecessary issues for search engines.

Research Insight (Nielsen Norman Group & Baymard Institute):

Zero-result pages create high risk of site abandonment
50% of sites fail to provide effective ways for users to recover from searches yielding no results
Users encountering "no results" often become stuck, lost, or confused

Implementation Best Practices:

Prevent Zero Results Proactively:
- Exclude or grey out filter options that lead to zero results (considered a basic e-commerce UX non-negotiable)
- Ensure links or URLs are only created when valid products exist
- Display item counts next to each filter option
- Use interactive filtering that updates counts in real-time
Recovery Options (when zero results occur):
- Clearly explain that no matching results were found (prominently in the main body, not hidden)
- Provide a search box with the original query for easy editing
- Suggest related queries or categories that do yield results
- Offer spelling corrections and advice about modifying search terms
- Link to broader categories or product lists with related filters applied

Business Impact: This approach keeps users engaged on your site (reducing back-button clicks), minimizes irrelevant URLs indexed by search engines, and significantly improves conversion rates by maintaining user confidence throughout the browsing experience.