Pill: Selected
Pill
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
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. Natural language
The quick filter labels should use real-world language that aligns with the terms commonly used by users. ²
4. Positioning
Quick filters should be placed directly above the filtered content to facilitate a visual connection for users. ¹
5. Number of options
Minimize the number of choices to avoid overwhelming the user. ³
6. 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.
Related Components
Accessibility
Quick filters colors follow contrast ratio AA standards, based on Web Content Accessibility Guidelines (WCAG) guidelines.
Benefits: People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable even if the person does not see the full range of colors. It also works for the rare individuals who see no color.¹
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/