UI Coach guide
Filter UX Best Practices
How to design filters that narrow a set without trapping people in zero results they cannot explain.
By UI Coach Editorial ·
Filters exist to reduce a large set to a useful set. They fail when applied filters are invisible, when combinations produce empty lists with no escape, or when the controls compete with the results for attention.
Always show what is on
Chips, a clear filter bar, or a count of active filters should sit near the results. A sidebar of unchecked boxes does not tell someone why the list is small if they applied filters last week and forgot.
Let people undo quickly
Clear all has to be obvious. Individual dismiss on chips is better. Changing one select should not reset unrelated filters unless those filters became invalid.
Counts help, until they lie
Facet counts are useful when they are accurate and cheap. Stale counts cause distrust. If you cannot keep them honest, hide them.
Mobile needs a dedicated surface
A full-page filter sheet with Apply is usually clearer than trying to park every facet above a phone-sized list. Previewing result count on Apply reduces shocks.
How to judge the work
Filters are done when applied constraints are visible, when clearing them is obvious, when empty combinations explain themselves, and when mobile has a dedicated apply surface instead of a squeezed sidebar. If someone cannot say why the list is short, the filter UI failed even if the query is technically correct.
Practice this on UI Coach
Resource-style browsing and ecommerce challenges are natural filter problems. Design the empty filtered state as carefully as the default grid.
Sources
- Nielsen Norman Group on filters and faceted navigation