4

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?

  • Have you thought about just rewording your "custom" option? It seems that it's not clear that you can type in your own response from it. Perhaps something like: "Other - Please specify" (very common in Survey responses) or "Other - Let me type it in" ? – kerr Sep 18 '15 at 0:09
3

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.

  • 1
    While I agree with the general sentiment of your answer, it would be helpful for most people reading this if you were to expand on the reasons why you recommend using type assist. – JohnGB Jul 18 '15 at 5:39
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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