3

This is used for the b2b web tool. The user can upload an image file by clicking the "upload" button. There're 2 restrictions: max size and file formats.

What is the best way of showing that?

  1. Put a short general description under the upload button and open a tooltip on click or hover
  2. Same, but add the max file size to the button
  3. Place the list of all restrictions under the button (I would choose this option if there's not so many file formats)

enter image description here

Improve this question
5
  • 1
    Would using the accept attribute on your <input type="file"/> element be an option? I'm wondering if this, combined with option 1 or 2 would be sufficient. This would filter their options for them as well as provide the information before selection for those who are curious. If they specifically changed their file options to view "All files", then you could show an error after an invalid selection.
    – maxathousand
    Commented Jun 19, 2018 at 13:25
  • Will this attribute give the user feedback after the file upload attempt?@maxathousand
    – Anton T
    Commented Jun 19, 2018 at 15:07
  • 2
    It will filter the files that are shown to them while browsing. Also, it's possible to evaluate the file size before attempting to upload as well so you may enforce your validation before form submission. To play around with an example, check out Mozilla's file input example (at the bottom of the page).
    – maxathousand
    Commented Jun 19, 2018 at 15:12
  • 2
    Note that those previous suggestions provide a smoother user experience, but it relies on the client to support File API (which most modern browsers do, but maybe provide a fallback for browsers that don't).
    – maxathousand
    Commented Jun 19, 2018 at 15:18
  • Is your list of file formats representative of reality, or did you just put random file types? The fact that you accept zip and rar files means to me you would accept about anything (unless you only accept archives including the other formats), do I wonder if you actually have to specify anything?
    – jcaron
    Commented Aug 19, 2018 at 13:03

1 Answer 1

Reset to default
1

I'd say option 3 is the best as the user doesn't have to initiate an action to read the kind of file types you accept as well as the size of the file they are allowed to upload. Chances are users won't see the short snippet of text in option 1 or 2 due to the add attachment CTA taking their attention.

The only issue I can find with it is the space all the file names take up, but as long as it looks OK in your design then I'd always be as clear to the user as possible without making them do an additional action.

Improve this answer
4
  • Thanks for your opinion, I need also to keep in mind when the button won't be isolated. I agree it's better to be as clear as possible, but it could easily get too cluttered and hard to understand.
    – Anton T
    Commented Jun 19, 2018 at 15:05
  • @Anton T You could have the three most common extensions listed below the button, with "..." or some other indicator that there's more content hidden. Then show the other extensions on click/tap/hover.
    – Orphevs
    Commented Jun 20, 2018 at 12:49
  • @Orphevs it could be a way if there's only one type of restriction. There's a File type and a File size also
    – Anton T
    Commented Jun 20, 2018 at 15:19
  • @Anton T depending on button width, either write the site limit on the same line, or a second one directly beneath. Either way, have the site limit come first, so it doesn't move when showing additional file types.
    – Orphevs
    Commented Jun 20, 2018 at 15:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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