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)?
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
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.
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.
This is an old question but there are some great solutions in 2015 for this UI/UX....
StackExchange sites including this one...
Trello - choose upload option or paste in URL Popover/Modal...
Gmail Pick from existing upload or gallery
Gmail Upload from remote server by pasting in a URL - Preview is shown after it downloads the file for you too!
Gmail Select from computer hard drive or Drag and Drop to upload file
I think TinEye's approach is great, even though it does take up a lot of space.
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.
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.
Two possible options (that avoid an additional selection of the type of input) are:
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.
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.