Uploading and categorizing files thereafter - What is the best way to upload these files?

Question

We are building a feature where users can upload their files.

Idea (A):

Because multiple files can be uploaded by the user, one idea was to use a drop zone. The user is able to select a Category even if uploading is still in progress because we don't want users to have to wait for upload completion in order to be able to categorize their files.

Should there be an error in the upload process, the Category options will just disappear and an error message will be displayed.

Here, the user can drag/upload all their files and categorize them thereafter.

PROS:

• Speed (ability to drag files all together, helpful with multiple file uploads)
• Category can easily be changed should the user initially select the incorrect Category the first time

CONS:

• If multiple files are uploaded all at once, it might take a lot of work to have to categorize each (the page is going to be quite long)

Idea (B):

A simple upload button that allows the user to upload files

PROS:

• Straightforward
• Intuitive

CONS:

• Time-consuming (user cannot select and drag all files all together)
• If the user mistakenly uploads to the wrong Category, they'll have to remove that file and upload it to the correct Category

Other ideas we thought about:

• Multiple drop zones for multiple categories on the same page, but this isn't the best in terms of UX. A single drop zone already requires certain motor skills, so multiple drop zones isn't ideal. Besides, we want the entire page to turn into a drop zone, so that isn't going to work.

• Each Category will be its own tab. Each tab will have its own dropzone. This way, there's a single drop zone each time. The disadvantage to this is the user may not see all of the Categories from the get go. They might upload their files all together onto the first drop zone they'll see.

Answer 1

The best experience would be to have the system automatically categorize the elements, which is much closer to your design A. If something goes wrong, they could adjust the defaults in the same way you show above.

In a similar design with a past project, I observed users dragging all their files at once in a bulk motion, most of the time. So adding complexity to include multiple drop zones may confuse users more.

As @maxathousand pointed out. In design A it's not clear if those pill shapes are mutually exclusive or not. You might want to change the affordance to something like a select control with a list where only 1 can be selected once they chose from the list.

The concern I have with B, is that I don't see where the user can view the files they have uploaded in order to validate one item in cat 1 vs cat 2. Would they have to memorize them? or copy and paste the lists in other text software?