Collab space: Filtering

Patterns In progress patterns
1

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

Filtering
Filtering1805Ă—2388 540 KB

2 Likes
2

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

3

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.

4

I notice you have not included the URL in the search results pattern example above. Was this a considered decision?

5

Hi @Josh, thanks for your post and feedback on Filtering! The above is an example of the content displayed however it can be adapted as required for your user need. The released components include an example list item with a url for when you have a user need, such as your results link to external content where this information is beneficial for the user to know: List item | Digital.NSW