1

Part of the application I'm working on lets users add attachments. The selected file(s) must be less than 1 megabyte, and a JPG or PDF. If either of these is not the case, the file is rejected.

I've got 3 different opinions from 3 different people, and want to know what what the general consensus is.

The file will appear in a grid, but with a red background. A message will be displayed indicating why the file has been rejected, and will also tell the user that the file will not be included.

Option 1 is an 'OK' button on a rejected file. The idea is that you're acknowledging the message.

Option 2 is 'no option to remove'. The error message tells you that the file will not be included - there's no further action the user needs to take.

Option 3 is a small 'X' to remove the file. It's consistent with removal of an accepted file.


The user isn't required to remove a rejected file - they can always click 'next' to continue to the next part of the workflow. Your input is appreciated!

enter image description here

Improve this question
3
  • Perhaps you provided a bad example in using FileName.pdf for all the files, but how will users tell which one of their files that 'FileName.pdf' refers to? What if they choose file1.pdf from one directory on their file system and file1.pdf from a different directory on their file system... how will they know which one is too big?
    – A. Murray
    Oct 20, 2015 at 15:45
  • Another thought I had is, what if the user can decrease the size of the file and try again? E.g. a JPG is too big, so they open it in Paint.net or whatever and size if down BUT DON'T change the file name? Or if a PDF was created from a PDF printer and they choose different settings when reprinting, again with the same file name, but a smaller file size. With option 2, they have no way to re-attempt attaching the file. Just some questions that could influence the best option (perhaps the best option is one that hasn't been presented).
    – A. Murray
    Oct 20, 2015 at 15:48
  • What is the primary purpose of this notification grid? Is it purely to communicate the "status" of an upload and the user never see's this grid after completing the flow? Is this pattern used anywhere else on your site to manage attachments?
    – Igorek
    Oct 30, 2015 at 17:42

4 Answers 4

Reset to default
2

Option 2 makes most sense

I've used this function before and the best pattern is the uploader will highlight in red the file that cannot be uploaded and simply state the reason it can't be uploaded. The user does not have to perform any further action except execute the upload knowing full well the highlighted files will not be included in the upload.

Option 1 and 3 are bad because they require extra clicks before they can execute the upload. And once users have learned what the warning means after repeated use, can you imagine how annoying this would become!

Improve this answer
2
  • 2
    Option 2 is my preferred option too, but it's been criticised as people who like a 'clean screen' (and don't want to move forwards if there is red on the screen) have no option to correct the mistake. The user isn't required to remove the upload, but the option is available with options 1/3. It's a bit of a conundrum...!
    – Dave Salomon
    Oct 20, 2015 at 11:16
  • 1
    its an established pattern and I can assure you, your friends will hate the obligation to manually remove stuff once highlighted if they use this system on a frequent basis
    – colmcq
    Oct 20, 2015 at 12:16
2

Option 1 makes it clear that users made a mistake, but still can continue - thus are not "blocked by the mistake".

"Try again" requires uploading a different file - if it was not a technical error, e.g. "upload failed by server". I think clear instructions on how to solve the problem AND a shortcut to quickly overcome the mistake made before is the key.

Inline indicators, like "use this input field to select a smaller file" with color highlights might help.

Option 2 will leaves users unfinished and they cannot do anything about it at this point.

Option 3 is not useful - the file was not accepted: Why should I have to delete it? It creates open questions, confuses.

Improve this answer
2
  • re Option 2: The error message is telling the user 'this will not be included', so they're not being left unfinished. Isn't adding a removal icon making things unclear?
    – Dave Salomon
    Oct 20, 2015 at 10:32
  • Well - the user WANTED to attach the file, so not being able to change the fact that a file upload failed is a state the user does not want to be in. This is what I meant with "unfinished business". "Removal icon" sounded like a closing X in the alert message. Did I misunderstand that?
    – Jan
    Oct 20, 2015 at 10:34
1

The best option is OPTION A as it is highlighted more than another and user will only do OK after reading the error message.. This is best because sometimes user misses the error message and try again n again to attach something, but in this case user will get a message and call to action clearly.

For a user's delight you can use "TRY AGAIN" & small cross instead of only OK... By this user can initiate from there to attach again or either can cross if the attachment is not necessary.

Improve this answer
0

Instead of focusing on handling errors, focus on making sure you explain the limitations before they upload.

When user sees the uploading UI they will automatically assume this is a regular uploader just like any other, without any hard limits.

Present a big, visible, graphic illustration explaining the limitations of your uploader (and reasons for that) right in the center of the screen.

Improve this answer
1
  • A fair point. I have emphasised in the instruction, "you may only attach JPG and PDF file types". I should also emphasise the 1MB limit. When you click "Select Files", a filter to only display JPG's and PDF's is applied in the file browser - thanks!
    – Dave Salomon
    Oct 21, 2015 at 9:49

Your Answer

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

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