Web form field - Select box with free text

Question

I've been tasked with building a component to allow the selection of some sane defaults or optionally allow the user to enter free text.

Semantic UI offers an Allow Additions option which enables the user to enter free text on a select drop down.

Semantic UI: Sane Defaults

Semantic UI: Optional Free Text on Dropdown

---

Is this optimal for usability and if so why?

My initial thoughts are this is too similar to a searchable dropdown. Would having a second input field help; Where the user explicitly selects Other in the dropdown and then a new input field is displayed. I don't know if I expect this behaviour from being trained by other forms. Is it bad usability to display new input based off current select?

Semantic UI: Searchable dropdown

Custom Input on selection of Other

Answer 1

Let´s break this down:

1. We usually use dropdowns when there are too many options to display them all in the screen. (space problem solved)
2. But if the dropdown list is long, when opened, the problem remains, plus the problem of the user moving through that "collapsable list" (meaning that you can easily tap out unintentionally and collapse it), so to fix this issue, the "searchable dropdown" comes to the scene. (improved "searchability" and "selectability").

When using the last approach you mentioned, we lose the 2nd point, which is not a good option. That's why I'd prefer the first option.

A 3rd mixed option won't help either: adding the search input and if there's no match, show the option "add other"/"other" in the dropdown and after user clicks it , display the input. But that won't make sense since the user would need to retype the text unless you prefill that for him/her with the same text he/she already typed in the searchable dropdown and maybe a "confirm" button, which is exactly the same behaviour that semantic-ui presents, but simplified and using just 1 input with the "confirm" button being the dynamically generated dropdown option like "'what-user-searched' not found. Add it as an option" or simply "Add 'what-user-searched'.

Bear in mind that the "select other and then display a new text input technique" may be useful when you want the user to go through all the items on the list and only if he/she didn't find the proper option, then specify a custom one (eg: medical conditions). But by its nature, this is probably more usable when using a list of checkboxes than a dropdown. (if you want users to read the whole list it's not the best idea for the list to be collapsible).

Answer 2

This depends on how precise you need your data to be.

If you make it easy for users to enter a custom option then they're less likely to bother looking through a list of curated options - This means you'll get separate results for the same thing. Something like: 'Apples', 'green fruit', 'Granny Smiths', etc. This can make data analysis much more difficult - especially with less distinct terms like job titles.

If, on the other hand, you do not allow custom entries, then you run the risk of users being unable to find the particular entry they are looking for, getting frustrated and abandoning the form.

You need to talk to the end users to find out which options they are going to want to see, what order they should be in, and making it more difficult to submit a custom item than picking one from the list.

You should also be looking at the 'intelligence' behind the look-up: can you train it to offer 'Apples' if the user enters "granny smiths"? This would make it a lot easier for those using the free text to find an option that suits them based on your criteria and their thinking processes.