Multiple File Upload #264
Replies: 4 comments 1 reply
-
The MOJ Accessibility Audit has a prototypical example that works both with and without JavaScript: I'm personally not a fan of the pattern though, it requires some very specific (and inconsistent) endpoints. If I was doing multi-file upload in my own service I'd probably use the MOJ CSS but write all the JavaScript from scratch. Let us know how you get on, it would be great if we could make it more useful. |
Beta Was this translation helpful? Give feedback.
-
ExistingMOJ Pattern Library multi file upload component Components and patterns Multi file upload drop zone - MOJ Pattern Library Use case: When a user needs to upload multiple files on a regular basis and wants to be able to upload multiple files at the same time. Need for additional design workThe LAA Apply team wanted to incorporate the multi file upload component as the service we provide requires multiple types of supporting evidence to be uploaded before submission. We wanted to explore a solution that incorporated the current drop zone , but also shows what the uploaded files look like and how they are presented to the user. We met with the two teams who have successfully implemented multi file upload components- "Manage a recall" and "Pathfinder" and watched demos of the component in their services. We found the "manage a recall" service's upload process the most suitable for our service and decided to create mid-fidelity prototypes based on that. This is because they include an additional step which requires users to select a 'category' or 'evidence type' for each uploaded file. This feature is essential to our service due to the mixture of mandatory and optional files required in our service. Through further conversations we found that there was not enough user research or usability feedback for the components in these services so sought to hold usability design critiques within the UCD community. How to useThe multi file upload includes a dropzone and feedback area (table component). Users can drag and drop files onto the dashed dropzone or click the button and select files using the file picker. Each selected file will start uploading immediately and appear as a row in the feedback table. Each file’s progress is indicated as a percentage. The feedback table consists of three columns. The first is the filename, the second is a select component to allow users to select the category the file corresponds with, the third is a link to delete. Error messagingThe error messaging used is as described in the current multi-upload component. In addition to the feedback banner at the top of the page and the line break error messages, we added red boxes around the select fields, where an option had not been selected as this is mandatory in our service. This addition works well for users who do not have issues with colour blindness and identifying contrast- however those who do have issues with subtle colour changes will still have the banner and error message as an alert. When JavaScript is not availableAs explained in the existing component's details, JavaScript is essential to run this component. Users will be provided with a file upload component and upload button if JavaScript is not accessible. When the user clicks the upload button, the website refreshes, displaying the validated files in the feedback table. Usability feedbackThe LAA Apply team held five internal usability design crits to test the component with participants within the UCD community. The overall feedback was that the component is intuitive and it is clear what is expected of the user and most would know what to do on first glance of the page. One participant did mention that the terminology "drag and drop" may not be known to some, so content may need to be clearer. Another participant also mentioned that it was not clear what was expected of the user after they upload the files. There was feedback that the categorisation functionality works well but is better suited for a user who is familiar with the service and what each category means/ refers to. This may not be suitable for a public facing system that is not used regularly by a user. One participant said that it was not clear that a file had been successfully uploaded - but then mentioned that the feedback table was called "Uploaded files". They suggested that this could be made clearer- potentially with a green success tick as mentioned in the current multi file upload component page. An issue was also raised in the case where a user uploads one file which covers more than one category. There is no current solution for this but content will need to inform the user how to tackle this issue in the context of our service. All participants found the information architecture of the page clear and suitable, with content in it's expected place. The use of JavaScript was mentioned by most participants, stating that it was vital to have the fallback option as some users may not have JavaScript running or may have issues with slow internet speeds. All suggested changes were around content to ensure that it was clear what the user had to do, particularly with the categorisation functionality as this is not explained on the page. Most participants felt that when deleting a file from the table, there should be a modal box with a warning before the user can delete the file. Particularly in the case where a file is large or internet speed is slow and it took the user a while to upload the file initially. However, a couple of participants did not feel this was necessary as the user already owns the files and could easily upload them again. The LAA Apply team will include this upload page in the next round of user research to gather more feedback, but are confident enough with the solution for now to move forward with it. Things we don't know enough aboutAccessibility testing Once we have a production version ready of this variation we will conduct accessibility testing. Another developer had mentioned a certain issue in previous testing which were caused by the use of the drop zone box. The user was not aware that the file had been uploaded in a table above so kept attempting to upload the file, expecting they would see it within the drop zone. The feedback for this can be found on page 81 of the Design System accessibility audit report. Potential changes to make: Add feedback within the drop zone to alert the user of what has happened when they have attempted to drag and drop a file in that section. |
Beta Was this translation helpful? Give feedback.
-
I'd second this request.
|
Beta Was this translation helpful? Give feedback.
-
We're looking at the usability of the non-javascript version before implementing it in our service. Has there been any feedback about the need for users to click two buttons before they can finish uploading? first, the grey 'upload file' button then the green 'continue' button? Also, will the component in the design systems be updated to show error messages, etc? The prototype only shows up until when the user clicks upload. |
Beta Was this translation helpful? Give feedback.
-
Hello, I am working on a project in the NHSBSA and wondering if anyone can point me in the direction of a functioning prototype or live service that incorporates the MOJ's pattern for multiple file upload.
I am interested how the error messaging and file validation is handled both client and back-end side.
Beta Was this translation helpful? Give feedback.
All reactions