Pattern: bulk upload

[zoeflanagan]

Example use case: A journey where user’s bulk create multiple records by uploading a CSV file. The table highlights the errors and their location within the CSV file to help the user with error correction.

This pattern has been used on an internal case working system to show multiple errors with in a CSV by using a table within an error component.

This pattern combines the GOV error message and summary components and the table component. The table uses shared rows (link to page about shared cells).

https://design-system-experiments.herokuapp.com/error-table

User research

This table has been through one round of testing with 6 users.

Findings:

Good:

The error description with location of cell number performed well with most participants able to find the errors quickly and easily.

Most participants completed this task by locating errors through the cell number and understanding the issue from the description with ease and speed.

Needs more research:

There was some awkward looking behaviour observed when trying to overlay the spreadsheet on the prototype screen to keep track of what cell they were looking for.

‘Includes an invalid character’ caused some hesitation and confusion when presented with a cell that included a slash and comma as participants weren’t sure whether the system would accept both. We would recommend being as specific as possible in the error descriptions.

The table wasn’t within the error component in the original design and users had to navigate back to the upload screen by clicking a link in order to upload the file again. The latest iteration places the table within an error component so that users do not have to navigate to another page to upload the file again.

Accessibility

The table needs to implemented using the correct structure for tables https://design.homeoffice.gov.uk/accessibility/tables

See shared row table for implementation.

The error descriptions need to be specific enough for users to know what they need to do to correct them.

Code

HTML

Needs to be reviewed by developer and accessibility consultant

<div class="govuk-form-group govuk-form-group--error"> 

  <table class="govuk-table"> 

    <caption class="govuk-table__caption govuk-table__caption--m">Error summary</caption> 

    <caption id="table-error" class="govuk-table__caption govuk-error-message"> 

      <span class="govuk-visually-hidden">Error:</span>There are one or more errors in your file. Fix them and upload it again. 

    </caption> 

    <thead class="govuk-table__head"> 

      <tr class="govuk-table__row"> 

        <th scope="col" class="govuk-table__header">Row</th> 

        <th scope="col" class="govuk-table__header">Identification number</th> 

        <th scope="col" class="govuk-table__header">Cell with error</th> 

        <th scope="col" class="govuk-table__header">Error description</th> 

      </tr> 

    </thead> 

    <tbody class="govuk-table__body"> 

      <tr class="govuk-table__row"> 

        <th rowspan="3" scope="rowgroup" class="govuk-table__header">3</th> 

        <td rowspan="3" scope="rowgroup" class="govuk-table__cell">1234567</td> 

        <td scope="row" class="govuk-table__cell">C3</td> 

        <td scope="row" class="govuk-table__cell">Missing data</td> 

      </tr> 

      <tr class="govuk-table__row"> 

        <td scope="row" class="govuk-table__cell">D8</td> 

        <td scope="row" class="govuk-table__cell">Duplicate</td> 

      </tr> 

      <tr class="govuk-table__row"> 

        <td scope="row" class="govuk-table__cell">F3</td> 

        <td scope="row" class="govuk-table__cell">Invalid character</td> 

      </tr> 

    <tbody> 

    <tbody class="govuk-table__body" style="background-color: #f8f8f8;"> 

      <tr class="govuk-table__row"> 

        <th rowspan="5" scope="rowgroup" class="govuk-table__header">10</th> 

        <td rowspan="5" scope="rowgroup" class="govuk-table__cell">1234567</td> 

        <td scope="row" class="govuk-table__cell">C3</td> 

        <td scope="row" class="govuk-table__cell">Missing data</td> 

      </tr> 

      <tr class="govuk-table__row"> 

        <td scope="row" class="govuk-table__cell">D8</td> 

        <td scope="row" class="govuk-table__cell">Duplicate</td> 

      </tr> 

      <tr class="govuk-table__row"> 

        <td scope="row" class="govuk-table__cell">F3</td> 

        <td scope="row" class="govuk-table__cell">Invalid character</td> 

      </tr> 

      <tr class="govuk-table__row"> 

        <td scope="row" class="govuk-table__cell">M5</td> 

        <td scope="row" class="govuk-table__cell">Duplicate</td> 

      </tr> 

      <tr class="govuk-table__row"> 

        <td scope="row" class="govuk-table__cell">X19</td> 

        <td scope="row" class="govuk-table__cell">Duplicate</td> 

      </tr> 

    </tbody> 

    <tbody class="govuk-table__body"> 

      <tr class="govuk-table__row"> 

        <th rowspan="2" scope="rowgroup" class="govuk-table__header">24</th> 

        <td rowspan="2" scope="rowgroup" class="govuk-table__cell">1234567</td> 

        <td scope="row" class="govuk-table__cell">C3</td> 

        <td scope="row" class="govuk-table__cell">Missing data</td> 

      </tr> 

      <tr class="govuk-table__row"> 

        <td scope="row" class="govuk-table__cell">D8</td> 

        <td scope="row" class="govuk-table__cell">Duplicate</td> 

      </tr> 

    <tbody> 

  </table> 

 </div> 

Additional information

GOV components used:

https://design-system.service.gov.uk/components/error-summary/

https://design-system.service.gov.uk/components/error-message/

https://design-system.service.gov.uk/components/table/

Table edited using accessible code from W3:

https://www.w3.org/WAI/tutorials/tables/irregular/#table-with-headers-spanning-multiple-rows-or-columns[ ](mailto:[email protected])

Contacts:
Zoe Flanagan: [email protected]

Louise Ednie: [email protected]

[LaurencePiercy]

Just posting this error from notify, which also uses a bulk upload. The text guidance / formatting guidance is also structured to generate uniformity in the submission: