New pattern - Filter a data table

[IxDbloke]

Background

This is a common pattern for case management systems built for internal Home Office staff. It's used in DSA (Unadjusted), Ludus, Atlas and Identify and prioritise immigration cases (IPIC).
During 2020 we brought together different designers from the Home Office to identify use cases and patterns from their services. The following components were very common and tend to work together as a single pattern:

• Data tables
• Filtering
• Search
• Tabs

A common example is the Ministry of Justice pattern which HO teams can re-use for a lot of use cases.
https://moj-design-system.herokuapp.com/components/filter

Isobel Seacombe is considering a similar pattern using accordions for the Ludus service -

One variation ion the MOJ version is that the filter flags which filters are selected but not what the filter values are. So, I might filter by Status = New case but the summary will only show Status (remove)

Karwai developed an example pattern for her Wildcats service -

https://test-mock-wildcat-service.herokuapp.com/list

The main differences are:

• visitors open a filter panel using a show/hide link
• there's no indication which filters are active (although we can modify this pattern to remind visitors they're looking at a filtered view)

Query builder

For the Atlas service Harshna developed a more sophisticated filter which enables case managers to look for specific cases based on searching for partial information such finding a person with only a first name, in a city.

Case managers go through the following steps:

• pick something to filter eg 'type'
• apply a condition - such as a date range or a combination of values. For a 'status' I might pick the values 'new', 'open' and 'for review'
• add a second thing to filter (anecdotally, it seems like Atlas users usually only need one thing to filter at a time)

Typeahead with check boxes

If a data table contains a column which has a lot of potential values (such as: all the countries in the world) designers can use the following pattern:

Case managers use it by:

• typing in an input field to narrow the number of choices down
• selecting a value using a check box
• reviewing their choices, which are displayed beneath the input box. They can remove any they don't need by clicking on a 'clear' button.

User research

We discovered the following tasks from running user research on case managers. These are probably quite common:

• Check for new cases
• Triage new cases and assign them to other case managers
• View cases assigned to me
• Investigate the most urgent cases
• Check other case managers' work during the day
• Complete ad hoc queries (such as 'bring back all the citizens who use our service named Dave in Manchester')

We observed case managers having to use filters to perform basic tasks, such as viewing new cases or seeing their own workload for the day. It's important to offer search and filters for specific tasks rather than relying on them to enable repetitive tasks.

A set of tabs representing the status of each case can act like a filter -

The advantage of this is:

• we can show summaries of the total numbers of cases with each status
• case managers can quickly change between views without clicking on multiple inputs

This component is already part of the NotGov system.

Our case managers tended to multi-task - accessing different government systems through different browser tabs and often through more than one screen. For example, they might check email through one screen and access our service through another. We observed them forgetting filters were active, adding more filters and getting blank results for their table.

Case managers have also used more sophisticated platforms elsewhere in the government. Some of these allow them to save their search critera and share them with other staff.

Accessibility

A lot of the case managers we researched used laptops with Internet Explorer so we need to consider resilient design patterns.
Case managers used both small and large screens. We observed a case manager who worked from home and had bought her own 27 inch screen, so we need to be consider responsive design.

HTML

The majority of filters we've seen are input fields or check boxes so there are plenty of examples of accessible mark-up available. Check boxes need to be contained within a fieldset and have a legend for a caption.

<fieldset>
<fieldset__legend>Filter by vehicle</fieldset__legend
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> boat</label><br> 
</fieldset>

We can offer show/hide patterns or accordions for progressive disclosure.
We need to develop accessible HTML and CSS for the typeahead check boxes.

[kelliedesigner]

Hey this is great, just a heads up that we're revisiting filtering again at MOJ, and plan to develop the variations and docs of the component. It would be great to pool findings!

[jamesmckechnie]

Typeahead with check boxes

Accessible React functionality can be taken from Checkbox multi select (for atlassian).

The look and feel of the component should similar to that found onaccessible-autocomplete on alphagov github.

Functionality

When user clicks on the component, they should see all options available.

When user clicks an option, the checkbox will show checked, the option will appear in the text field as a tag and the options list will stay open and a “delete all” cross will appear on right had side.

To delete, user can either:

• press cross on the tag
• press backspace on keyboard to delete last option
• press cross on right hand sixe to delete all

When user navigates away, the options will remain inside the select component and select component will revert back to default styling.

User research

This component is currently being researched and accessibility tested in its project.

[kelliedesigner]

Here's out latest work on Filters that we will be looking to publish in the MOJ Pattern Library:
ministryofjustice/moj-frontend#197

[kelliedesigner]

The latest documentation on Filters has now been published to the MOJ Pattern Library:
https://design-patterns.service.justice.gov.uk/components/filter/

Feedback welcome!

[reyrrep]

@jamesmckechnie hello, you said earlier 'This component is currently being researched and accessibility tested in its project.' Do you have any news yet?