Add to a list (Add another)

[kelliedesigner]

Existing

Published components and patterns

• Add another component in the MOJ Pattern Library.
• Add multiple things pattern in the Home Office Design System
• Add to a list HMRC Design Patterns

GitHub discussions

• Edit a list GitHub issue in the GOV.UK Design System backlog

Variation - Add another over multiple pages

Product name - Apply for legal aid (private beta)

What the product does - Helps providers/applicants apply for legal aid

Who the users are - Who the users are: Providers/Applicants

What the user need is for this variation
Providers need to be able to declare whether their client's have dependants and if so, they need to be able to add more information about each of these dependants. Users want to be able to amend or remove information at this point in the service, in case they got the information incorrect.

Using the existing component

Before designing a variation, the team first followed the guidance of the Add another component in the MOJ Pattern Library.

Research showed:

• Users would add many more items to a page, causing performance and validation issues.

Designing a variation

The team used their research to design a variation of the component that would meet the user need.

This variation:

• Asks the first question
• Displays the answer to the question for users to check
• Asks if they want to add another of the same type of information

If they say Yes users will go through the same loop, otherwise they will proceed to the next question.

Question page	Check answer page

Remove answer page

Research on this variation

This variation:

• has been usability tested
• has had an external accessibility audit with Digital Accessibility Centre (DAC)
• is working in a live service

Guidance

Add another (existing component)

https://design-patterns.service.justice.gov.uk/components/add-another/

When to use

Use this component when users need to add similar information a couple of times, such as several names for a single application.

When not to use

If users need to add information many times, it may cause performance and validation issues as the page will get very long. In this case, you should use the Add to a list.

Add to a list (new pattern)

Important
Other departments have a similar pattern
Add to a list in HMRC Design Patterns and Add multiple things in the Home Office Design System have a similar function and visual design to this component, and includes some guidance on when to use it.
This component is in the GOV.UK Design System community backlog for review.

When to use

Use this pattern when users need to add similar information many times, and check and add more if needed.

When not to use

Do not use this pattern when users need to add different kinds of information that do not relate to each other.

If users only need to add information a couple of times, consider using Add another.

How to use

Question page

Use a question page to ask users for information you need within your service. This is the information that users may need to add many times.

Use components that best suit the information you need, such as text inputs or radios.

List page

Use summary list to let users view a summary of what they have added to the list.

You may want to add these links to the summary list:

• 'Change' link to change things on the list
• 'Remove' link to remove things from the list

If you use a 'Remove' link, you should ask the user to confirm they want to remove something from the list.

Use radios to ask users if they want to add things to the list. Use their answer to send users back to the original question or move them to the next question.

Contribute

Things we don't know enough about

Size of page title and question on check your answer page

Should we:

• Have the page title large and the question small or vice versa, see example screenshots above.

[kelliedesigner]

Product name

Claim for Crown Court Defence (CCCD)

Using the existing component

Research showed:

• Some users were adding 50+ items to a page, for example when solicitors were claiming for travel to court hearings and the trials were long. This was causing performance and validation issues.

[kelliedesigner]

Product name

Deputy filling in an annual report

Using the existing component

• Users want to be able to complete information in a non-linear order, for example bank accounts, gifts, money transfers.

[kelliedesigner]

Issue created - Add pattern - Add to a list #218

[kelliedesigner]

PR merged - Add pattern - Add to a list #219

[martinwake]

Use radios to ask users if they want to add things to the list

What's the reason to prefer radios here over a secondary button as used in the MoJ 'Add another' pattern? There are a couple of reports in the GOV.UK backlog item of usability problems with radios in this context.

[f-marry]

I think there might be room to improve, either the button labels (submit is also not used anymore) or their placement. Having them so close to each other make them appear like they’re on the same level, and you have to pick one or the other. I’d probably also have some hint somewhere”You can add up to x adresses”
I get most users will figure it out, possibly having to press back if they continued before adding. Just feels like a bit more thinking is required than usual.

Here's a quick mock up of what I mean:

[robertjmccarthy]

Amazing suggestion @f-marry. Thanks for contributing.

The 'Add another' component is on our roadmap to improve, but it's not in the team's immediate future. When the team comes to improving this component, your suggestion will form part of the discovery work.