User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
In a given web application, the user can upload images. Currently, when the user uploads something which is not an image, the JavaScript alert box with the message "Please Select only Image Files!!" is shown.
Is this a suitable feedback from the UX point of view?
What should be the feedback when the user uploads a file which is not an image?
See the original comment on Stack Overflow which caused me to ask this question.
Well, let’s work it from end to beginning:
”!!”
Lose the exclamation points. Don’t yell at the user. It’s rude and insulting.
”image files”
Does the user know what an “image file” is? Do they understand “image” or “file”? Conduct some user testing, but I’m guessing “picture” is more appropriate.
And what is not an image file? Maybe the user mis-selected the file, but they can’t tell, so they’ll assume the app doesn’t work for them. Maybe they selected a bunch of files, but one is mis-named as an image file (wrong extension). Now that have do trial-and-error exhaustively to find out which file is the problem.
”select only”
The message gives the prescription without giving the problem. Occasionally that’s enough, but probably not here. What if the problem is the user uploaded a MS Word document with nothing but an image pasted in it? What if the problem is the image file is corrupted? What if it’s an obscure format your app doesn’t support? In all cases, you’ve a pissed user, saying “I did select an image file, you moron!!” (users are permitted to yell at the computer; yeah, it’s a double standard).
”Please”
Maybe okay. Politeness can help, but it can also annoy when it’s the third time the user gets the message and they don’t understand why. And it adds words. In a message box, the more words, the less the user reads. Probably better off without it.
So, take out the problems, and, why, that leaves nothing of the original message.
Here’s the alternative:
”Can’t find picture in [filename].”
Below this you can add secondary diagnostic or prescriptive text (e.g., the formats you support), or it may be better to rely on a link to context-sensitive documentation to help the user troubleshoot.
Here’s another alternative:
Yes, no error message. Instead, filter the selection of files to only include readable image files (e.g., by extension). Okay, you’ll still need the error message for corrupted or mis-named files, but it’ll go a long way to eliminating the problem before it occurs.
To summarize, an error message should:
Only be used when you can’t prevent the error in the first place.
Never yell at the user.
Use the user’s language.
Be specific –provide information from the context.
Describe the problem more than give the prescription.
Be brief, even if it means being terse.
Link to context-sensitive help or troubleshooting documentation.
The usual style guides (e.g., Windows and Apple) provide good advice on writing error messages.
.png, my system nevertheless recognises it as a JPEG file (yes, I have come across this misnaming before). However, saving a JPEG with the extension .odt results in an incorrect interpretation.
Jul 11, 2013 at 12:32
Showing a message box is not a good solution in most cases (1).
It's even worse when the message box contains a message such as "Please Select only Image Files!!" (2).
And it gets worse in a context where the user is uploading a file which is not interpreted by the application as an image (3).
Message box dilemma
The message box is extremely easy to implement for a programmer. In most programming languages, it's done in one line of code. This makes it particularly popular among programmers.
The message box is extremely annoying for a user, not mentioning the fact that it's useless in most cases, since nobody read them. This makes it particularly unpopular among users.
Error message strings
In a mind of a programmer, if the user entered "Twenty four" in the field where a number was expected, the user is dumb, and deserves the message like:
Dear user, you're dumb. We asked you to provide a number, and instead, you entered something we don't qualify as a number. Try again.
In a mind of a user, error messages are usually deceptive, meaningless, useless, not helpful and insulting. Nobody wants to be insulted, so constantly telling to your users that they are stupid is not the best thing you can do. The error message telling that "Twenty four" is not a number lies.
If this was not enough, some messages are pushing hard to be irritating as possible. A message like:
FAILURE IN MODULE 5992 LIBRARY_NOT_FOUND
is really doing the most it can to be hated. Many messages look like the application is really happy to fail. Why:
Please Select only Image Files!!*
has two exclamation points? Why would it have even one? What is so exciting about the fact that it was unable to understand the file format? Why there are capitals at each word?
Wrong culprit
In the example of "Twenty four" in a field which expects a number, the fault is not on user's side, but within the application. If the application is unable to understand this particular input, it's the fault of the application.
Instead of lying and insulting others, the application could simply apologize to the user to not being able to understand what was entered, and give some hints. For example:
I apologize, but I can't understand "Twenty four" as a value for the "Age" field. It seems that there are no digits in this value, while I was expecting a number composed of one or two digits, superior to zero. Example: 65.
Displaying:
Please Select only Image Files!!
in a context of file submission is risky: your application may lie in too many cases. What if the user submitted a Photoshop PSD file, and your app is unable to recognize it? What about all the image formats supported for example by IrfanView?
Beyond formats, an image copy-pasted to a Microsoft Word document and saved as such is still an image. Users don't care about the support: they care about the content.
So, what could be done instead of a meaningless, lying and irritating message box?
What about a small notification which would appear somewhere on the page:
The format of the file you've submitted is not among the formats supported by <Application name>. The supported formats include JPEG, PNG and GIF.
If you want to know how to convert your image in one of those formats, you may be interested by our (image conversion guide).
The last three words point to a page which explains how to convert images to JPEG or PNG in MacOS, Windows and Linux.
Here:
Some, less textual and more graphical solutions can be used as well, depending on the context. For example, the cursor during drag and drop can change depending on the extension of the file, or the original upload panel may explicitly enumerate the supported formats with their respective icons.
In all cases, even the basic solution suggested above is ways better than the original message box.
As the file type filter in Open dialog works not in all browsers, you should display error message.
Javascript alert box is not good solution because after closing the message box the error message dissapears while error itself is not corrected.
So error message should be visible until error is corrected. Also there could be error when user chooses wrong image. So it is good solution to show thumbnail to user after image uploading.
If it's acceptable you could use some tricks in error message to support user positive mood. This could help user not to break the task but correct the error.
Here is some fake image (it should be ethical though) in error message which motivates user to correct error. It is similar to more user-friendly 404 pages.
I agree "Please select only image files!!" is not quite gentle. You should be gentle to the user while prompting for corrections . They should not feel stupid when they use your software. On the other hand you should also keep prompts brief, as users are likely to skip if something is too long to read and they might assume that something random caused the error.
Also you should avoid modals and pop ups if possible, if possible display the message right next to upload button or area where user drags the files. This will avoid one extra step of them clicking OK or TRY AGAIN button.
If user uploads something that's not an image you can say something like.
Images only please
Supported formats : .jpg,.png,.gif
Or if your app has a mascot you can display their sad kinda face holding files, with a shrug. Or for that matter any random face, if that makes sense.
Why do you want to show an error message when you can prevent the error from happening in the first place?
Instead of waiting for the user to finish uploading or even selecting a non-image file and clicking upload, you can enforce the criteria during file selection itself.
Rather than allowing any file type to be uploaded you restrict the visibility of the files which are non-images. You can make non-image files grey or something too. Restriction should be easy since you are already using the same parameters to check for image-ness post upload to use the pop-up.
Here, Folders and indesign files are colored while other files are greyed out.
You should present a more friendly message. This message could be a simple contextual feedback near the upload, like in a normal form when a user inputs a wrong password. This contextual feedback can have an alert color, like a subtle yellow.
Sometimes the best solution is the easiest. Instead of waiting for the user to upload a picture, and then test if it is appropriate, you can use the accept attribute on an HTML <input> element to filter the file types that are allowed to be uploaded in that <input> element.
The attribute value must be a comma-separated list of unique content type specifiers. For example:
<form enctype="multipart/form-data" method="post" action="process-form.php">
<label for="upload">Choose a picture from your computer:</label>
<input type="file" accept="image/*">
<input type="submit" value="Upload">
</form>
(Note that to use the image/* MIME type, you need to be using HTML5. Otherwise, just use normal MIME types such as image/png, image/jpg, etc.)
