Uploading multiple documents

webforms
ux

#1

In my web application the user is required to upload a couple of specified documents.

I think of two approaches.

What would you propose and why?


#2

@marks78, are you asking for other approaches? Or comments on the two proposals you have?

I think the second one (on the right) works better as there is less clutter of too many buttons. You could add to it by having a checkmark next to the name once the user uploads the type of form.


#3

@jdebari thanks for your feedback!

Yes I was looking for opinions on the 2 versions I drafted.

The problem is that I don’t know which document the user is uploading. Lets say its any PDF document, there is no automated check if that uploaded PDF is really document type 1 that we require. I can only provide that feedback (= checkbox next to the name of the document) to the user once someone in backoffice has verified the document.


#4

If I’m interpreting this right:

There’s a discrete set of individual docs the user is required to upload
You can’t know on the fly if an uploaded document is in fact correct or compatible

True statements?

I’m thinking about the use case scenario where some but not all 4 files are on my local hard drive, so I upload what I have and will finish the rest later when I find it or from another machine. Is that scenario supported or does it need to be supported here?

Your A and B screens show the case: no files uploaded, correct? What does the case: some files uploaded look like? (Same partial case on both A and B.)


#5

@marks78
we are actually working on the same issue for an end-to-end web app.
We had several iterations with some test users and with the client.
In the end, we decided to design something very close to the mockup on the right (only one upload field).

The reasons are:

  1. we did a benchmark with some document management software (eg Alfresco) and we noticed that the “single upload” option was the most common pattern
  2. in our case we don’t know how many docs the user will upload
  3. we didn’t notice any improvement in executing the task when we provided the solution with multiple upload fields
  4. some test users working with the “multi upload” option, start asking if every upload field was strictly connected with the type of file that was requested
  5. none of the users complained about the repetition of the task when they were working with the “single upload” option

Here’s the draft of the solution we will deliver

What do you think about it?


#6

@StudyOfPeople
Great points, thanks!

Yes, your assumptions are both correct.

Yes, the upload of documents happens in a member area, so the customer can come back at a later point and complete document upload before sending the order. Eg. start your entry on mobile, realize that you dont have the documents available, log in later on your PC and finish the document upload.

Last statement is also correct: the screens show the situation before uploading any document. If some files have been uploaded a message informs the user that the upload was received and documents will be reviewed.
The backoffice employee will review the documents. Each document that is OK can be checked off in the backoffice and that will be shown in the member area as a green checkbox in the list of required documents. In that way the customer can see which documents were ok, and which ones are still required.


#7

Thanks for the reply and insights! I agree with your points.

One advantage that I see in the multiple-upload button version is that you can provide feedback to the user that something for eg “document type 1” has been uploaded and the user can proceed with the other ones.

Right now I also prefer the single-button version.


#8

@marks78
What do you mean by:
“One advantage that I see in the multiple-upload button version is that you can provide feedback to the user that something for eg “document type 1” has been uploaded and the user can proceed with the other ones.”

There is no document checking you said…

I would definitely do a few different states of this wireframe to make the flow clear.


#9

I was not precise enough, my apologies.
The emphasis is on “something”. I can notice that the customer pressed one specific upload button and that “a file” got transmitted.
This allows me to show the confirmation that “a file” was received, without having it checked on the fly. This provides a visual feedback in the list which uploads the user has done already.
The second step with the backoffice verification remains in place and once that is performed, the according feedback is provided, stating whether the specific document is now ok or not.

I will try to visualise it further.