Providing a user with the option of a drop down or a custom entry textbox on a web form?

Question

On a web form I'm currently working on there are several places where there is a drop down of common entries, and a text-box below which a user can enter a custom entry type.

I'm at a loss as to how to format this better from a user experience perspective.

The alternative I tried is adding an option to the drop down which upon selecting using JavaScript to display a text-box which the user can input their custom entry type into.

This site's target customer base is the elderly. When I tried to use this option my elderly client mentioned a good point.

When he was first trying to use the drop-down, he assumed that if he selected the "My entry type is not listed here" that that would be his entry type. I.E. he didn't immediately realize that there would be a means to enter a custom entry type, which made him attempt to pick the option most closely related to his entry type that was listed in the drop-down.

Is there a reasonable alternative to this method, in which a user can pick from a drop down, but easily recognize that if their option is not listed, they can add a custom entry type? Is there a way to accomplish this without clogging the form with the drop-down and the "Other Type" text-box simultaneously?

Answer 1

You can use type assist within a text field, just like in google search text box. It can help to get options to select, as well as add new entries.

Answer 2

Type assist is best used to

• reduce seek times in large lists
• offer ambiguous, synonymous, redundant items
• speed up choices by showing item structure
• avoid typos and duplicates

The usability of this complex element is influenced by the design of the rules

• item entry (differentiation between text entry and item selection)
• offered alternatives (item and string match highlighting, how items are reduced)
• recognition/selection (when multiple choices are allowed)
• item addition (if you can add non-listed entries)
• submission/acceptance (feedback about which item is being really used, typed entry, first hint, selected hint replacing the typed one, etc)

Depending on the type of data entered, start with a clean field (forces user action before hinting), or a pre-filled dropdown (explains the structure of data). It's a trade-off, depends on data and users.

Explain the rules of the interaction (labeling the dropdown, field or hints) to indicate if a non-listed (new) item will be accepted.

Indicate end of the interaction (which is different from end of the search/hinting). This is tricky, especially if the form is not the only input field - do you have rules to distinguish an entry as 'done'?

StackExchange uses this method in tag filters, using all modes in a decent way (it is different across the sites though).

Compare different implementations in major javascript (jQ) libraries -- chosen, selectize, Select2. Each has some 'signature features' of its own. Like selection of multiple items, structured lists, adding new items, etc.