1

We're redesigning a file upload experience. The use case is to add supporting documentation to a support ticket. The user selects a file, indicates the document type, and then clicks Upload. Once uploaded, the document appears in a simple grid of all uploaded files.

In the current state, the user's work area is small and easy to miss in a complex interface with many elements:

A simple upload section with a file selector and Document Type dropdown

I'd like to use a dropzone to make the action more prominent in the UI. However, I'm not sure when, where and how to include the Document Type selection. The user could choose to edit the information in the gridview after uploading, but it seems easy to ignore. The document type isn't mandatory, but it's useful, and the user would likely want to incorporate it with each upload.

Is a dropzone the wrong pattern here? Or is there a way to make the document type selection an intuitive part of the dropzone upload process?

Dropzone with table underneath it. The type is selected.

Improve this question
4
  • Is it normal for users to drag and drop multiple file types at once? Or do they normally only upload one file at a time?
    – Steve O'Connor
    Commented May 21, 2020 at 14:09
  • 1
    The user might want to upload multiple pieces of documentation at once.
    – Izquierdo
    Commented May 21, 2020 at 15:09
  • Is it possible to ask for the type while the document is uploading? This could work well, since the user will watch the status/percentage of uploading after dropping a file, to make sure it is complete before taking another action.
    – Falco
    Commented May 21, 2020 at 16:13
  • I've been thinking about that. I could see a pattern where a dropdown box appears next to the progress bar as the file uploads, and the user clicks Add File when all is ready. This could work with multiple file uploads as well.
    – Izquierdo
    Commented May 21, 2020 at 16:46

3 Answers 3

Reset to default
0

I would first ask the user to select what file type he is uploading as in the example below. The flow would be more intuitive 1. What type of file would you like to upload ? Upload your file.

If you consider making the Document type mandatory, you could grey out the upload area unless a Document type is selected.

Source https://www.cloudaccess.net/site-migration.html

Image source https://www.cloudaccess.net/site-migration.html

Improve this answer
2
  • Keeping the dropzone disabled until the selection is made is an interesting idea. Do you think this task could somehow work without a Next button? Dropping a file in a dropzone seems like it should complete the action without another control confirming it.
    – Izquierdo
    Commented May 21, 2020 at 15:12
  • Thinking about this again, an "Add file" button below the dropzone might be the right solution to prevent user error (wrong file uploaded, wrong type selected). I think this pattern is correct. Thanks.
    – Izquierdo
    Commented May 21, 2020 at 16:44
0

Can the document type sorting not be done by the back-end code, taking it out of the users' hands? Any time we can remove a task like this from the users load, it should be done.

Improve this answer
1
  • That's a really good point. There's a bit of misleading nomenclature in my explanation -- "type" is usually a file type like PDF or PNG, and here we're using it like "invoice" or "proof of purchase". I'm not sure if our system can sort on those kinds of things without user input.
    – Izquierdo
    Commented May 28, 2020 at 18:26
-1

Create separate drop-zone for each type of document so the user can element click step to select a document type and drop there file in specific drop-zone.

This is not going to be friendly if you have more than 4 to 6 document types.

Improve this answer
1
  • Thanks, but I think we want just one dropzone here to keep the design minimalist.
    – Izquierdo
    Commented May 21, 2020 at 15:13

Not the answer you're looking for? Browse other questions tagged or ask your own question.