Filters

[kelliedesigner]

Discussed in #197

^{Originally posted by michaelchambersjnr July 1, 2021}

Existing

Components and patterns

• Filter component in the MOJ Pattern Library
• Filter a list pattern in the MOJ Pattern Library
• Option select in the GOV.UK Finder Frontend Component Guide

GitHub discussions

• Filter a list in the GOV.UK Design System community backlog
• Filter a data table issue on GitHub is a new pattern being worked on at the Home Office

New generic filter guidance

Do user research to find out the best order for the filters.

Variation

Product created in

OPG Sirius Supervision workflow

About the product

OPG Sirius Supervision workflow is a product being developed in OPG to replace its legacy system.

Who the users are

It will be used by staff of the OPG to allow them to supervise deputies appointed by the court of protection.

User need

There is a need for users to be able to filter lists of information in order to manage their work. There are many filters and options users need to filter by. Users are unlikely to select more than one filter at a time.

Using the existing filter component

Before designing a variation, the team first followed the guidance of the filter component and Filter a list pattern in the MOJ Pattern Library.

Research showed:

• users expected the 'Apply filters' button at the bottom. Some users thought filters would auto apply and were not expecting to have to click 'Apply filters'
• users often missed the 'Show filters' button, or assumed that the headline stats or the column headers would be the filters before realising there was a show filters option
• the component would break the page layout when a lot of filters or options in filters are needed. Task types/Case owner can be up to 20-32 options respectively.

Designing a variation

The team used their research and the Option select component from the Finder Frontend Component Guide as a reference to design a variation of the filter component that would meet the user need.

This variation:

• lets users show and hide each filter, similar to the Accordion component in the GOV.UK Design System
• includes a scrollable list in each filter, to allow many options to be included
• includes a filter search, to allow users to narrow the checkboxes down
• moves the 'Apply filters' button to the bottom, responding to user research

Research on this variation

This variation has been tested with users and iterated and improved based on research.

Is it useful and unique?

• There seems to be a need in a number of products for many filters or filter options, such as case working systems.
• It does not replicate something already in the Design System. Filter a list is in the GOV.UK Design System community backlog.

When to use

• When there is a need for many filters or filter options
• When users use a service regularly, for example users of caseworking systems who need to perform familiar tasks quickly

How to use

Find out how your users interact with the content

Users might need the filters they have opened to stay open if they leave and then return to the page. You can configure the filters to stay open.

Use clear labels

Hiding filters hides the options, so the labels need to be clear. If necessary, you can add a summary line to help users understand what is in the filter.

If you struggle to come up with clear labels, it might be because the way you’ve separated the content is not clear.

Contribute

Things we don’t know enough about

Accessibility testing

Once we have a production version ready of this variation we will conduct accessibility testing.

Users don’t always see that there is a filter

Should we:

• show the component by default with the option to hide
• make the 'Show filters' button more prominent, for example use the blue

Selected filters can't be seen when filters is hidden

Should we:

• move selected filters and the ability to clear them to the top of the content area, like the GOV.UK Search results