Filter

[michaelchambersjnr]

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

[IxDbloke]

Hi, this pattern is ideal for a Home Office project I've been working on. I'm finishing up soon but I'll let some other designers know, along with the developers in my team.

[kelliedesigner]

Issue created to add to the Pattern Library: #231

[kelliedesigner]

PR for adding to the Pattern Library: #230

[kelliedesigner]

Request for showing an example of filters being used with a sortable table at the same time.

[furnivall]

Hi there,

Our service (Court and Tribunal Hearings within HMCTS) recently went through the Accessibility Audit process from the Digital Accessibility Centre (DAC).

We use the nunjucks version of the component within an alphabetical search page. We received the following feedback on the filter component:

"Users are presented with the ‘Selected filter’ section and the ‘Apply filters’ button and ‘Clear filters’ links above the filter selection checkboxes, this means that users have to navigate through the filter sections to make a selection and navigate back through the checkboxes to apply the filter selection. "

We thought it might assist other teams who decide to use this component to pre-warn them about this. It is of course possible to reorder the display of the component by manipulating the raw HTML but the default implementation is likely to receive a similar response from DAC audits.

Please let me know if I can clarify anything.

[gregtyler]

In OPG we've had to write custom JavaScript to modify this component to allow us to overrule the default open/close state of the filters. We wanted the filters to be hidden by default, and only shown when either the button is clicked or the user already has filters selected (e.g. on reload or back button) (see PR).

I think this is particularly important for apps that handle filters/pagination on the server-side, so that they can provide a consistent UI.

[Whersi]

Ticket number

#160

The details below is pulled from the ticket.

Summary

The Filter component should provide a way of specifying custom classes.

Motivation

Most (all?) other components offer the ability to add extra classes by providing a classes parameter when instantiating. This is useful for extending styling without overwriting default implementation (for instance, by providing a modifier class to create a bespoke theme).

The Filter component is currently missing this feature.

Describe alternatives you've considered

At the moment, it seems the only way to tweak the styling of this component is to override the default styles:

App css:

.moj-filter__header {
  background: govuk-colour("light-grey");
}

When allowing extra classes, the modifier could be used to ensure original styles are not touched:

Template:

{{ mojFilter({
  heading: {
    text: 'Filter'
  },
  classes: "moj-filter--light-header",
  optionsHtml: filterOptionsHtml
}) }}

.moj-filter--light-header .moj-filter__header {
  background: govuk-colour("light-grey");
}

Additional context

Happy to provide the PR for this!

[Whersi]

Ticket number

#616.

The details below is pulled from the ticket.

Summary

Similar to this issue, the Apply Filters button in the Filter component should be able to have custom classes applied to it.

Motivation

Most other components offer the ability to add extra classes by providing a classes parameter when instantiating including the govUkButton component which is being used under the hood in the moj filter component. This is useful for extending styling without overwriting default implementation (for instance, by providing a modifier class to create a bespoke theme).

The Filter component does not allow a custom button class to be passed through to the govUkButton component used to apply the filter.

Describe alternatives you've considered

At the moment, it seems the only way would be to tweak the styling of the gov uk button on the page it is used:

App css:

.govuk-button {
  custom styles
}

which is very undesirable as it would affect all buttons on the page and could be hidden from future developers working on the page.

Otherwise we would have to avoid using nunjucks and simply write the HTML with custom classes ourselves.

Additional context

Happy to provide the PR for this!