Filters are a common component used in many services across DfE.
There are many variations and we as a department have no guidance on how to use filters.
There are a lot of differences in filter styling and functionality in the department.
Discovery
Our patterns and components working group ran a discovery to look at the different ways teams use filters.
We reached out to the GOV.UK design system team to discuss their filter component.
Due to prioritisation of other components, it will be a long time before they add it to their design system.
We asked designers and user researchers in DfE to share examples of how they use filters on a Lucid board.
We documented 14 different services using a filter. This included any insight about user research or accessibility issues.
We then reviewed them as a group and found that in most cases:
- services use a vertical filter on the left of the page with a govuk-grid-column-one-third div
- they display results on the right with a govuk-grid-column-two-thirds div
- services use a variation of the MoJ filter component
What we learnt
During the discovery we found some common problems and areas we need to learn more about.
This included:
- users missing "Show filters" button on mobile devices
- position of the "Apply filters" button causing users to scroll excessively on long lists
- difficulty finding specific filters when there are many options in a category
Mobile design
We heard several instances of users missing the "Show filters" button when using a mobile device.
We think users may miss this grey secondary action button for a few reasons, including:
- it looks inactive
- the colour of the button is too similar to the background colour of the filters
- the button is too far away from the results it relates to
Moving the "Apply filters" button
We heard from several teams that adding an apply filters button at the bottom of a long set of filters was helpful for their users.
It stopped users having to scroll down a long list to select required filters, then scroll back up to apply them.
Categories with many filter options
Filter categories that contain many options can become long and hard to read or navigate.
The MoJ design system suggests a few ways to help:
- show or hide filter categories in an accordion
- enable users to scroll through the list of filter options in a category
- reduce the amount of filter options in a category
- make long filter categories searchable
However, there can be some issues with some of these options.
For example, it can be hard for a person using a mobile device to scroll through a list of filter options accurately.
Conclusion
We decided that the MoJ filter component is suitable for what most teams need when adding a filter component to their service.
We chose not to create our own filter component, but have created some guidance on how to use filters in DfE.
We recommend teams use the MoJ filter in most cases. But, be flexible on how you present filters based on the context of the service and user needs.
Share your feedback
We want to hear from you if you've been in a team that have used any of these approaches and found any usability or accessibility issues.
Please share any insights you gather.
You can contact the DfE patterns and components group, on DfE Slack or contact the MoJ design system team on cross-gov Slack.