File upload

[klaudiarybicka]

File upload

Overview

We are working on a new file upload pattern for the HMRC Design Resources. Our services require some upload features not included in the GDS file upload component. Our goal is to improve the consistency and usability of our solutions.

Some considerations

• option to change/delete file
• multiple file upload
• "choose a file button" vs "drag & drop" field vs file URL
• progress bar/spinner + reading the status back while using screen readers
• feedback on whether the file format is correct
• success and error messages
• if the format or file size is wrong: instructions or more info
• file name/description: is the option needed? if so, text input or dropdown menu?
• name of the pattern
• various user abilities to change the format or reduce file size
• a few "choose a file" buttons on one page vs asking the user whether they would like to add another file
• acceptable file formats: always visible vs dropdown
• file preview: is it needed?
• a separate information on the page that some files are still uploading, especially for screen readers
• compatibility with UpScan: each file has to be uploaded individually, error message has to be on a separate page, supports maximum 100MB files

Existing components or patterns

GOV Design System

https://design-system.service.gov.uk/components/file-upload/

Ministry of Justice

https://design-patterns.service.justice.gov.uk/patterns/upload-files/

Examples of services using file upload

• Send documents for a customs check
• Valuation Office Agency
• Penalty reform
• Claim for reimbursement of import duties
• Gforms
• NIDAC
• CDS

Relevant discussions

File upload on GitHub

alphagov/govuk-design-system-backlog#49

Upload files on GitHub

#68

GOV.UK blog post

https://designnotes.blog.gov.uk/2017/02/14/some-design-tips-for-uploading-things/

MOJ multi-file upload on GitHub

ministryofjustice/moj-design-system-backlog#1

NHS file upload on GitHub

nhsuk/nhsuk-service-manual-community-backlog#93

Existing research

• some users struggle with the GDS pattern as they needed a list of the files uploaded (are they going to lose their progress if they continue?)
• the users expect the file upload element to follow familiar standards and conventions
• the users need information on what kind of files they need to upload
• it feels most natural to upload the documents during the same step - once they uploaded all their files, the question whether they would like to upload more confused the users
• the examples and information on file size and format were useful
• the users find it confusing to indicate beforehand how many files they would like to upload
• a shorter journey is beneficial, the users want to be taken directly to the upload page
• if there is an error, the users want to know which file caused it
• asking the users what kind of file they want to upload can lead to confusion
• when using the "change" option, it is essential to allow the users to change only one file, not all of them from the beginning
• a confirmation of the files being submitted is an important reassurance, the users find it useful
• any assisting links need distinct, easy to understand names

[richardhattonUX]

Has there been any accessibility testing on this pattern?

I can see in one example it uses aria-live="polite". I wonder how well each stage of the upload process is announced by screen readers when multiple states are happening at once.

Also wondering how errors are announced when multiple files are uploading?