11

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 http://rookery5.aviary.com/storagev12/3435000/3435452_8424_625x625.jpg

2) Below the dropdown, with a label

alt text http://rookery5.aviary.com/storagev12/3435000/3435427_4634_625x625.jpg

3) Below the dropdown, without a label

alt text http://rookery5.aviary.com/storagev12/3435000/3435438_4634_625x625.jpg

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.

Improve this question

8 Answers 8

Reset to default
12

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

Improve this answer
2
  • (One thing: I whipped that up in like 5-10 minutes, so I've only tested on Firefox, Safari, and Chrome.)
    – Yoni
    Mar 22, 2010 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, 2010 at 12:37
3

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.

Improve this answer
2
  • 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, 2010 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, 2010 at 14:35
2

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.

Improve this answer
1

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

Improve this answer
7
  • 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, 2010 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, 2010 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, 2010 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, 2010 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, 2010 at 0:26
0

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

Improve this answer
0

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

Improve this answer
0

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

Improve this answer
0

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.

Improve this answer
3
  • HTML support for combo boxes is not yet widespread.
    – Brian
    Aug 13, 2012 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, 2012 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, 2012 at 0:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.