Filter a list

[joelanman]

Also known as: faceted search

What

Help users filter a list of items for to see things that are relevant to their task. For example filtering search results.

Why

Services that use this pattern:

• GOV.UK search
• GOV.UK Pay Admin
• GOV.UK Notify Admin

Anything else

• Discussion on Design Wiki

[ignaciaorellana]

There is a conversation in the designer mailing list that is talking about examples of filter or advance search components (relevant to this issue). There is an example from Digital Market Place and GOV.UK pages

[joelanman]

Screenshot from GOV.UK search

[NickColley]

You can see this component in GOV.UK Publishing at https://finder-frontend.herokuapp.com/component-guide/option-select

[adamsilver]

Here's some work we've done for HMCTS on filters: https://github.com/hmcts/design-system-backlog/issues/43

Here's a demo of an AJAX-enhanced responsive filter with accessibility measures. You can turn off JS to see how things behave. http://nostyle.herokuapp.com/examples/filter-form

[mikeash82]

@fordie commented on this issue on 26 Jun

This pattern allows a user to search or filter a list of items that have been returned by the system, for instance looking for only pubs or properties in a certain postcode that are in a list of properties. This is similar to search, but the user will already have been presented with a list of results that they want to reduce.

@benwakefield commented on 27 Sep

@stevenaproctor We're using this approach to refine results where usual closed checkbox filtering isn't appropriate, the prototype should be out for testing in the coming weeks. This UI is for an internal HMRC system fyi.

[dashouse]

Faceted search tags (aka Chips, Tags, Pills) on GOV.UK finders e.g. https://www.gov.uk/service-standard-reports?keywords=MOT&assessment_date%5Bfrom%5D=&assessment_date%5Bto%5D=

[timpaul]

We've moved this card to the 'To do' column of the community backlog because it's a dependency on the Search for something pattern, which is already in the 'To do' column.

[FarhadUX1]

Faceted search tags (aka Chips, Tags, Pills) on GOV.UK finders e.g. https://www.gov.uk/service-standard-reports?keywords=MOT&assessment_date%5Bfrom%5D=&assessment_date%5Bto%5D=

Curious as to why the filters selected (in a rectangle) would be separated from the filters itself. Happy to help with this design, as we are using filters for an activity feed.

[edwardhorsford]

It would be super if the collapsing filter component could be adopted - we've got a number of things you can filter by, and this helps keep the list manageable.

[joelanman]

This has not yet been through any user research at all

Here's a mockup of ideas for filtering GOV.UK search. I thought the accordion might work better with arrows here as people could understand plus and minus as adding filter (which is kind of true) and removing a filter (which is not true, you'd just be collapsing the group)

[campbellssource]

@joelanman I noticed that a previous implementation of search on gov.uk/search had a count next to each filter, Hinting at the consequence of selecting/deselecting the filter. I notice this isn't in the mock up or current version. have you had research suggest it isn't helpful?

[joelanman]

@campbellssource sorry for the long delay! There was no deliberate change there - I think at the point I made the screenshot we just hadn't implemented that aspect yet.

[adamsilver]

Here's the MOJ's filter a list pattern: https://moj-design-system.herokuapp.com/patterns/filter-a-list

Big screens:

Small screens:

[jonathaninch]

I'm looking into a set of filters that can be applied to a case load. I want to show how many cases there are for each filter (let's imagine there's 9 cases and there's 4 filters: case open, case closed, UK cases, international cases). e.g.

• case open (6 cases)
• case closed (3 cases)
• UK cases (7 cases)
• international cases (2 cases)

What I want to do is change the case number in brackets if another filter affects that total - so in the above example if I select UK cases (of which there's, say, 7), then I'd get:

• case open (5 cases)
• case closed (2 cases)

In other words, because I've not selected international cases, those two have been removed from the totals within case open and case closed, and the totals in brackets have dynamically updated when the UK cases filter has been clicked. Hope that makes sense....

Has anyone done this or knows how to do it?

[kelliedesigner]

The Filters documentation has been updated in the MOJ Pattern Library: https://design-patterns.service.justice.gov.uk/components/filter/

Feedback welcome!

[nedpowell]

For the CFS Service we updated the filters because the old filters had:

• 'Clear filters' at the bottom which was hard for the user to see and reach
• Low contrast between the text and background colours
• No way to see what filters had been selected
• No way for the user to show/hide all sections at once
• Outdated Accordions

For the updated filters we:

• Based them off the new Accordions
• Took inspiration from the MOJ's filter a list 'Selected filters' but decided the 'Apply filters' button wasn't necessary as 'Apply filters' could be done automatically, also the title 'Filters' doesn't add anything for the user.
• Made 'Filter by' on each filter visually hidden for screen readers and added 'Search for' text under the funding stream and period to differ from the main 'Search' at the top of the screen.
• A 'Clear search' button link was added so the user can clear the search separately from clearing the filters.

• The summary line was added in from the Accordion component to shows how many items the user has selected which was originally underneath 'Filter by'.

[maddyow]

We've used basic filters on the Campaigns hub to narrow down a page of campaign results.

In recent research sessions, the filters have been interacted with and useful to some – particularly with users who are familiar with the content (this is more of a B2B site). There were some expectations for things that weren’t on the site, for example specific health conditions so the labels and categories are very important (as well as the drop down options). There is also a more advanced search on this site so filters are used to help search at a topic only level.

Also noted in https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/217

[CharlotteDowns]

We've just added some guidance on how to 'share findings about your users' with us 📝. This will help us learn more about how your users filter a list within your service.