1

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.

enter image description here

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

enter image description here

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.

2
  • 1
    In your first example, there are multiple categories associated to a single file, and multiple files are associated to a given category (many-to-many relationship). In your second example, this is not possible without uploading the file twice, but in that case, a user still can't associate multiple files to the same category (1-to-1 relationship). What is the requirement regarding the relationship between files and categories? I think that will have a big impact on what a suitable UI could be. Dec 3, 2021 at 13:47
  • @maxathousand - Sorry, I updated the mockup. Worked on this late at night. But yes, a file can only belong to one category (1 to 1 relationship).
    – Beans
    Dec 3, 2021 at 17:16

1 Answer 1

0

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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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