Add pattern - Add to a list

[kelliedesigner]

Discussed in #203

^{Originally posted by kelliedesigner July 6, 2021}

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

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

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.