search

hmrc / design-patterns

Documenting HMRC design patterns
http://hmrc.github.io/assets-frontend/
MIT License
32 stars 4 forks source link

Add to a list #31

Open rpowis opened 7 years ago

rpowis commented 7 years ago

Screenshot

image

stevenaproctor commented 7 years ago

@gavinwye This looks like a combination of #25, #23 and #35 but the hint text is in the wrong place and the month looks like it should be written in full.

jennifer-hodgson commented 6 years ago

This from CATO cato

jennifer-hodgson commented 6 years ago

This from Register a company Prototype: https://www.prototypes.tax.service.gov.uk/business-registration-prototype/1-58-0/incorporation/shareholders/summary-1.html

web incorporation service prototype

gordonmcmullan commented 6 years ago

Discussion Summary from the hackday

img_20180316_150216

img_20180312_133137

adamliptrot-oc commented 6 years ago

image Here an initial screen indicates the user is about to interact with an add-to-a-list pattern. They then add the first item. A small check-your-answers is displayed to confirm the data collected from adding the item before returning the user to the list (now populated with the item along with change and remove options) and asking the user if they want to add more or continue with the rest of the journey

stevenaproctor commented 6 years ago

@jennifer-hodgson I just remembered this DWP version. https://dwp-patterns.herokuapp.com/additemstoalist

stevenaproctor commented 6 years ago

Similar to Edit a list on the GOV.UK Design System backlog. I think it is similar enough to merge.

jennifer-hodgson commented 6 years ago

Yup - think we should upstream our variant

jdworks commented 6 years ago

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.

jennifer-hodgson commented 5 years ago

Published on HMRC design library http://hmrc.github.io/assets-frontend/patterns/add-to-a-list/index.html

Is this the wrong link? If not, I think it's confusing to be linking off to the old HMRC Design System site.

I have deleted the comment, but i also linked to the old design system on the GOV.UK issue. I dont think we can send links to our prototype on github.

mikeash82 commented 5 years ago

Added to the Edit a list pattern on GOV.UK issues backlog

jennifer-hodgson commented 5 years ago

Published on HMRC design library http://hmrc.github.io/assets-frontend/patterns/add-to-a-list/index.html

Is this the wrong link? If not, I think it's confusing to be linking off to the old HMRC Design System site.

I have deleted the comment, but i also linked to the old design system on the GOV.UK issue. I dont think we can send links to our prototype on github.

Comment seems to be still appearing for now. My concern is that it's confusing for users and spreads things across two design systems. I know it's an interim solution before we publish publicly but I think we should avoid.

mikeash82 commented 5 years ago

Published on HMRC design library http://hmrc.github.io/assets-frontend/patterns/add-to-a-list/index.html

Is this the wrong link? If not, I think it's confusing to be linking off to the old HMRC Design System site. I have deleted the comment, but i also linked to the old design system on the GOV.UK issue. I dont think we can send links to our prototype on github.

Comment seems to be still appearing for now. My concern is that it's confusing for users and spreads things across two design systems. I know it's an interim solution before we publish publicly but I think we should avoid.

yes good point. We can add links when we have a more permanent home for out design library.

jennifer-hodgson commented 5 years ago

Reopening this as we're working on this in-house in response to discussions within the design community.

a184studio commented 5 years ago

What happens when you try to remove something, does it have "are you sure" prompt?

mrkwrght commented 5 years ago

@a184studio we ask if 'are you sure' on a different page when you click remove on our service

a184studio commented 5 years ago

This from Register a company Prototype: https://www.prototypes.tax.service.gov.uk/business-registration-prototype/1-58-0/incorporation/shareholders/summary-1.html

web incorporation service prototype

@jennifer-hodgson What happens when you remove an item? Is an ‘Are you sure’ needed? Is it an undo prompt after it’s deleted?

https://github.com/hmrc/design-patterns/issues/31 There is a remove link in here but it doesn't show what happens.

Any thoughts?

jennifer-hodgson commented 5 years ago

Hi @a184studio - appreciate the feedback. We're working on this pattern at the moment - we'll feed in your questions.

a184studio commented 5 years ago

@jennifer-hodgson This is what I have so far. ezgif com-video-to-gif (2)

a184studio commented 5 years ago

Our current design for adding a number of related items that need to be cross referenced throughout:

Adding — Add in a type — Add in more of this type — If no more of that type, move on (There is about 12 types in total)

MSICdevelopment

a184studio commented 5 years ago

Removing or changing

MSICdevelopmentremovechange

a184studio commented 5 years ago

Next steps — Totals to calculate and give a running total — Multiple entries based on date (Currently only add one data point) — Waiting for GDS to allow to change text for Open/Close so we can make ours say Show/Hide.

Other things we need to consider — We needed to be able to add accounts for both the Claimant and their partner — Account reference numbers (Last 4 digits for example)

jonathaninch commented 4 years ago

In some scenarios - e.g. the 3 directors example given on the pattern - it might be worth considering using 'View' as the link instead of 'Change'. A user might not want to make changes, but just see the info held for that particular director.

On our pension service, we have users who enter pension details and then get a colleague to check the details are correct before everything is submitted. In this case, we have seen users concerned that by clicking 'Change' they may be forced to alter what their colleague has already input, instead of just being able to view it.

R-Derby commented 4 years ago

The current and latest version of the add to list in Register and Maintain a Trust service. That covers adding people, organisations and assets.

Tested with 80~ users in alpha and private beta. Individual and agents. 4~ of which were using accessibility software. jaws users, read & write gold, Dragon NaturallySpeaking.

We have an "add to page" for each major section of the register, that is accessible from a task list.

We started with the design pattern and iterated to the current version. image

Key iterations:

Change/add/remove

add to page - adding and changing removing

Status tag control

add to page - status tags

Completed/in-progress list

add to page - completed - in progress 2

If an in progress is present in the add to list page. the status tag control is removed to always be in progress. User expected this behaviour. This also prevents any accident submissions of incomplete data.

ladine-cook commented 4 years ago

@R-Derby Is there any limit to the number of things you can add in trusts? For example, a maximum of 10 beneficiaries. If so, what does that design look like when the user has added the last one or tries to add another?

adamliptrot-oc commented 4 years ago

@ladine-cook Our original implementation on PODS just replaced the "Do you want to add another" Y/N option on the list view page (final screen on this comment https://github.com/hmrc/design-patterns/issues/31#issuecomment-373729663) with a message along the lines of "You have added the maximum of 10 directors" then a continue button.

R-Derby commented 4 years ago

@ladine-cook Yes, if a limit is reached, the questions "Do you want to add another" is removed (like PODS). Then replaced with an Inset text with content saying they have reached the limit of X and if they need to add more they must remove X or contact HMRC. As well as a green button to continue. In our case, the button will take the user to same as if they said No to the question (back to a task list).

image

adamliptrot-oc commented 3 years ago

Having the list rows marked up in the current way (a list item with the items within in spans) can be improved by moving to a definition list pattern (as used elsewhere, for example in the summary list pattern on Gov Frontend). This would in particular help JAWS users who utilise the list items dialog. With the current markup the list item is displayed as one thing.

Screenshot 2021-03-11 at 11 07 04

Whilst with a definition list the key (dt) is used as the dialog reference making the list easier to navigate. Semantics-wise it is a somewhat clearer indicator of the relationships in each row.

Screenshot 2021-03-15 at 17 56 48

Suggested markup:

<dl class="hmrc-add-to-a-list hmrc-add-to-a-list--short">
    <div class="hmrc-add-to-a-list__contents">
      <dt class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Sydney Russell
      </dt>
      <dd class="hmrc-add-to-a-list__change">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Change</span>
          <span class="govuk-visually-hidden">Change Sydney Russell</span>
        </a>
      </dd>
      <dd class="hmrc-add-to-a-list__remove">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Remove</span>
          <span class="govuk-visually-hidden">Remove Sydney Russell from the list</span>
        </a>
      </dd>
    </div>
    <div class="hmrc-add-to-a-list__contents">
      <dt class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Michael Cain
      </dt>
      <dd class="hmrc-add-to-a-list__change">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Change</span>
          <span class="govuk-visually-hidden">Change Michael Cain</span>
        </a>
      </dd>
      <dd class="hmrc-add-to-a-list__remove">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Remove</span>
          <span class="govuk-visually-hidden">Remove Michael Cain from the list</span>
        </a>
      </dd>
    </div>
    <div class="hmrc-add-to-a-list__contents">
      <dt class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Jeremy Winter
      </dt>
      <dd class="hmrc-add-to-a-list__change">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Change</span>
          <span class="govuk-visually-hidden">Change Jeremy Winter</span>
        </a>
      </dd>
      <dd class="hmrc-add-to-a-list__remove">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Remove</span>
          <span class="govuk-visually-hidden">Remove Jeremy Winter from the list</span>
        </a>
      </dd>
    </div>
  </dl>
oscarduignan commented 3 years ago

Two changes proposed to this component, decision record has been drafted in hmrc-frontend pull request which has more context and some pros/cons to review before we make a decision. I will arrange a meeting for later this week (calendars permitting) to make a choice after people have had a chance to feed back anything they want:

kelliedesigner commented 3 years ago

MOJ have published a new pattern called 'Add to a list': https://design-patterns.service.justice.gov.uk/patterns/add-to-a-list/

Comments and feedback can be made on the GitHub Discussion: https://github.com/ministryofjustice/moj-frontend/discussions/203

nubz commented 1 year ago

The navigation of the Add to a list pattern is not immediately obvious in a couple of use cases:

  1. When a user removes the last item from an optional list what screen should be shown on submission of the final removal confirmation?
  2. When a user removes any item from the list what screen should be shown when selecting the back link in the list view?
Jon-Rowe-HMRC commented 1 year ago

Hi @nubz an 'Add to list' discussion has been added to the next Design Resources Working Group meet-up agenda (with Adele Rotella).

Feel free to join us at 1pm 3/3/23 https://meet.google.com/ept-fkcd-dpu if you can.

joshhumphreys commented 1 year ago

Hello,

We have used the 'add to a list' pattern alongside pagination recently on our HMRC project. Here are some of the recent findings from our latest round of user research with 6 users. For context, the user is taken to this page after uploading a file containing member information. There is also the option for the user to enter each member manually.

Add members

BoabaFett commented 10 months ago

Minor point. We've tested add to a list in a lot of research sessions and users easily understand it. We have a use case where we want to show both a key and a value on the same row - eg The warehouse, 18 GG1 8YY and an amount paid for the building, £123.

image

This works when I use the hmrc-summary-list__key class: twice. 

<dt class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
   The warehouse, 18 GG1 8YY
</dt>
<dd class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
     £123
</dd>

However, for the second value it seems like I should use <dd class="govuk-summary-listvalue govuk-!-font-weight-regular hmrc-summary-listvalue">

I don't think this is available in the hmrc CSS though. Suggestions welcome.

shabana-ali commented 9 months ago

I raised a point on the GOV.UK summary list backlog relating to 3 column widths that may need to be taken into consideration when looking at this comment regarding having key and value in add to list pattern.

timsb commented 9 months ago

@BoabaFett Thanks for this. As you say, having two elements with the hmrc-summary-list__key class works fine. I have noticed that if there is a mixture of rows with two and three columns then the layout breaks. We're looking into this and seeing if there are any alternative ways of styling the component.

@shabana-ali Is this comment the one you're talking about? We'll keep it in mind with any updates.

jeana-adhoc commented 7 months ago

Hello all - I'm researching an "add to list" pattern for my teams usage, and I'm wondering what happens when all of the list items are removed from a screen like this?

image

Does the form return to the first page of the list? Asking for them to add another one? Or, are you now removing the "delete" button if there is only one list item?

a184studio commented 7 months ago

Hi Jeana,

If there is no data in a list then there should be not be a list. It should probably be an opening question of ‘do you need to add an XYZ’ (optional) or ‘Add XYZ’ (mandatory)

If 3 data items were in a list, and all removed, post submission of final entry, you should be taken to ‘do you need to add XYZ’ (if optional) or ‘no XYZs added, Add XYZ’ if mandatory

jeana-adhoc commented 7 months ago

Thanks @a184studio - You're touching on the struggle we're having. If all of the items are removed (with destructive modal notifications), but at least one is required, I think I want to return the user to the first page of the "list" where they add items, and add an alert saying at least one is required. OR I could leave them on the same page where the list was previously add an alert saying "no xyz's were added. Add XYZ", and then the continue button leads them to the first page of the list data collection. I can see pros and cons of both.

a184studio commented 7 months ago

Hi @jeana-adhoc

For me if it’s mandatory to add at least one item to a list then it’s a mandatory action. That has optional additions and there for can only becomes a ‘list’ if more than one item is entered.

For example.

Q1 > Q2 > Q3: Add ‘mandatory item’ > Q4: Do you need to add anymore items Y/N

—

N > Q5

—

Y Q4a: Add Item2 >

List page (Mini checkYourAnswers) CYA: Do you need to add another data item Y/N

if you remove Item2 one remains. if you removed item2 and item1 then no items remain, prior to that you will need to add a page to say.

“You are about to remove the last item, the service needs at least one item to continue”

I would say, investigate the CardPatten with AddChange and remove cards from a Mini CYA page

I’m out of the country at the minute but happy to talk more when I return.

JillRichardsonPratt commented 3 months ago

The 'Remove things from a list' pattern seems to have a small mistake - it has a serif font for the 'No' radio label. image

Jon-Rowe-HMRC commented 3 months ago

@JillRichardsonPratt thanks, we'll update

timsb commented 2 months ago

The 'Remove things from a list' pattern seems to have a small mistake - it has a serif font for the 'No' radio label. image

@JillRichardsonPratt we've updated the example. Thanks for letting us know!