Adding items to dropdown list on-the-fly?

Question

In certain locations in our application, users encounter dropdowns with a number of items, from which they can:

• Select a suitable value
• Add a value to the dropdown list if they don't find a suitable one

If a value is added, it can be selected in that dropdown by other users as well. For the current user, the new item is selected automatically. Currently, the dropdown looks like this:

Users search the list for a suitable item, if they want to add, they need to click the '+' button next to the dropdown, which confuses them.

What is a way to make the UX of this component smoother and more intuitive?

Answer 1

First I would add an information text beside the + button to let the users know how to use it.

What I would worry about is, when the dropdown list will hold a lot of values, it will be very laborious to find the wanted value. So many users will just add the value they're searching for without looking if this value is already there. This could generate redundant data and the drop-down menu will get bigger and bigger (I already have this scenario in my company).

To avoid this, I would use a live-search box where the user can search for the value he needs (like the google search) and you show him already existing values. If there are no existing values, let him add this by showing a notification that he can add this information: Example if you are searching for value example. When you type val, the box shows all existing values which include "val".

^{download bmml source – Wireframes created with Balsamiq Mockups}

And if you type value example now you'll see, that there is no existing value with this text. So show the user, it doesn't exist and that he can add it:

^{download bmml source}

And if you need a dropdown, you could mix it. If you click into the search bar, a dropdown appears with ALL the values and as soon as you type something in, the search will begin like described above.

Answer 2

For dropdowns with too many options, the best behavior i have found is the one of Chosen plugin where the search bar is inside the dropdown

On this you can easily add a link to create a new item, which is better than an outside button : the action must be the most directly related to the elements it act on.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

I don't want to add item to a drop-down list. A drop-down list is something uneditable by intuition.

A better way to do this would be to let me select "other" from the drop-down and then give me a field where I can manually type in my desired item. Don't add the item to the list and then make me select it from the list, that's awkward.

If you want to add my manually entered item to the list, you can add it to the list on the server (am assuming this is some sort of web app) and next time someone visits, show them the updated list.

Answer 4

I had exactly the same issue. I found the perfect solution by taking a look into Asana (https://asana.com/).

Step 1 : You can search directly in the field.

Step 2 : If you cannot find a corresponding value, you can create it on the fly by using the dedicated button.