If user doesn't find an item from the list, they should add it using “add a new item” option.

Are there any patterns, guides or best practices showing where to put an “add a new item” option?

3 options showing possible solutions

  • Is this a single or multiple option selector? Commented Mar 26, 2014 at 16:21
  • 1
    It seems everyone is divided on this one. Question: What is the context of this menu? How many items are expected to be in the dropdown? 10 or 100 or 1000? Therefore is the dropdown the best solution for what you are trying to do?
    – Pdxd
    Commented Mar 26, 2014 at 17:29
  • 5
    What if someone adds a group named "<Add a new group>"?
    – hughes
    Commented Mar 27, 2014 at 3:03
  • @hughes big ol' LOL
    – MonkeyZeus
    Commented Mar 27, 2014 at 13:26
  • I would use one of the first two options. I would not put it inside the combobox. Commented Mar 27, 2014 at 17:55

8 Answers 8


The first design is the worst in terms of usability because the icon is ambiguous, and there's a real possibility that the user won't even see it. The user is going to be focused on (ie, reading) the dropdown menu and s/he can't process the icon at the same time; it's physically impossible. You're counting on the user to either find the icon by chance or by an educated guess.

The second design is a bit more usable because the Add option is more prominent though it still has the same limitations. It depends on how wide the dropdown is and how prominent the Add option is.

The third design is probably the safest of the three because it guarantees that the user will at least scan the existing list. It's not the prettiest, but it's the most intuitive.

A fourth option would be to put the a text link underneath the dropdown menu, where the user has a very high chance of seeing both. You could disable the text link and then enable it once the user has activated the dropdown menu.

  • 2
    +1 I agree. I would opt for the third option too because it forces the user to go through the list first before adding. Also it makes the flow much smoother as well.
    – Pdxd
    Commented Mar 26, 2014 at 15:10
  • 4
    I know I'm late to the party but design #3 is probably the best choice unless you have a very long list. Issues with the long list: they may never see Add a new group at the bottom, ok so put it at the top and bottom, problem solved right? nope, the user picks an option in the dead center of the list and the person returning to edit this item has never used your program from scratch. Dynamically place Add a new group above/below the position of the selected item if outside of the viewing scope of the top/and or bottom of the list. Just my 1/50th dollar.
    – MonkeyZeus
    Commented Mar 26, 2014 at 19:37

Based on the answer from @tim-huynh and the smart comment from @monkeyzeus, here's my two cents.

  1. Design 1 is ambiguous: user can think the icon means "add this group to something" before triggering the tooltip.
  2. Design 2 is better but still, I agree that a non-educated user won't be able to guess that the "new group" option will be to the right-behind her locus of attention, as @tim-huynh states.
  3. Design 3 is a nice start:
    1. the "new group" option is near the user's locus of attention,
    2. it is always good to provide the user an overview of the existing groups/tags/options before enabling her to create a new one,
    3. still, this design fails at long lists, because the "New Group" button will be placed far down the list (which can exceed the screen height in some cases).

The solution I suggest is to implement an advanced select widget, like the smart guys at Gmail did for thei tag button below (sorry for the italian terms... "Etichetta" means "Tag")

Tagging a (set of) email(s) is quite easy in GMail

In this widget,

  • the tag-list is scrollable and has a fixed height, which enables the "New tag" ("Crea nuova" in the image, a "+" icon would have been nice here) button to be always visible,
  • if the list is too long, the user has a searchbar to quickly find what she looks for (my girlfriend has, like, 70+ tags and doesn't even consider scrolling).

I think the first and third options are both possibilities, depending on how it will be used.

If the user will need to add items quite frequently, the + button is definitely preferable out of those two, because it will be annoying to go through the list every time to get to "add new". If it might be a very long list of items, this will also increase the annoyance of getting to the "add new" option.

  • 5
    When using option three, maybe put the ability to add own values to the top.
    – Jan
    Commented Mar 26, 2014 at 14:07

I would recommend going with the first option as it a clear visual indicator that users can add a new item to the list if not found. Here is an example of how you might do it

enter image description here

The challenge with the third option is that you are expecting the user to scroll to the bottom of the list before he finds the option to add a new item. If the items in your list are organized alphabetically and the user is scanning alphabetically, after the particular alphabet is over the user might scan any further

The second option can also work but the concept of a link is a not a strong call to action might be overlooked in reference to the dropdown.

  • Why the downvote?
    – Mervin
    Commented Mar 26, 2014 at 17:12
  • Sorry, I tried to remove it after posting my answer as I was rethinking. I posted the downvote originally because i disagreed with your answer for this scenario. The challenge with this as posted is that it makes it too easy to create groups on the fly without verifying the items in the list. I realized too that all really depends on the number of items in the drop-down menu to begin with, as well as the technical skill of the user.
    – Pdxd
    Commented Mar 26, 2014 at 17:26

I would go with the 2nd option because it clearly states the action and there is little or no ambiguity. Either you select one of existing groups from the dropdown or create your own. User experience cannot get simpler than that!

1st option could also work, but requires some action on users behalf. I assume the tooltip is shown only with a mouse hover and, thus, doesn't trump 2nd option in its simplicity.

However, this approach might be neater out of design and aesthetics perspective. A small simple (+) button looks better than a text link (and in the case of app internationalization you never know how long your UI text strings are going to be and where it might break a line and create a mess).

So to make it work, you could show the tooltip in the beginning, but hide it permanently when user has created a new group once or twice, and, thus, knows what this button does.

Needless to say, it would require some user preference/data storage functionality (maybe localStorage which is accessable in all modern browsers http://caniuse.com/#feat=namevalue-storage, or if more users are expected using your app from a single device/pc then store it in the backend. )

3rd option is clearly worst of them all. User has to needlessly discover a crucial part of functionality, which could be very hard if the list of groups is large and requires scrolling.

  • Nice perspective :) The 2nd option is actually ambiguous. Users might think they need to create a new item whenever they want to perform a selection. The 3rd option is definitely the best in my opinion, mainly because it forces the user to first look up a group prior to creating a new one.
    – GETah
    Commented Jan 10, 2017 at 15:00

I would like to add that The third option will depend on the size of the list. If the dropdown is very long, you might want to consider a predictive search, and then use that term to "Add New Group" if it's not found.


download bmml source – Wireframes created with Balsamiq Mockups


If this is a high volume page it's worth investigating with analytic tools to find out for sure.

Ideally you could investigate your users using web analytics to determine the best answer for your user base expectations. clicky.com, for example, allows you to time each duration between the click on the form element above the item group and the form element after the item group field. Then you look at the analytic timing diagram and do a histogram of the duration users spend on the "item group" field.

You don't necessarily need to do this timing analysis with an A/B setup if you want you can just pick one, build, and check for severity of design flaws later. later, you look at the histogram of just people who choose the "add new category" option and check for out of sequence use (they didn't see it at first and had to go back up to that form element later). If you have a large enough sample size you should see distinct peeks in the timing histogram with each peak representing a different user models time to recognize the functionality. As a fun exercise, you can profile the distinct groups of your users base by looking at the peaks in the timing histogram and assigning each peak to a different user mental model without the need for a survey or other annoying feedback mechanism normally used for segmenting an audience.


The third option is best in my opinion however hard to implement as you will need special checks to perform a special action when that item is selected. Furthermore, longer lists will make this alternative not very user friendly.

I would go for the second option but make sure to give the "Add new group" option a lower importance compared to the combobox iteself. This is to tell users that they first need to look up a group in the drop down before adding a new one. Having the dropdown and the "Add a new group" on the same line kinda makes them of the same importance which might lead some users to think that they need to click on the "Add a new group" to get their selection available in the dropdown (even if something similar already exists)

enter image description here

  • In this case, the drop-down would open on top of the link, which would make the link difficult to find for the user when they need it. Commented Sep 26, 2018 at 12:56

Your Answer

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

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