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'd like to create a dropdown list control in a form that allows users to either select a value from the list, or type a new value. Typing a new value and saving the form will result in that new value being added to the list for future use. I realize this may not be the standard UX for a dropdown control, so what is a good way to visually differentiate to users the difference between picking an existing value and typing a completely new value? We'd like them to easily understand when they are adding a new value to the list instead of using an existing one.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this question
1  
If I'm not mistaken, this is where "combo-box" got it's name; it's a combo of a list box and a text box. You can select from available options like a list box or you can type something new like a text box. If you're kickin it olde skool and coding some VB, it was one of the intrinsic controls msdn.microsoft.com/en-us/library/aa242120%28v=vs.60%29.aspx but I think it's more common practice to have an "other" option in your list and then a separate comments text box that becomes active/required when you choose the "other" option. –  Yes I use MUMPS Jul 3 '13 at 1:21
    
I realize now that I shouldn't have interchanged the words combo-box and dropdown. What I really had wanted to ask was specifically for combo-box. But I won't change the question at this point. –  Otter Jul 3 '13 at 13:20

2 Answers 2

up vote 2 down vote accepted

Simple and a bit old-stylish implementation, but it requires minimum javascript and uses standard input elements. Elements with blue border are autofocused.
enter image description here

Enter manually option is at the bottom of the list, i.e. user chooses it only after browsing all other options. Then using javascript input field below gets focus.

share|improve this answer
    
One thing to watch out for is if you are allowing users to add new options that will then be saved to the list for future use, you might end up with a list that has Cheeseburger, Cheesburgers, and Cheeseburgerz. –  Yes I use MUMPS Jul 3 '13 at 1:24
    
Choose task takes less effort than typing one, so laziness should win. Although it's always a bit risky to give power to users. –  Alexey Kolchenko Jul 3 '13 at 3:09
    
the level of effort involved in choosing depends on the number of options in the list. If there are 3 items in the list, you might be right; it takes minimal effort to select, but if there are 20,000 items in the list, you need to sift through a lot of junk to see if the one you're looking for is there, so it will be easier to just type it. Also, it depends whether your users are mouse people or keyboard people (or if it's a mobile app, finger people). –  Yes I use MUMPS Jul 3 '13 at 21:08

What you are looking for is something like what we do in 'tag' fields. You show the available options, but can create new tags there itself.

Basically, treat it as an input box (remove the drop-down), and show the available options as a contextual search.

enter image description here

share|improve this answer

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.