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.

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

share|improve this question
1  
Ctrl+G in the text editor will open SO's own image field that does what you describe. –  zzzzBov May 30 '12 at 17:31
add comment

10 Answers

up vote 25 down vote accepted

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.

enter image description here

share|improve this answer
    
I totally agree re: SO's pattern being confusing. I'm thrown for a loop quite often by the sequence of controls to press. –  peteorpeter May 30 '12 at 17:12
    
Yes, this is a very simple method of providing the two options equally and it fits in with our application quite nicely –  Tom Carter Jun 5 '12 at 15:05
add comment

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.

enter image description here

share|improve this answer
add comment

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
add comment

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:

enter image description here

share|improve this answer
add comment

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

TinEye's image uploader

share|improve this answer
add comment

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

enter image description here

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.

share|improve this answer
8  
I find this control to be confusing - I screw it up frequently. The underlying pattern makes sense, but the graphic implementation is sooo bad. The "center-everything" layout is ragged in every way, it's not clear that "from my computer" isn't an action itself, and there is mix of three styles of button-looking elements that each do different things. For selecting the image input type tabs, iOS-style toggles, radio buttons, or vertical stacking would be better than a button bar. –  peteorpeter May 30 '12 at 17:23
    
(I wouldn't recommend this as a pattern without some caveats.) –  peteorpeter May 30 '12 at 17:24
3  
Note that there is very little that can realistically be done to style the "choose file" component of the form - different browsers show it differently, and CSS support for styling it is terrible. –  Erics May 30 '12 at 17:46
    
@peteorpeter: Good point about the problems with this visual implementation but vertical stacking is even more confusing because it gives the impressions of the ability to upload multiple files. –  dnbrv May 30 '12 at 18:05
    
@Erics: It's possible to replace it with something custom but it takes a lot of JS to accomplish (see GMail's implementation of attachment command). –  dnbrv May 30 '12 at 18:07
show 5 more comments

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

share|improve this answer
2  
When the URL field is expanded, it gives an impression of the ability to upload 1 image per the 2 different methods. –  dnbrv May 30 '12 at 18:10
add comment

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.

share|improve this answer
    
Second options isn't going to work because Select a file... button next to a URL field looks weird. –  dnbrv May 30 '12 at 15:14
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.