Design useful filters for a catalogue or directory

Choose criteria that support decisions

Observe the questions people ask before choosing. A directory may need category, region and resource type; a catalogue may need availability, size or use. Add a criterion only when the relevant entries carry dependable data.

Define values and synonyms before publishing. Two labels meaning the same thing scatter results. The web directory shows how categories, search and explanatory entries can work together.

• Criteria tied to decisions.
• Reliable data on relevant entries.
• Values and synonyms harmonised.

Show results and state

After a selection, show the result count and active filters. People should be able to remove one criterion or reset all. A no-results state should explain what happened and suggest a reasonable step without silently clearing selections.

Test combinations, browser back, category changes and free-text search. Cards need readable titles and essential information even when images fail. The site-search guide covers the broader journey.

• Count and criteria visible.
• Simple reset.
• No-results state explained.

Support keyboard and mobile

Checkboxes, selects and buttons need clear labels, logical order and visible focus. If results change without a reload, announce the change without interrupting reading after every keystroke. On mobile, check the filter panel and remaining space for cards.

Test by keyboard, at high zoom and on narrow screens. A mouse-friendly filter can still make removal impossible for a screen reader or phone user. The accessibility guide offers a test method.

• Controls named and reachable.
• Result changes perceptible.
• Mobile panel usable.

Decide which URLs deserve crawling

Some selections may warrant stable, useful pages; most combinations do not need indexable URLs. Document the decision before generating many parameters. Keep individual entries and a complete main listing accessible.

Google guidance on faceted navigation explains the cost of near-infinite URL spaces. Check empty combinations, repeated parameters and generated links after filter changes.

• Public URLs chosen deliberately.
• Entries reachable without filters.
• Empty and duplicate combinations checked.

Represent shareable filters without manually concatenating URL fragments.

Synthetic case: a catalogue filter contains ‘R&D + consulting’. Construct its URL with URLSearchParams and compare the value retrieved after navigation. Define repeated, absent and unknown parameter behaviour. The API helps encoding; it does not validate values or establish the catalogue’s indexing strategy.

• The filter recovers its exact value and unknown or repeated parameters follow an explicit rule.

• MDN URLSearchParams

  Interface for reading and constructing URL parameter pairs, including encoding and repeated values.

Keep filters understandable

Proposed case: selecting a category and then a city produces an empty list. The page does not explain which filter to remove or how to restore the previous state.

Test combinations, reset and back navigation. Record results, active criteria and URL when it represents state; a count must match what is actually shown.

• Display active criteria
• Test an empty combination
• Check reset and back navigation

• Test search without jargon

  Design on-site search that helps people find the right thing