Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
Pedantically, I would use "picture" over "image", as "image" has more than one meaning in computers. –  Neil McGuigan Jul 28 '13 at 3:32

7 Answers 7

up vote 22 down vote accepted

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.

share|improve this answer
2  
"… filter the selection of files to only include readable image files … by extension". Using the extension is fine on Windows, which depends on it, but not on Unix (e.g. Mac) or Linux, where the extension may be absent or something unexpected. –  Paddy Landau Jul 10 '13 at 15:52
    
@PaddyLandau: I'm not sure about Mac but on Linux the extensions are widely used (for example to save I/O during displaying a large folder - without extensions each file would need to be opened, magic number found etc. - while checking extension is more or less instantaneous). –  Maciej Piechotka Jul 10 '13 at 19:00
    
@MaciejPiechotka — thanks for that. Linux will indeed save time in some situations, but not in others. For example, when saving a JPEG with the extension .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. –  Paddy Landau Jul 11 '13 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).

  1. 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.

  2. 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?

  3. 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:

  • You don't disturb the user: there is no "OK" button to click in order to be able to continue.
  • You don't insult the user by blaming others for your faults. The user did all right; it's just that your app is unable to support too many formats.
  • You are giving hints about what the user can do to submit an image which would be understood.

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.

share|improve this answer
    
Forthright, but accurate. +1 for pointing out the double exclamation mark. –  Paddy Landau Jul 10 '13 at 15:50
1  
"Lying" implies deliberate deception. The OP's message runs the risk of being inaccurate or deceptive, not lying. –  Jon of All Trades Jul 10 '13 at 18:58
1  
@JonofAllTrades: well, if the user submits a TIFF, a PSD or a TGA, telling that it's not an image is a lie: it is an image, just as a JPEG or a PNG. –  MainMa Jul 10 '13 at 19:19
    
@MainMa: At least according to dictionary.com (and every other dictionary I checked), telling the user that it's not an image would not be a lie, because something is only considered a lie if it is not merely wrong but deliberately wrong. And this distinction is important; a lie is often part of a dark pattern, whereas being inadvertently inaccurate is merely a form of poor design or an error. Mind you, plenty of UX people like to exaggerate and call inaccuracies lies to draw extra attention to problems, but this intellectually dishonest. –  Brian Jul 17 '13 at 18:53
    
@Brian: I see. Indeed, I don't know English well enough and I should have listened to Jon of All Trades instead of arguing. For you, what would be a more appropriate term then "lie"? –  MainMa Jul 17 '13 at 19:28

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.
enter image description here
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.

share|improve this answer
    
Click this link for a better version of the error message. –  AJMansfield Jul 10 '13 at 17:09
    
@AJMansfield -- This could be good for the young audience. They'll recognize the face. Moreover some of them could wish to stay with it ). Thank you! –  Alexey Kolchenko Jul 10 '13 at 17:22

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.

share|improve this answer

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.

indesign file selection

share|improve this answer
    
Is there any simple way (without, for instance, flash custom loader) to set up file dialog for selection of only certain file types? –  Alex Ovtcharenko Jul 10 '13 at 15:13
    
@AlexOvtcharenko Sorry, my knowledge of web dev does not extend that far yet :) –  rk. Jul 10 '13 at 15:18
    
@AlexOvtcharenko it is possible in HTML5, see my answer. –  bungeshea Jul 17 '13 at 7:01
    
@bungeshea thank you for information –  Alex Ovtcharenko Jul 17 '13 at 16:44

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.

share|improve this answer

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.)

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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