Filter a list

[davidhunter08]

Also known as: faceted search

What

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

Why

Currently used on:

• NHS apps library NHS apps library is now closed
• Find a walk-in coronavirus (COVID-19) vaccination site

See also the GOV.UK Design System backlog issue

[bencullimore]

I did a bit of work on filters for result lists going back a few years ago for NHS eReferral Service - ‘Manage your referral service’ - predominantly mobile.

The original assumption was that users would want to filter a list of shortlisted hospitals based on their specific needs - distance, access, parking etc.

1. Select clinic screen v1

2. Filter clinics

3. Select clinic screen v2

We tested a filter only to find that no one used it (even though they said how important access, parking was to them before we showed the prototype).

What worked best was showing the key top three pieces of information (from user card sorting) for each hospital listing:

1. How many days until first available appointment
2. Distance from [specified] address
3. Average wait for treatment (treatment comes after initial appointment)

Users were happy to scroll through a number of options (we tested with a list of around 15) to assess which was best for them.

A couple of caveats that the majority of users either knew or had a vague idea of what they were going to choose either from previous experience, recommendation, or how fast they wanted to be seen - which meant they already knew about parking and access etc.

Key take away was users were happy to scroll (not filter) as long as the important bits were exposed.

Here's with what we ended up with for beta, without filters.

3. Beta select clinic screen

The screen has since been worked on, incorporating the NHS digital service manual design system styles and patterns.

[devansXD]

We explored filters on service search in the very early alpha days on the eRS professional web app - we found autosuggest negated the need in the end. We did have some filters on the worklists screen, which although tested quite well on flat visuals, I wanted to test a responsive version. It never made it out the door, but its here anyway as a reference:

https://ers-admin-prototype.herokuapp.com/worklists/worklists ers/makethenhsbetter

[samanthasaw]

NHS App latest appointments concept includes filtering

In user testing, users wanted to see the soonest available appointments as fast as possible. So we included one pre-question before the search results page (what type of appointment do you need?). And then allowed users to filter further on the search results page.

[henocookie]

Sofia Western and Tom Brooks presented at the NHS.UK show and tell on 25th January 2022 and showed the Find a walk-in coronavirus (COVID-19) vaccination site service which now includes a filter on search results pages.

[henocookie]

Jack Ruck also mentioned that Find a Service are "currently testing this within some of the service finders as well and we're all joined up in hoping to get it into the design system"

[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/alphagov/govuk-design-system-backlog/issues/133

[karypun]

We used filters on the Standards Directory. Most users primarily engaged with the search bar if they knew what they were looking for. Some users haven't noticed the filters; however, once they did, many found them useful, particularly to filter down to relevant care settings and topics. We've implemented filter labels as well to see if they helped users see how and why the results have changed but didn't see much engagement in research. There is more work to be done to explore the labels and how we can make search refinement more useful.

[sarawilcox]

It would be really interesting to see analytics for how people interact with filters across different services. If you have the data, would you mind sharing, please?

[BrieWhyatt]

We have recently experimented briefly with filters in the NHS.UK search results list. We used a mixture of styles from GOV.UK and specifically MOJ. We made sure to place icons like a 'X' after the word in a button as this was evidenced by the MOJ to be more accessible.

Here are the designs we tested across desktop:

Here are the designs we tested across mobile: 

We ran our experiment in a live environment, as a smoke test. This means that the filters weren't functional, but simply there to see whether there was an appetite to interact with them. We acknowledge that this may impact the results.

Overall, we found there was a low interaction rate with the filters.

In the first week of the experiment we saw:

• 104 clicks on search filters since release which represents 208 estimated visits.
• 48% of the total clicks on filters were on mobile.
• Over the same period, 70K onsite searches were performed on the selected keywords, for every 700 onsite searches, 1 interacted with the filter.

In the second week of the experiment:

• 240 total clicks which represents 480 estimated visits
• 45% of the total clicks are mobile users
• 0.16% overall CTR based on selected search terms which represents a ratio of 1 click for every 630 onsite searches

This data evidences that the number of interactions with filters is not high enough to justify the development cost of building filters for NHS.UK search at this time, and perhaps indicates that users aren't looking to filter health information in this way.

[karypun]

On the NHS Data Standards Directory, we’ve applied a similar filter approach as mentioned above given the knowledge sharing we did with Brie, Maddy and team.

We tested the filters using a dynamic prototype based on live code (so real search results were reflected as users applied filters). Our key findings were around:

• visibility: some of the users tend to miss the side filters as they were primarily focused on the search bar that sat above and central on the page
• relevance: once users noticed the filters, some have found them helpful, especially ones like care settings and topics, although some of the options contained within were subject to a matter of opinion

In the last two months (between 6th Sept - early this week) we had 312 users of which 44 people used the care settings, 12 people used the topics, so 14% and 4% respectively.

[Asad-acc]

Description: We have designed filters for users to easily refine patient reviews on the ratings and reviews journey for profiles. The filter designs are inspired by the filtering produced by the FAS team. Whilst these designs have not been tested with users yet, we plan to gather insights on the effectiveness of the filters during our upcoming lab session. We will provide an update accordingly based on the user feedback.

Design Thinking:

• Enable users to easily filter patient reviews on the ratings and reviews journey for profiles
• Provide an intuitive and user-friendly filtering experience
• Create a design inspired by the filtering produced by the FAS team

[maevewillie-pepple]

My team is working on filters for test results in the NHS App

What

• A feature to help users filter their test results (in this case by type)
• Users can filter by clicking the filter icon/hyperlink which brings up an overlay with filter options.
• The overlay partially obscures the underlying page, with bottom sheets visible. Users can exit the filter using the 'X' at the top right.
• Multiple filter options can be selected. The list is scrollable but the "Apply" and "Clear All" buttons remain visible at the bottom.
• The number of selected options appear in brackets on the "Apply" button.
• On clicking "Apply", the selected options are displayed clearly in a filter summary above the page.
• Users can exit the filter in multiple ways:
  • Removing individual options by clicking the 'X' next to them at the top of the page
  • Selecting "Clear All" underneath the filter to remove all filters
  • Re-entering the filter overlay and using the "Clear All" option there
• A future iteration we’re considering is adding the option to filter by both test type and date.

Journeys used on Test results in the NHS App (not yet released)

Some insights from usability testing

• Most participants are able to easily navigate, apply and clear filters (most would click on the "X" on the individual options or the "clear all" button, few would go back into the filter to clear).
• Most users found the filter option useful and efficient

Screenshots of the design