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

Open
govuk-design-system opened this Issue Jan 12, 2018 · 4 comments

Comments

6 participants
@govuk-design-system
Collaborator

govuk-design-system commented Jan 12, 2018

What

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).

Why

Examples

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

@timpaul

This comment has been minimized.

Contributor

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?
@joelanman

This comment has been minimized.

Member

joelanman commented Jan 25, 2018

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

image

@owenm6 owenm6 self-assigned this Jan 30, 2018

@joelanman joelanman added the candidate label Apr 4, 2018

@timpaul timpaul added pattern and removed candidate labels May 21, 2018

@gordonmcmullan

This comment has been minimized.

gordonmcmullan commented Jun 15, 2018

We have documented a version of this in HMRC: http://hmrc.github.io/assets-frontend/patterns/add-to-a-list/index.html (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.

@mikeash82

This comment has been minimized.

mikeash82 commented Nov 27, 2018

We have documented a version of this in HMRC: http://hmrc.github.io/assets-frontend/patterns/add-to-a-list/index.html (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.

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