Content
1
Language
The quick filter labels should use real-world language that aligns with the terms commonly used by users.² Keep filter labels short and concise.
Do
Don't
Anatomy
Pill: Selected
Pill
Behaviors
Instant
Quick filters take effect as soon as the user makes a selection.
Multi & Single Select
Quick filters can be configured to be multi or single select.
Multi select
Single select
Best Practices
1
When to use
Use quick filters when you want to offer a simpler and easier-to-learn filter experience. ¹ The filter bar and filter panel offer advanced filtering but may overwhelm more novice users.
2
User priorities
Conduct research to identify the most commonly used filters or those that would be most beneficial to users. ¹²
3
Positioning
Quick filters should be placed directly above the filtered content to facilitate a visual connection for users. ¹
Do
Don't
4
Number of options
Minimize the number of choices to avoid overwhelming the user. ³
5
Using with the filter bar
If your users are a mix of novice and experts, consider providing both quick filters and a filter bar. Changes made to quick filter selections should be reflected in the filter bar.
Do
More
Related Pages
Additional Reading
Filter UX Design Patterns https://www.pencilandpaper.io/articles/ux-pattern-analysis-enterprise-filtering
How to craft a kickass filtering UX https://uxdesign.cc/crafting-a-kickass-filtering-ux-beea1798d64b
Filter UI and UX 101 – An In-Depth Guide https://www.uxpin.com/studio/blog/filter-ui-and-ux/