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.

If I have a dropdown with several options, the last of which is an "Other" option, and I want to have a textbox associated with that option, what do you think is the best place to put it? Here are the ideas that I've had:

1) To the right of the dropdown, without a label

alt text

2) Below the dropdown, with a label

alt text

3) Below the dropdown, without a label

alt text

Any other ideas are welcome as well, just trying to decide what way might be best.

EDIT: Like Jon W suggested, the "Other" content would only show up if that option was selected. Otherwise, it will be hidden via script.

share|improve this question
add comment

8 Answers

While I'd prolly agree that #2 is best (with the script-caveat, of course), if you consider the interactive experience created by displaying the "Please Specify" box only after "Other" has been chosen, you'll see that the label might be less necessary that one might think.

I've sketched out a mini interactive prototype of all three of these options, as well as a fourth, which places the label for the text field inside of the field.

I put them up here: http://yoni.me/ops

I recommend trying each of them out, to get a feel for what the real experience is. Ideally, you could do some user-testing, but short of that, at least know what you're choosing between.

~ yoni

share|improve this answer
    
(One thing: I whipped that up in like 5-10 minutes, so I've only tested on Firefox, Safari, and Chrome.) –  Yoni Mar 22 '10 at 15:37
    
When I was reading over Charles' options, I liked the idea of 2. But after playing with your mock up, I now prefer 1 and 4 more than 2... –  Janel Mar 23 '10 at 12:37
add comment

I think the 2nd one is the best of the three.

Perhaps if you were to add some script to the page so that the 'Please Specify' box does not appear unless 'Other' is chosen from the dropdown. That way there would not be any confusion for the user if they have selected a valid option from the dropdown and then wonder what they need to do with this 'Specify' box.

share|improve this answer
    
Actually, in all of these cases, I would definitely have script in place to only show the "other" content as needed - forgot to mention that. I'll update the question to reflect that. –  Charles Boyung Mar 22 '10 at 14:18
1  
OK, in that case I still think the 2nd choice is the best. Giving the field a label gives the user less to think about and helps them on their journey through the form. Placing the field to the right of the option box is less noticable I believe, as the user will be expecting the page flow to be top-to-bottom so may not notice the field appearing in this place. (For the same reason that you shouldn't put a required field indicator (*) to the right of the fields, as this gets missed by the user. That is just my opinion however. –  JonW Mar 22 '10 at 14:35
add comment

Include the "other" field with a label. That's your option 2.

This ensures that all people will be able to use the form.

One design method is to design the form with no interactivity - just like a paper form - and make it as clear and usable as possible. Then (and only then), add dynamic features where doing so will improve the user experience.

Following this approach, the initial design would have a field labelled "If other, please specify". You could then add interactivity by making the field and its label appear and disappear when appropriate. You might want to reword the label, but where's the benefit in removing it entirely?

Others have suggested putting the label inside the text box. (For example, in your option 1.) This can work but it's tricky to get right.

share|improve this answer
add comment

I would rule out option 3 for lack of prompt. I would say that the choice between options 1 and 2 depends largely on the overall layout of the page.

Another criteria IMO is to make the "please speficy" field appear without resizing the page over all or causing other elements on the page to shift.

One more thing: I would add a prompt for option 1, like this:

Showing prompt in 'Please Specify' field

share|improve this answer
    
Hisham, that's what I prototyped in version 4: infinityplusone.com/experiments/other-specify/version4 You still like the interaction? (I think I still like it.) ~ yoni –  Yoni Mar 22 '10 at 17:13
    
UXMAtters have just published an article about putting the Hint text inside the field, rather than outside. Basically the findings are 'don't do it'. It's an interesting read but doesn't seem as scientific as some of their usual reports, so may be more subjective than I would have liked. Still worth a read though. uxmatters.com/mt/archives/2010/03/… –  JonW Mar 22 '10 at 17:27
    
Interesting. While I agree with much of what Caroline is saying, there are some obvious flaws with what she's written, and I'm not sure it is a 1-to-1 response to this question (though maybe it is). First off, her example, as she describes it, is simply a poorly implemented one. With respect to its matching this question, I'd first point out that the style of the text (color/opacity, presence of parentheses/brackets) is an additional visual cue. Next, I'd say that the very nature of the interaction (the field appearing only after the "Other" selection is made) changes the experience. –  Yoni Mar 22 '10 at 17:51
    
This said, I'd be open to the argument that the hide/show interaction is sufficient, at least for the inline (horizontal) version. –  Yoni Mar 22 '10 at 17:52
    
The hide-show interaction is sufficient if the user sees it. But the appearing field may be missed by people with cognitive or visual impairments, or by anybody if they happen to be distracted. And let's not forget screen-reading software. Generally, you should have some sort of label. –  Bennett McElwee Mar 23 '10 at 0:26
show 2 more comments

I tend to do it as in Option 1, but put a colon on the end of 'Other:'.

This way it is consistent with the original labels on the far left - because once selected that is essentially what this field becomes. It also suggests to the user that they'll have the option to enter the specifics which isn't obvious originally.

Pete

share|improve this answer
add comment

Using javascript you should be able to replace the drop down by a text input whenever a user selects the Other option.

Of course you will have to add a × positioned on the right of the text input which will reset it back to the default <select> when you click on it. Don't put the × inside the text input field because mac users will expect the content of the field to be cleared onclick. And remember to add a tooltip (using a title attribute for example) when a user mouse hovers the × which explains its purpose.

To answer the question: the best placement is over it (visually it's a switchover).

share|improve this answer
add comment

You may try removing it all together. I designed a form recently where I got rid of the "title - other" box. I took the idea from flickr and we made an editable field where user can put whatever title they need while selecting the "other" option in the drop down list. This way, we removed an additional field and a long list of titles in the drop down.Wish I could attach a pic, not enough reputation as yet here :)

share|improve this answer
add comment

When a user has to type in, they shouldn't have to make an "other" choice as well. The user already looked through all the choices and they're putting in the effort to type. Typing something into "other" box can either reset the drop down choice to blank or disable it.

share|improve this answer
    
HTML support for combo boxes is not yet widespread. –  Brian Aug 13 '12 at 13:07
    
Perhaps i wasn't clear. The drop down choices do not include "other". An "other" entry box is always shown. The user typing something into this field already says that they're making an "other" choice, without making the user do this selection and typing it. In other words, it's superfluous to give an "other" option, given that the user types one anyway. It makes the form more complex than it can be. –  Chris Aug 13 '12 at 22:01
    
I misunderstood. I agree that if you do show an "other" text entry field, you should auto-select "other" if the user types in it. However, I do not agree that you should not include an "other" field in a text-entry field, as a user accustomed to the more common strategy of having an "other" field will find this confusing. However, sticking "other" at the bottom in its own section is not unreasonable. This way, users who expect to need to select "other" will not be confused but users who do not wish to select "other" do not need to do so. –  Brian Aug 14 '12 at 0:16
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.