8

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:

Example dropdown

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?

6

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

mockup

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:

mockup

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.

  • this solution suppose that users will want to create a new item only after they have unsuccessfully looked for it. Is that so ? – Renaud Mar 7 '14 at 9:57
  • @Renaud: Exactly. Because I don't think it makes sense to add an already existing value. – Michael Schmidt Mar 7 '14 at 10:00
  • Sometimes people just want to create a new item because there already know the values isn't in the list. For example when you create a new label on Gmail, you don't need to search if it already exists. – Renaud Mar 7 '14 at 10:16
  • @Renaud: correct – t.hendr Mar 7 '14 at 10:39
  • 1
    @Renaud: Yes correct. But if the user want to add a new one, he need to press the +-button and type in the value. In my solution, he type in the value first, and then he press the dialog to add it. It won't be more complicate. – Michael Schmidt Mar 7 '14 at 13:09
3

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1

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.

  • "Don't add the item to the list and then make me select it from the list, that's awkward." This is not the case, if an item is added to the list, it is autoselected. – t.hendr Mar 7 '14 at 10:37

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.