# Description
The audit found two main issues with the usability of the upload component used through the service.
- Missing Notifications
When users carry out an action, they expect to be told if that action was successful or not. That is not the case when users upload a document, they are not notified that the upload is successful. It is only when they move to the next page, they can see they have successfully uploaded a document.
A cognitive tester found it a little confusing to see that even though she had uploaded a file page still said no file uploaded.
Image 1. Screenshot shows file selected but not uploaded.
- Error prevention
To minimise errors all required information must be given to a user in text, prior to the submitting a document. The file upload areas in this website do not inform the user of the file type required. It is only after submitting a file type that is not allowed, that the user receives a notification.
Image 2. Shows error a list of allowed types of files after uploading process has begun.
# Actions Required
- Provide notification that an action has occurred (upload successful)
- Give the user file type information prior to them submitting or uploading a document
# Proposed solution
List supported file formats before the user upload the file.
Image 3. Shows the proposed new design for this component where the file formats supported are listed above the choose file button, so users are aware of any potential restrictions before they start the upload process.
- After the user chooses a file, they will be presented with the option to Upload the file or Continue without saving.
If the user clicks on the Upload file and the upload is successful, they will be presented with a successful notification banner (Notification banner – GOV.UK Design System (design-system.service.gov.uk) as well as the name of the file, size and the option to delete it.
Image 4. Screenshot of a green notification banner with the word Success at the top of the page and a list with the name, size of the uploaded file.
# Link to prototype
See this component in action
Prototype: Upload file
Username: apply
Password: 2become
< Go back to design histories