11

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?

4 Answers 4

8

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.

6
  • 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, 2014 at 9:57
  • @Renaud: Exactly. Because I don't think it makes sense to add an already existing value. Mar 7, 2014 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, 2014 at 10:16
  • @Renaud: correct
    – t.hendr
    Mar 7, 2014 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. Mar 7, 2014 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.

1
  • "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, 2014 at 10:37
1

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.

Link task to existing project in Asana

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

Create a new project on the fly from the dropdown

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.