What's the least confusing UI for offering to either enter a URL or upload a file?

Question

I have a simple form where a user may contribute a link or upload a document adding a title and optionally some notes.

What's the best UI for allowing for either a URL or a file (but not both)?

Answer 1

Since this is a form, I would actually just provide two buttons inline to choose the image, and not a separate dialog or a set of radio buttons.

I believe this is actually better (in this instance) than having a single image button which opens a dialog to choose the option to then choose your picture. If you're choosing from your computer, the button on the main form would allow you to instantly open the file browse dialog as opposed to forcing the user to go through another dialog. Also, unlike radio-selection options (like the StackExchange option) both options are clearly present up front and are given equal weight.

An example of this would be the imgur upload control, shown below. I might update it to make it more clear that the "Computer" and "Web" buttons are a picture source by indicating "From Computer" and "From Web" or something similar.

Answer 2

I think I would agree that one option should be more prominent than the other especially if there is a strong preference for one option. Perhaps something like this can work.

Answer 3

Our very own Stack Exchange has this implemented relatively well (just click the image icon in the toolbar above the answer field):

Though, I would just improve the switch between the 2 modes by increasing the clicking affordance of the inactive method (right now it doesn't look clickable).

The key in this patterns is having some semblance of tabs: they clearly indicate the method of accessing the file.

Answer 4

I like using link UI conventions in this case, because that is what the user is doing... linking.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 5

I think TinEye's approach is great, even though it does take up a lot of space.

Answer 6

One thing I personally stay away from is putting both options equally visible on a same page.

Speaking generally, I'd say first determine whether from your or the point of view of your company, one option is more desirable than another. Do you expect one option to be more frequently used than another by your users? Unless, your and users points of view are conflicting in some difficult ways, Pick the primary one and make it the default. Of course, you'd want to have a clearly labeled alternative shown but when visual hierarchy is right, the alternative should look secondary to this default, primary option.

Answer 7

Two possible options (that avoid an additional selection of the type of input) are:

1. Selectively enabling/disabling the unused control
   When the user fills in the URL field, disable the file upload and vice-versa. Here it is important to clearly communicate the either-or relationship and give the user an clearly visible way to change his mind at any time. Clearing the used field, for example with a dedicated button, should then reenable the other field.

2. Auto detection of input
   I don't think there is a straightforward way of auto-detecting the input in a regular HTML field and deciding which type of data it is, since the text field and file upload element are distinct controls.
   There might be a way around that with the new HTML drag & drop API which could be used to detect when a file is dragged onto a File/URL text input. Dragging in files from the desktop into a browser is not yet a common pattern though and has to be explained and implemented extremely carefully.

Answer 8

While I don't like having to click to choose an option, I think it's the lesser of several evils. Google does a good job with their image search input:

Answer 9

I was very pleased with how Pinterest handled this conundrum, but I thought it could be improved a little (and made more generic).

I created the below wireframe for an internal process, and would recommend it for you, too. Wherever it says "Product," substitute "image" or whatever element you intend. This wireframe was for a specific form to add products into our system, but it applies to anything.

Note that it starts with two clear paths, represented iconically and with simple wording. From either path, you can switch to the other. And if you go the URL path, if any clarification is needed on what element to upload, it's laid out for the user to make an easy selection.

Answer 10

I would use radio buttons to show the appropriate interface for either choice, but select by default the option you think people will use the most.