Help users to Add another thing
This pattern helps users to add another thing of the same type. Items are added one by one to a summary list page where the user can also change or remove previous items.
Principles
An ‘add another’ journey should:
- help users to keep track of where they are in the process
- validate items one by one
- allow the user to change and remove items before continuing
When to use this pattern
Use this pattern when a user can add more than one item of the same type.
When not to use this pattern
Do not use this pattern to collect information about items of different types. Instead consider using a separate instance of this pattern for each type.
How it works
The basic flow is:
- Question page or pages for an item
- Summary list page with options to add another item, change or remove existing items, or continue the journey
- If a user chooses to add another item they return to the first question page for the new item
For complex items with many fields or with more than one question page, include a Check answers page after the last question and before the summary list page.
This loop can be repeated as many times as your service allows.
This pattern has a working example (choose ‘Order pizza’) and instructions for how to build this flow in your own prototype.
Summary list page
After adding each item, the user is shown a summary list of what they have added so far and can:
- change or remove previous items
- add another item of the same type
- continue to the next step in the service
This uses the GOV.UK Summary list with a ‘Remove’ link added for each item alongside the ‘Change’ link (see how the HMRC Add to a list pattern does this).
The ‘Add another’ button is a standard GOV.UK secondary button which returns the user to the first question page for a new item.
Changing and removing items from the summary list page
On the summary list page each item has a ‘Change’ link and a ‘Remove’ link.
The ‘Change’ link works differently for single page items and multi-page items.
If each item only has one question page, selecting ‘Change’ returns the user to that item’s question page with the previous answers prepopulated.
If each item has several question pages and a Check answers page, selecting ‘Change’ returns the user to the item’s Check answers page. From there they can change individual answers.
Selecting ‘Remove’ on the summary list page sends the user to a question page asking if they are sure they want to remove that item. From here they return to the updated summary list page.
Content
You may need error or validation messages for:
- when too many items are added
- when the user tries to remove the only item
Keep the text of the secondary ‘Add another’ button short. This may mean using a short name for the item you are adding: for example, ‘Add another condition’ rather than ‘Add another health condition to your application’.
Use the same word for an item on question pages, summary list heading and the ‘Add another’ button. For example:
- Add a vehicle
- You have added 4 vehicles
- Add another vehicle
When asking a user for confirmation before removing an item, it can be helpful to include the item name in the radio label, like this:
- Yes, remove [item name]
- No
Technical guidance
Think about how adding or removing items might alter the onward journey. For example removing items might affect eligibility, or a service might pass applications with multiple items to an agent.
Decide which information from each item will appear on the summary list page. It may be useful to show more than one field for each item, for example name and date of birth or vehicle registration and model.
If there is a Check answers page at the end of the overall online journey, think about how items added to the list will be represented there and where the ‘Change’ links from that page will go.
If at least one item is required, consider how the summary list will behave when a user wants to remove the only item. You might decide that this item can only be changed, not removed.
If there is a maximum number of items, make this clear to the user. For example, you might include text to show how many more items can be added and display an error message if they try to add too many items.
Check that your service can make ‘Back’ links work within the Add another loop. If not, consider how users can exit the loop without losing their progress.
Accessibility
On the summary list page, use visually hidden text to give each ‘Change’ and ‘Remove’ link a unique and descriptive name:
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden">Elizabeth Kean</span></a>
There is a known issue with some screen readers and visually hidden text where spaces between words are omitted.
Research
This pattern is based on the HMRC ‘Add to a list’ pattern but we recommend using a secondary button instead of radios to add new items. This follows research from HMRC in 2019 which found usability issues with radios.
Follow this pattern instead of cloning fields on the same screen and then adding all items at once. Research on this approach at Ministry of Justice found that it could cause performance and validation problems; it also makes it more difficult for users to fix validation errors as they go.
Services using this pattern
- Manage Child Maintenance Payments
Other design systems have similar patterns:
Contribute
If you have used or researched this pattern, please let us know what you found so we can make it better for everyone. There is an open discussion for this pattern on GitHub where you can share anything you think might be useful.
We’re particularly interested in:
- research with users with access needs
- how well users can keep track of which item they are adding
Get in touch
If you’ve got a question, idea or suggestion email the Design System team on dwp-design-system@engineering.digital.dwp.gov.uk