Add... 'another' / 'to a list', Edit/Change... Remove

[itsmestevey]

What

Add... 'another' / 'to a list' component/pattern allows the user to add content in a field/fieldset on a page, or as separate pages, multiple times. It also allows users to 'Change' or 'Remove' content that has been added. Usually in the location of where the user is in the service, as opposed to at the end of the service on the 'Check your answers' page.

Why

There are multiple different government department design systems/and backlog issues that include this component/pattern in different ways... so it is currently unclear on what the standard/guideline is to follow. See examples below:

Add another
https://moj-design-system.herokuapp.com/components/add-another
Use the add another component to let users add multiple items of the same thing.

When to use:
Use the add another component when you need to let users enter variations of information multiple times, such as several names for a single application.

When not to use:
Don’t use the add another component if you need to let users enter information which varies differently or is not similar. Or if one field is dependent on the answer to the previous.

Observation: Never has a summary list. Could add/remove a field or fields. Takes place on one page.

Add to a list
http://hmrc.github.io/assets-frontend/patterns/add-to-a-list/index.html
This pattern lets the user add information with more than one part to a list.

When to use:
Use this pattern when the user needs to add information with more than one part to a list. For example, when they need to enter more than one address or more than one person’s details.

When not to use:
Do not use this pattern when the user needs to add different kinds of information that do not relate to each other.

Observation: Always has a summary list. Could add/remove a field or fields. Takes place across multiple pages (multiple loop?).

Multiple loops
https://design.homeoffice.gov.uk/patterns/multiple-loops
An interaction that allows a user to add multiple items, check and add more if needed.

When to use:
This interaction allows a user to add single or multiple items, check they are correct, and an option to add more. This pattern can be used to add people to an application, add items to a list, or uploading files.

The above examples are associated with the following components Summary list, Fieldset and Text input.

• What evidence do you have that it's needed by multiple services across government?

There is evidence that this component/pattern is already being used across government in different ways e.g. MoJ, DWP, HMRC. I have started to do an audit of this at - https://airtable.com/shr8lgMpxw7WJbCPr. I would be keen to find out if there is anyone else across government using similar.

• What evidence do you have that it meets the needs of the users of those services?

Across the service 'Get legal aid: Apply' 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. This helps the Legal Aid Agency determine whether the applicant can get legal aid.

When we tried this out with users, they wanted to be able to amend or remove information at this point in the service, in case they got the information incorrect but could only do this on the 'Check your answers' page at the end of the service. Hence we needed to look for components/patterns that would allow this to take place. Here is our latest design/prototype -

Design exploration: https://www.figma.com/file/k9ufVUyGvsxEnuN9uwi8Mw/Add-another?node-id=238%3A2
Prototype: https://apply-for-legal-aid-prototype.herokuapp.com/stevey/addtoalist/dependants (u: apply p: prototype)

We are in the process of iterating this in the build of our service.

• Have you checked that it doesn't already exist in the GOV.UK Design System?

This component/pattern does not appear to exist in the GOV.UK Design System, but it does appear elsewhere in design systems across government as mentioned above. Here are some links to some of the backlog issues that have previously been raised across different github backlogs, which I believe are associated to the same component/pattern - but have somehow not been concluded/resolved:

Edit a list: #21
Summary list: #182
Add items to a list: https://github.com/dwp/design-examples/issues/25
Add to a list: hmrc/design-patterns#31

Anything else

Example of the patten in our service

[hannalaakso]

@itsmestevey Thanks for raising this 🙌

Could you please check if this is a duplicate of #21? If it is, would you mind adding your comment to that issue instead and closing this? 🙏

[itsmestevey]

@hannalaakso If 'Edit' suggests 'Add, Change + Remove' along with adding, editing, removing fields/fieldsets to a page/multiple pages, then yes. I'm just not sure whether 'Edit a list' is the correct name for the pattern that this would eventually form? Let me know what you think.

[hannalaakso]

Thanks for the feedback @itsmestevey 👍 We'll take a look at #21 as a team to see if its scope could be expanded.

[itsmestevey]

@hannalaakso I think this is 'Add, change and remove a field/fieldset to a page, or to multiple pages' not the fanciest of titles :D. I realise the design we went with / attached in our service doesn't do all of these things, e.g. it only does add, change and remove a fieldset to multiple pages, but it feels like we need some kind of guidance here on the GOV UK Design System. Hope this helps.

[christopherthomasdesign]

Hi @itsmestevey. I’ve had a read through the two related issues and think there is too much overlap for them to be considered separately at this stage.

I agree that the name ‘Edit a list’ doesn’t clearly cover the scope of issue #21. If someone picks it up as a possible pattern or component, it’ll be part of the work to do things like:

• decide what kind of actions (e.g. add/remove/edit//archive) should be included
• whether it should happen on one page or multiple pages etc.
• name it as descriptively as possible

I’m going to close this issue. It will still be available to view @itsmestevey if you want to take your comments and move them to #21 – there’s some really useful analysis here that will be a big help to whoever works on this in the future. Happy to help with this if you’re not sure how.

[paulrobertlloyd]

Perhaps worth adding that the final screen in your example @itsmestevey might be a good candidate for using the summary card proposal made in #210. This pattern comes from a similar place that proposal comes from; adding multiples of a thing, and having to review them in one go at the end of a process.

[dominichurst-ur]

This is slightly related but has anyone had the need to copy/ duplicate an item (as well as delete, change, remove..)

[joelanman]

hi @dominichurst-ur this issue is closed, you might get more response on the similar open issue Edit a list