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 want to ask people for a logo, not using to much space. The solution i'm using is to have an input text field where you can type in/paste the URL of a logo you may have it on server and a button at the end of the text field if you want to upload it from your HDD.

Here's a link that shows what i mean:

upload control example

My problem is naming it as simple as possible, not more then 4,5 words (space problems). My great great grandma should understand what this thingy does.

Anyone, any ideas?

Thx

share|improve this question
add comment

3 Answers

up vote 7 down vote accepted

Combining the two fields into one is confusing. For instance, it's not clear from the image you included what the button does and what I'm supposed to enter in the field. From your explanation it's clear that you want to allow both options. In these cases, the best way to do that is to actually show the user the two different options.

If space is a concern you'll have to be creative without affecting usability. One way to do that is to have a button labeled "Add a logo" and when clicked, pop open an overlay or dialogue that contains the two controls. The overlay should give you enough space to offer both options with enough room for explanations and error feedback.

StackExchange's upload button is actually a good example of how to do this, but since you only have 1 rep you probably can't see it. Here's how it works. There's a thumbnail of an image, and when I click on it, it shows me an overlay with two tabs: from computer and from the web. From computer is selected by default, probably because that's the most frequently used option. Each tab contains a big field; the computer one is a "browse..." upload field, and the web one is a regular text field where I can paste the URL. Both forms have submit buttons labeled "Upload" and a cancellation button. Each form also includes a single sentence explaining how to use it. This works really well, although you should do additional testing since you want to target grandmas and StackExchange probably doesn't really care that much about them ;-)

A good rule of thumb for something like this is: try to be as clear as possible using plain English. That's what your great great grandma is most likely to understand.

share|improve this answer
    
thanks for the great answer. I'm not a fan of overlays, esspecialy in a flash application that wants to be very fluent and easy to use. I want everything to be seen anytime, anywhere. Using two fields, as you said, is the easiest way to make yourself understood. So, that's the solution. Thanks again for the great answer! –  yoYO Apr 9 '11 at 14:04
add comment

Maybe you can trade some vertical space for clarity?

Upload form

PS You actually can even go without [Ok] button — just upload image by ajax immediatly after it was choosen/pasted.

share|improve this answer
3  
"You actually can even go without [Ok] button — just upload image by ajax immediatly after it was choosen/pasted." Please don't, unless you provide some way of canceling the upload fast. Sometimes you paste the wrong link and it's very frustrating having to wait for the upload to finish before you can correct it. –  André Paramés Apr 7 '11 at 20:44
1  
"Ok" is unclear. What should I expect to happen once I click that? "paste image address" suggests it only accepts pasted information and I can't just write it there myself. In short, I think the labels in your suggestion could be improved. –  Rahul Apr 7 '11 at 21:28
    
André Paramés, of course there should be a way to cancel process. Technically it’s harder, I know, but possible. Rahul, why don’t you propose something instead? –  Nikita Prokopov Apr 8 '11 at 3:59
    
i pretty much like this solution. "paste image address" can be replaced with "from web", "image address" or something. I agree with Rahul with the "paste" issue. And i think the OK button can be used only for the text field. For the Upload button you don't need any additional action. –  yoYO Apr 9 '11 at 14:13
1  
I did; I posted my own answer :-) –  Rahul Apr 9 '11 at 22:51
add comment

Mateo - Rahul is right when he says the image you provided is unclear (I find the function confusing). Labeling should not be used to fix a design weakness, which is really your current challenge. Two icons - one for web, one for hdd - that open a dialog when clicked, would be an improvement.

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.