The NSW Government Logo

Digital NSW community

A place for NSW Government digital creators to collaborate, share and learn.

Collab space: Filtering

This is an open space for collaborating on a filtering pattern. To join in the conversation please add a comment below.

Overview

Filtering allows a user to narrow down results using multiple attributes.

When to use filtering

Filtering help users narrow down the results of large data sets to find something specific. They give the user the power to refine results based on their desired criteria and eliminate the need for numerous searches.

Do:

  • choose the right filters for your content. Too many filters may confuse users, so make sure your filters are relevant and differentiable
  • show the number of results returned, and update the count each time filters are updated
  • allow users to filter and sort simultaneously to order the content by the factors that are most important to them
  • allow the user to remove and clear all filters easily
  • keep the original text or selection a user has made visible so they can see their current filters
  • use pagination when more than 10 results are returned
  • if there are no results, clearly communicate if there are no matching results and provide suggestions or follow up actions
  • truncate larger filtering sets with “Show more” and “Show less”, making the most popular choices of your users the ones that are visible.

Interaction Design & Usability Research

Filters

Filters can be returned in instant or batch updates. Instant updates return results after each individual selection is made by the user. Consider instant update filters when:

  • a user would only expect to make one filter selection at a time
  • filters can return results based on an individual selection, ie dropdown or checkbox

Batch updates allows a user to select multiple filters before selecting “Apply filters” to return updated results. Consider batch update filters when:

  • users would be expected to select multiple related filters
  • filters require multiple actions, ie keywords or date ranges

Result listings

When displaying results, consider what information is important to the user and display what they require to make an informed decision. This will depend largely on your product or service and your user needs.

No results

If no results are returned, allow the user to continue their journey by providing tips to improve or widen their results.

UI Design

1 Like

Nice work @amy.howard , are you planning on showing other states too? e.g. empty state, loading state, filters applied? I did some designs previously for our news page - https://www.figma.com/file/KxpqlqgHUyW9jzD62WyRPu/Design-System?node-id=1326%3A13705

Hi @adham, yes as we develop the pattern further we’ll be exploring the different states. Thanks for sharing what you’ve done for News! This will also assist us with listing options as we’ll be looking at when/how to add relevant images.