Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Edit a list #21

govuk-design-system opened this issue Jan 12, 2018 · 17 comments

Edit a list #21

govuk-design-system opened this issue Jan 12, 2018 · 17 comments


Copy link

@govuk-design-system govuk-design-system commented Jan 12, 2018


A list of items that can be edited and added to. Actions can be performed on one or more items in the list (eg. delete, archive).



@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (Agreed) Jan 12, 2018
Copy link

@timpaul timpaul commented Jan 25, 2018

Some things to consider:

  1. Do you show people the empty list first, or go straight in to adding the first item?
  2. Do you show people the list after each addition, or go straight into adding another?
  3. Do you ask people how many things first and then give them a UI for that many things?
Copy link

@joelanman joelanman commented Jan 25, 2018

Example from register to vote (second question in the service)


@owenm6 owenm6 self-assigned this Jan 30, 2018
@timpaul timpaul added pattern and removed candidate labels May 21, 2018
Copy link

@gordonmcmullan gordonmcmullan commented Jun 15, 2018

We have documented a version of this in HMRC: (the current markup is based on elements, we're working on a version based on govuk-frontend)

This implementation has been synthesised by combining some existing designs and will undergo some user research in the service which is piloting it.

Copy link

@mikeash82 mikeash82 commented Nov 27, 2018

We have documented a version of this in HMRC: (the current markup is based on elements, we're working on a version based on govuk-frontend)

This implementation has been synthesised by combining some existing designs and will undergo some user research in the service which is piloting it.

@jdworks commented on 26 Oct

We tested this pattern (with a couple of slight changes) with agents last week:

screenshot 2018-10-26 at 13 34 58

Context: agents use the service to build an authorisation request for their client, and they add tax services to the request one at a time before sending it to their client.

We needed to include the name of the client and the service they were requesting authorisation for in the table for it to make sense to the user. Regarding CTA's, 'change' is not an option since it's not technically possible to change the request once it's been created, though it can be deleted before the agent sends to the client. Contrary to the screengrab above, the version we tested used the word 'delete' instead of 'remove', though after the testing we changed the wording to the softer sounding 'remove' as we felt it fitted the use case better: "remove a pending request" rather than "delete a pending request". We'll see how this tests in the next few weeks.

Overall the pattern worked well. Users understood the page straight away and were happy with what the table was showing, and understood the calls to action.

Copy link

@ladine-cook ladine-cook commented Mar 20, 2019

We tested the HMRC version of 'Add to list' which has been added to this issue. We tested it in a service that is for internal HMRC users, I hypothesis that the findings would be different for external users.

Radio button fail
We discovered that the radio buttons to add additional things caused confusion:

  • two users missed the yes/no question and tried to click ‘Save and continue’ before proceeding
  • one told us he did not see the point of asking this additional question:
    “I don’t see the purpose of this no button. You’ve got save and continue here, I imagine that does the same thing as no” - P4
    -another told us:
    “Yes no question is a lot less convenient because you have to click something” - P1

Link/radio button test
Option 1

Option 2
(I can't share examples of my service in the public yet, so the images show a generic example.)

We tested the 'add to list' pattern using a link instead of radio buttons in our prototype to see if it was usable. At the end of the test, we showed users both options (randomised) to gather direct feedback:

  • option two tested better in the prototype: all four users had no issues using it.
  • when asked, all 3 users said they preferred option two:
    “It is a lot easier to use than the radio buttons and looks neater” - P1
    “It takes out a step” - P3
Copy link

@benwakefield benwakefield commented Mar 21, 2019

We're working with the Secure Data Exchange Service (SDES). When creating a data exchange request our internal users need to:

  • quickly add numerous organisations (20-30 is common) to the request and
  • return to the list frequently to add new organisations or remove existing ones
    so that data can be transferred securely in and out of HMRC

After feedback from our RAD, we are testing 2 methods to discover which method:

  • is fastest to complete a data entry task with 100% accuracy
  • is easier to use

Method 1
UI displays the data input and plays back the selection on the same screen


Method 2
Separate UIs for the add data and review data screens, closer to existing pattern

Screenshot 2019-03-21 at 10 29 33

Screenshot 2019-03-21 at 10 31 15

Copy link

@edwardhorsford edwardhorsford commented Mar 22, 2019

We're about to prototype / test a hub and spoke pattern like this. Based on this thread and conversations on Slack, I came up with this:


In the prototype the initial 'do you have x?' and 'hub' are separate pages - but I've since realised it could just be the same page. If you come to the hub and there's no 'things', then it asks if you want to add a thing - else it shows a list of the things.

In the example we're doing file uploads on a single page because that's how our app currently works. I think we'll move towards it being more of a wizard flow - we collect the file or files, then we ask for metadata on them, then we replay the file(s) on the hub page.

Copy link

@benwakefield benwakefield commented Mar 26, 2019

We also looked at this add-to-list method for internal users, (comments from Chris Moore) works with JAWS and VoiceOver for iOS. It does not indicate something new has been added when using a Mac, but currently no Mac users internally.
Screenshot 2019-03-26 at 09 49 37

Copy link

@edwardhorsford edwardhorsford commented Mar 26, 2019

I thought I'd share how my service currently / previously does repeating things, which has been problematic and we'll be moving away from.

Screenshot 2019-03-26 at 12 18 56

In this one, when adding a thing, at the end of the page you're asked if you have more of that sort of thing. Answering yes repeats the current page.

This has been very problematic in user research. If users don't understand the question blindly, when they continue they get an identical page to the one they were just on. They either think something has gone wrong and they're being asked to fill in the same page again, or they're confused. I think the lack of seeing their 'work' build up really hurts - you need to see the progress and what's happened - repeating the same page immediately after the previous one is too confusing.

Copy link

@a184studio a184studio commented May 31, 2019

@ladine-cook / @timblair / @aliuk2012 Does anyone have a video of what happens a the point of removal. This there a "are you sure" warning?

Copy link

@timblair timblair commented May 31, 2019

Does anyone have a video of what happens a the point of removal. This there a "are you sure" warning?

I'm assuming you meant to tag @timpaul instead of me?

Copy link

@a184studio a184studio commented May 31, 2019

@timblair sorry. Yes. @timpaul

Copy link

@mbillingsleyCO mbillingsleyCO commented Nov 28, 2019

Hi everyone, I'm working on a project where users need to add names of family members (mums, dads, siblings etc), followed by adding further info about them (addresses, birth details etc). It’s likely users won’t have this info to hand and will need to return to fill in the gaps.

We are thinking about using add to list pattern to add the names of the people, and then presenting users with the additional questions (patterns) within the list they've added.

This list could be quite long which could get quite long if you have lots of siblings, but from initial user research we've heard users say they would want to see all their people together and to empty their heads of all the names they need to declare, so they don't miss anyone.

Does anyone know any similar examples we could learn from? Or have any bright ideas of how to make this neater? Hub and spoke has been suggested on Slack but looking for any other ways of taking this forward. Thanks

Copy link

@a184studio a184studio commented Nov 28, 2019

@mbillingsleyCO Hi Matt, Swap the people for bank accounts and we are doing something similar.

We have used the accordion and a radio question to do this achieve this. See GitHut issue: #1 (comment)

We will also be using something like this when we are adding people to the household. (We have not had a change to work on this section yet).

Happy to talk more. It's tested pretty. We have done a bunch of testing and it's currently live in our private beta for Pension Credit. I've got a bunch of videos, but can also screen share.


Copy link

@aliuk2012 aliuk2012 commented Nov 29, 2019

Hi @mbillingsleyCO @a184studio,

On Digital Marketplace we have a list entry component which allows our users to add a list of requirements buyers have from suppliers.

I am in the process of rewriting it so that it's compatible with govuk-frontend and follows the same conventions used in govuk-frontend. There

Heres a preview of the existing component:
Nov-29-2019 08-00-38

Heres an example of error message but I think this could be improved by also highlighting the actual input that failed validation.


Copy link

@mbillingsleyCO mbillingsleyCO commented Nov 29, 2019

@a184studio @aliuk2012 thanks!

Interesting to see the sentence at the bottom of the page "Mark as in progress". How does that work and does a label appear somewhere to show it is in progress?

I like the quick way of adding to task lists, but is there a way to see additional tasks based on the items you've added to the list. For example: you add an account/person to a list and then you see the person in the add to list view, where it then shows more 'tasks' to do within the list which is a launchpad for more questions and possibly other add to list patterns that help the user fill out information about the thing they've added. Have you explored anything like this before?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked pull requests

Successfully merging a pull request may close this issue.

None yet