5

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: Sane Defaults

Semantic UI: Optional Free Text on Dropdown Semantic UI: Optional Free Text


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 Semantic UI: Searchable dropdown

Custom Input on selection of Other Custom Input on selection of Other

  • I think your initial thoughts are very logical. I mean, you witnessed it yourself, you found it confusing and I think a lot of users would do too. Having an extra field would lead to the least user confusion. – Big_Chair Jul 16 '18 at 11:43
2

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

  • 1
    Last sentence: did you mean "is not ideal"? – Orphevs Jul 17 '18 at 8:58
  • @Orphevs you can say that, I forgot some words in the middle in deed. Thanks for noticing, fixed! – Alejandro Veltri Jul 17 '18 at 13:15
1

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.

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.