Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
    
Is this a single or multiple option selector? –  Binyomin Trager Mar 26 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 Mar 26 at 17:29
2  
What if someone adds a group named "<Add a new group>"? –  hughes Mar 27 at 3:03
    
@hughes big ol' LOL –  MonkeyZeus Mar 27 at 13:26
    
I would use one of the first two options. I would not put it inside the combobox. –  delete this account Mar 27 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.

share|improve this answer
1  
+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 Mar 26 at 15:10
2  
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 Mar 26 at 19:37

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.

share|improve this answer
4  
When using option three, maybe put the ability to add own values to the top. –  Jan Mar 26 at 14:07

If the user can add new groups, they question is if a combo box is the right component to solve this problem.

An option would be to use an editable combo box. This means you can enter new groups directly within the text field:

editable combo box

But be cautious, there a some drawbacks using this type of component.

  • It is very easy to create new groups (might not be wanted to keep consistency).
  • If the groups are not only text, they can not be really used.
share|improve this answer
2  
An editable combo box may be problematic. By making it too easy to add a new item, you may encourage the user to type lots of similar copies of the same item, rather than finding the existing one. –  dan1111 Mar 26 at 10:16
1  
Can you describe what you mean by an editable combo box so that people don't have to follow that link to learn about it? That link could go down or be replaced so to prevent link rot it's preferred if you summarize the content of links and just provide the URL as the citation. –  JonW Mar 26 at 10:17
1  
I think this is similar to a “typeahead”. A user can enter any value if it does not already exists. Otherwise there are suggestions to choose from. –  Jan Mar 26 at 14:05

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.

share|improve this answer
    
Why the downvote? –  Mervin Johnsingh Mar 26 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 Mar 26 at 17:26
1  
@Pdxd No worries, thanks for letting me know –  Mervin Johnsingh Mar 26 at 17:29

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.

share|improve this answer

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).
share|improve this answer

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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