19

I've been working on an advanced file uploader, complete with folders and animated progress bars, and wanted to improve the vague "browse" button generally used for launching a file selector window. Since the uploader I'm working on primarily supports drag-drop for upload, with a "browse" button as a secondary option, I have the freedom to label it whatever I want.

There are a lot of custom labels I've seen used for this button, and each browser has their own default as well.

Some examples:

Browser comparison found via Google, "Browse, Choose, and Choose File":

Wordpress "Select Files":

Dropbox "Choose Files":

I'm curious if people think it's a good or bad idea to stray from the default.

The label I'm leading towards is "Select Files from Computer." I think what's missing from the other labels is what files you're going to be browsing/choosing/selecting from, distinguishing between files already uploaded to the website vs. files stored on your local system.

2
  • can this app be accessed from a mobile?
    – Mervin
    May 13, 2013 at 19:08
  • @Mervin: Nope, just desktop. Should have clarified.
    – Kip
    May 13, 2013 at 19:13

7 Answers 7

23

I would go with Dropbox's approach.

'Choose files' is clear enough to tell you the action it performs and concise enough to fit within two words. 'Select files' also works.

When labeling buttons, try to explain what the button does. Are choosing files and uploading two steps or a single step? Since in dropbox's case, you choose the files and then press 'upload'.

The labeling of wordpress drag-and-drop area is also quite accurate and clear.

6

Choose or Select are equally descriptive terms. Depending on your users, you could also choose to be more elaborate with something like Select files from your computer

4

I'd like to add that behavior of the control is prior to the wording.

There is not one true best wording; the wording depends on the behavior and the purpose; and there are many different ways to approach this.

Assuming the user first selects the file, then submits:

  • Do you want to support selecting several files, before submitting?
  • Will a user be able to edit that list?
  • Is the path important?

The wording you choose depends largely on the behavior design. Just a quick example:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Now, another example, assuming you would like to

  • display the full path
  • support pasting of a path

In that case you will need an editable textbox. I have no backup on this, but I believe most users understands the ... button just as well as the Choose file button, when put next to a textbox.

mockup

download bmml source

2
  • 1
    Ellipsis doesn't seem to be intuitive for casual and first-time users ... :) May 20, 2013 at 21:20
  • That can be debated, but here it merely serves as an example.
    – JOG
    May 21, 2013 at 7:58
4

In my opinion 'Choose Files' or 'Choose File' (for single file upload) is the best way. as said it's clear. and it isn't large.

My experiences with long labels for upload are that people ain't going to read what's on the label. So limit your words to like 2 instead of 4 of more. (Choose files to upload) for example.

2

I'm with Apple.

"Choose file" describes what you are actually doing.

I think "uploading" and "downloading" are always a bit confusing.

...uploading to the computer or from the computer ?

1

If you're going to go with a Select Files... label, Select Files to Upload is a better explanation than Select Files from Computer. Explaining the action in terms of what they're doing or what they need to do, which is a constant, keeps the label relevant in a number of different scenarios.

For example: Some users who have just plugged in a thumb drive, inserted a CD or had a file on an external hard drive, may think that the option Select Files from Computer is not for them. I have seen many beginners on a computer who do not associate those media devices as part of their computer.

However, there is no way that someone can be confused about the statement Select Files to Upload, because that explains the action in terms of your app.

1

If you target tech-savvy audience, then "Browse...", IMHO, is the most associated word for "Open up the system file dialog, and let me navigate through the folders of my computer's hard drive to locate a local file". At least that is what I expect from experienced computer users, who see "Browse..." all the time, and know exactly what would happen if they click it.

With the other alternatives you mentioned, they might need to think about it for a split second before they realize it's the same thing (see Krug's famous Don't make me think!). The reason the products that you mentioned use more "friendly" and less "technical" terms is that they target a wide audience.

If your product is aimed at experienced users, they might feel more comfortable with the traditional and conventional terms. But as always, and like so many other answers around here, there's no better advice than to test and see how your target audience responds.

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.