Filters & Sort UI

[Image]

Filtering and sorting controls determine how efficiently users can navigate large sets of options. For product designers and managers, the challenge is creating interfaces that feel simple, responsive, and aligned with how users naturally browse or search.

Filters & Sort UI Testing uses a design stack of UX metrics: usability, success, and satisfaction to measure how well users can refine and locate items. This approach replaces subjective opinions with measurable insights.

With these findings, designers and managers can make informed design decisions, prioritize improvements, and demonstrate the impact of changes on business outcomes. For example, testing Etsy’s birthday card search page revealed solid success but lower usability, showing where filter placement and labeling could be improved to make browsing more efficient.

---

Define Goals for Your Filters & Sort UI

A Filters & Sort UI should balance user needs like clarity, control, and efficiency with business goals such as product discovery, engagement, and conversion. Users want to narrow options quickly to find what fits their taste, while businesses want to help them do so without friction or overwhelm. Measuring how filters and sorting tools are used ensures the experience supports both satisfaction and sales.

**Audience:**

To define user needs, you first need to establish who your audience is. In the case of our Etsy example, we targeted online shoppers who might be interested in their custom gift offerings.

User Needs
As a customer using filters and sort tools on a product results page, the five most important needs would be:

1. Filter and sort options should be easily visible and clearly labeled to help users locate what they need. (Filter should be Findable)

2. The controls should be simple and intuitive, allowing for easy selection and adjustment. (Controls should be Usable)

3. Filters should update results quickly, helping users reach their goal without extra steps or waiting. (Filters should be Efficient)

4. The tools should make the browsing experience feel productive and worth the effort. (Tools should be Valuable)

5. The experience should feel satisfying—showing users relevant, personalized results that make shopping enjoyable. (Experience should be Delightful)

These five ensure filtering and sorting feels easy, responsive, and rewarding, helping customers confidently navigate product results.

Business Goals
Here are the five most important business goals for a filters & sort UI:

1. Increase Product Discovery – Help users uncover more items that match their interests or needs.

2. Boost Conversion Rates – Make it easier for customers to find and purchase the right product faster.

3. Reduce Friction in Browsing – Eliminate confusion or frustration that could cause users to abandon their search.

4. Highlight Key Products or Categories – Use sorting logic and filters to promote top-performing or seasonal items.

5. Collect Behavioral Insights – Analyze which filters are most used to inform merchandising and design decisions.

These goals help the business streamline the path to purchase, surface relevant products, and improve overall shopping satisfaction through an effective filtering and sorting interface.

---

Choose Metrics to Test Your Filters & Sort UI

For Etsy’s birthday card search page, a design stack of three UX metrics was chosen to measure how effectively the filtering and sorting experience supports product discovery. This stack — Usability, Effort, and Satisfaction — was established by mapping user needs directly to measurable outcomes:

• Usable, Findable, & Efficient → Usability

  Shoppers should be able to easily locate and apply filters or sorting options to refine their search results. Usability measures whether participants can successfully use these controls without confusion.

• Delightful → Effort

  The filtering experience should feel smooth and intuitive, not tedious or frustrating. Effort measures how easy or difficult participants found it to complete filtering actions, indicating the overall delight of the interaction.

• Valuable → Satisfaction

  After using filters and sorting tools, shoppers should feel confident and pleased with the product results they see. Satisfaction captures whether participants describe the experience as helpful and worth their time.

---

Establish Hunches to Direct Your Testing

Filtering and sorting tools play a critical role in how efficiently users find what they’re looking for, especially in product-heavy experiences like Etsy’s search results. By starting with hunches about where users may struggle or succeed, designers can craft questions that uncover the clarity, efficiency, and emotional experience behind those interactions.

Example: Etsy Birthday Card Search Page

<table xmlns="http://www.w3.org/1999/xhtml" style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Hunches</p></th><th colspan="1" rowspan="1"><p>Questions</p></th><th colspan="1" rowspan="1"><p>UX Metrics</p></th></tr><tr><td colspan="1" rowspan="1"><p>The filter controls (e.g., price range, delivery time, material, personalization) may feel overwhelming, causing users to skip filtering altogether and rely only on scrolling.</p></td><td colspan="1" rowspan="1"><p>Which filters did you find most helpful, and were there any you ignored or found confusing?</p></td><td colspan="1" rowspan="1"><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://glare.helio.app/define/ux-metrics/attitudinal-metrics/sentiment">Sentiment</a></p></td></tr><tr><td colspan="1" rowspan="1"><p>The Sort By dropdown (e.g., “Relevancy,” “Top Customer Reviews,” “Price”) may not clearly impact results, leaving users unsure if their sorting action worked.</p></td><td colspan="1" rowspan="1"><p>After sorting results, how confident were you that the list actually changed based on your selection?</p></td><td colspan="1" rowspan="1"><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://glare.helio.app/define/ux-metrics/attitudinal-metrics/posttask-satisfaction">Satisfaction</a></p></td></tr><tr><td colspan="1" rowspan="1"><p>Users may rely more on visual browsing (product photos, titles, prices) than on filters — suggesting that the UI’s top bar could be streamlined or deemphasized.</p></td><td colspan="1" rowspan="1"><p>Did you use the filters or just browse through the listings? Why?</p></td><td colspan="1" rowspan="1"><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://glare.helio.app/define/ux-metrics/behavioral-metrics/intent">Intent</a></p></td></tr><tr><td colspan="1" rowspan="1"><p>The filter panel’s hierarchy and spacing may make it difficult to distinguish between similar options (e.g., “Free shipping” vs. “Local delivery”), slowing down discovery.</p></td><td colspan="1" rowspan="1"><p>Was it easy to find and apply the filter options you wanted?</p></td><td colspan="1" rowspan="1"><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://glare.helio.app/define/ux-metrics/behavioral-metrics/success">Success</a></p></td></tr><tr><td colspan="1" rowspan="1"><p>The feedback loop when applying filters (page reloads or layout shifts) may interrupt the flow of browsing, leading to frustration or abandonment.</p></td><td colspan="1" rowspan="1"><p>How smooth or frustrating did it feel when applying or removing filters?</p></td><td colspan="1" rowspan="1"><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://glare.helio.app/define/ux-metrics/behavioral-metrics/effort">Effort</a></p></td></tr></tbody></table>

These hunches explore whether Etsy’s filtering and sorting tools meet user needs for efficiency, usability, and control, helping shoppers move confidently from broad browsing to specific, purchase-ready results.

---

Turn Hunches into Test Questions

Turning these metrics into participant questions transforms design assumptions into measurable signals. Each metric uses a specific question type paired with a clear example from Etsy’s birthday card search page:

• Usability **(Click test success across multiple directives)**

  Question type: Multi-task click test.

  Example: “Where would you click to filter results by price?” followed by “Where would you click to sort by newest items?” (Success rate is averaged across tasks)

[Image]

• Effort **(7-pt scale of difficulty)**

  Question type: Difficulty rating scale.

  Example: “How easy or difficult was it to find and apply filters on this page?” (1 = Very Easy → 7 = Very Difficult)

[Image]

• Satisfaction **(5-pt Likert scale)**

  Question type: Satisfaction scale.

  Example: “Overall, how satisfied are you with the filtering and sorting experience on this page?” (Very Dissatisfied → Very Satisfied)

[Image]

---

Calculate UX Metric Scores from User Feedback

For Etsy’s birthday card search page, participant responses and interactions were analyzed and converted into UX metric scores on a 0–100% scale. Each metric in the design stack — Usability, Effort, and Satisfaction — was calculated from participant feedback and first-click data, then benchmarked using the following scoring scale:

• Very Good = 90% and above

• Good = 70%–89%

• Average = 50%–69%

• Poor = 30%–49%

• Very Poor = below 30%

Etsy’s Results

• Usability (58% — Average): Participants found the filters somewhat cluttered, making it harder to locate and adjust sorting options efficiently.

• Effort (86% — Good): Once users located the correct filters, they reported that applying and clearing them required minimal effort, indicating a well-structured interaction flow.

• Satisfaction (91% — Very Good): Overall impressions of the browsing and filtering experience were highly positive, with participants describing it as smooth, convenient, and visually appealing.

[Image]

These results produced an overall test score of 78% — Good. Etsy’s filter and sort UI performs strongly in reducing effort and providing a satisfying user experience, but moderate usability friction shows that minor layout or labeling adjustments could further streamline task completion. Simplifying filter placement and prioritizing most-used options could help improve first-click accuracy and elevate the experience from good to excellent.

Click here to check out the raw survey data and UX metric scores for Etsy's birthday card search page.

---

Draw Signals from Your Design Stack

Here’s how signals were surfaced from the Etsy filters & sort test results by following these five steps:

1. Focus on poorly scoring metrics

[Image]

The test results for Etsy’s filters and sort tools show average usability (58%), indicating that while users can generally navigate the interface, there are points of friction when interacting with filtering controls. On the other hand, Effort (86%) and Satisfaction (91%) scored very well, showing that once users locate the tools, they find them quick, effective, and enjoyable to use. The issue lies in initial discoverability and clarity rather than performance or delight.

2. Identify patterns across metrics

[Image]

The metrics show a clear pattern: Etsy’s filters and sort tools are rewarding once used but not intuitive to find at first glance. Users enjoy the browsing experience after engaging with the controls, but average usability suggests that filter placement, labeling, or hierarchy may cause hesitation. Strong satisfaction and effort scores imply that the interaction model itself works well — the opportunity is in improving visibility and clarity earlier in the experience.

3. Determine if user needs are being met

[Image]

• Findable: Partially met — users can locate filters and sorting options, but the average usability score indicates discoverability issues.

• Usable: Partially met — controls are functional but may require extra scanning or interpretation before use.

• Efficient: Met — once engaged, filters respond quickly and streamline browsing.

• Valuable: Met — users report positive experiences and strong satisfaction, showing that the tools enhance shopping productivity.

• Delightful: Met — very good satisfaction scores confirm the experience feels enjoyable and rewarding.

4. Compare outcomes to your business goals

• Increase Product Discovery: Supported — effective filtering helps users uncover relevant items once they locate the tools.

• Boost Conversion Rates: Partially supported — friction at the start may delay or discourage some shoppers from refining results.

• Reduce Friction in Browsing: Partially met — once in use, friction is low, but initial findability remains a barrier.

• Highlight Key Products or Categories: Supported — filters guide users toward relevant segments once applied.

• Collect Behavioral Insights: Supported — strong engagement with filtering tools offers valuable data for merchandising.

5. Surface signals & establish a direction

Signals derived from the data:

1. Filters perform well but aren’t immediately visible — users benefit once they engage, but average usability reveals a discoverability problem.

2. Satisfaction is strong because the interaction feels quick and responsive — users appreciate the speed and feedback of the filtering process.

3. Friction exists at the start of the journey, not during it — early hesitation suggests design clarity improvements could elevate the entire experience.

Direction based on business context:

To support Etsy’s goals of increasing product discovery and reducing friction in browsing, design priorities should include:

• Enhancing the visual prominence and labeling of filtering and sorting options.

• Introducing contextual cues or animations that hint at interactivity (e.g., filter chip highlights or collapsible states).

• Preserving the efficient, rewarding post-filter experience while smoothing the entry point into it.

Based on the signals and design direction, we created an updated version of the design with the expected UX metric improvement:

[Image]

Etsy’s direction is clear: their filters and sort tools deliver a delightful experience once discovered but need stronger visibility and clarity upfront. Improving discoverability will help more users enjoy the ease and speed these tools already provide.

---