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.

Where there is the option to upload a single file to a website, what is the most intuitive method of doing this?

There seem to be two obvious options:

  1. Give the user the location field and 'browse' button where they can specify the specific path of the item
  2. Just to give them a single Upload button that acts as the browse one in the first example.

The first example seems to be the most commonplace, but is it actually necessary? Do many people actually paste in the file location into this field and then choose Upload, or (as I suspect) is the 'Browse' button itself the most commonly used route, thereby removing the need for the field entry?

I also suspect that having both a Browse and an Upload button available may cause additional confusion as to which button to use (i.e. user may not know the file location immediately so providing the field first may put them off even trying "I don't know what to type in that field..." Also, if they do paste the file location into the field what is the instinctive next action - do you press 'Browse' or 'Upload'?)

So basically, my question is: Why do file upload options give the ability to paste in a file location when a single upload button would take care of both browse and upload in one action?

file upload

Interestingly, Imgur uses both options. imgur.com directly has the upload button, but uploading an image to imgur via UX.SE provided the 'Browse' version.

share|improve this question
    
Most browsers (IE8, Firefox and Chrome) don't let you use the text field anyway, clicking in the field just opens the browse menu. –  Ben Brocka Nov 4 '11 at 15:55

4 Answers 4

up vote 2 down vote accepted

The funny thing is browsers already made this choice for your users, as you're using a web form.

Here's Firefox 6:
enter image description here
Clicking the input field opens your Browse dialog. You can't type into the field, you can't paste the location to this field.

Here's IE8:
enter image description here
That text field doesn't work. Clicking doesn't let you type. You can double click it to open the Browse dialog.

Chrome at least has the decency to not give you a fake text input field: enter image description here

In all cases all the "text field" really does is show the path of the file AFTER you've used the browse dialog. If anything the text input is a holdover of an older web, I can't see any reason not to use a single button to do the same, the only benefit you get out of the text field is showing the user the path to the file they uploaded--your site can do this with some nice styling or even provide a thumbnail, which is more helpful.

If your users want to paste the directory path they can paste the path into the Browse dialog window. You're really just doubling up on that functionality if you do manage to provide it, and people are more likely familiar with their operating system's Browse dialog than your website's form.

Bottom line, if your users use a standard browser, they probably use the browse dialog exclusively. They may not even know what to do with a text input anymore, since that option was taken from them by the browser.

share|improve this answer
    
This is based on a previous answer but it's actually more directly relevant to this question. I stole my old images but explained everything in the question's context. ux.stackexchange.com/questions/13012/… –  Ben Brocka Nov 4 '11 at 16:06
    
Ah didn't see that question when I was searching for similar posts, but it's pretty bob-on really. Just differently worded questions / tags I think. Oh well. –  JonW Nov 4 '11 at 16:27
    
Technically they were asking about directory pickers, which are used in desktop installers and function a bit different from the browser's file input. My answer was always intended for this question, I honestly slightly misunderstood the original question because of the similar terminology. –  Ben Brocka Nov 4 '11 at 16:31

There are people that will type in or copy the file name and location. If you are working on a file that is at the end of a long directory structure, and you have it open, it is often easier to just copy the link to the file and paste that in than browse to it.

For other people it is easier to browse to that file and select it.

For both of them there is a good reason to have the select a file field, as it serves as a confirmation field allowing you to see the file before you choose to upload it. People often open the wrong file by mistake, so automatically uploading that file without a check before hand is usually a bad idea.

That said, the "upload" button should present some helpful error message if it is selected while there is no link to a file in the select a file field.

There are some situations where only having one method pick a file makes sense, but then why would you show a dialogue with only one button? They obviously clicked on something before this, so adding this dialogue just doubles the actions that someone has to take to start choosing a file.

In summary, there are very few situations where I think the select a file field is not good to include.

share|improve this answer
    
Some fair points, particularly around visibility of file name before you actually upload it. However I still think that you could cover all of this with just the upload button. That would open up the windows file dialog where you have the ability at that point to paste in the file location. I would probably also include details of the file that has been uploaded once it has been with the option to 'Remove' at that point. –  JonW Nov 4 '11 at 11:47

I think it makes sense to have both options, especially if your users are not very evolved. Most desktop users are used to the functionality of having both options. Changing the status quo could result in users getting confused.

share|improve this answer
    
I'm just concerned that the status quo is actually confusing already. If the user doesn't know the current file location immediately will they just be put off even using that control? –  JonW Nov 4 '11 at 14:47

Here is what I'm going for with the new UI in one of my projects, it's a WordPress style; drag and drop to upload & select files option in one. And since it's an image upload function, I have put preview right beside it directly.

Here is a screenshot:

http://i.stack.imgur.com/fkJqD.png

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.