Adding items to dropdown list on-the-fly?

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

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.