4

We have a dropdown list that allows for the selection of up to 24 city names.

I'm trying to make the case to change that into a combo-box, which would drop down to a suggested top 10 elements, and allow users to type a few letters in order to get a more accurate suggestion. It would also allow us to add an infinite amount of city names, a feature that would be nice for later.

Some people in my team worry that this may confuse users, and that it adds the need to interact with the keyboard when the dropdown way allows interaction with just the pointer.

Are there clear guidelines on when to use which ?

Improve this question
2
  • Just checking to see if this has a mobile use-case, as the point that they are making about interactions with the mouse pointer would result in a different behaviour on a mobile phone for example. Many combo-box implementations provide some help/hint text and appropriate interactions to guide the user, so it comes down to the combination of design considerations you are trying to balance. Generally dropdowns lose their value when the number of items are too high or will grow in the future.
    – Michael Lai ♦
    Apr 6, 2017 at 0:24
  • Also, usually dropdowns on desktops will scroll if you type the first few letters. And, its possible to use a combobox without the keyboard (assuming you make it default to include all values).
    – JanErikGunnar
    Apr 7, 2017 at 1:02

3 Answers 3

Reset to default
2

This is what I use when there are more that 20 elements in a drop-down list:

country combo box

A combo-box allows:

  • type the selection
  • type part of the selection and narrow the results
  • select an option from the list

Data to populate the list may come from a database, so you may have unlimited entries to the list and the user won't get lost and tired of browsing the list.

The user have plenty of options and any of them will allow to select the option.

EDIT: As you specifically requested guidelines, here are some:

VMWare Drop-Down Menus and Combo Boxes

Windows Dev Center Drop-down Lists & Combo Boxes

EDIT (another): The combo box may be used to select one or multiple items from the list:

Multiple selection combo box

Improve this answer
2
  • How does this help in selecting up to 24 cities? This looks like a single select element.
    – UXerUIer
    Apr 7, 2017 at 14:52
  • No, it isn't. It's a multi select. I'll add a picture.
    – roetnig
    Apr 10, 2017 at 6:14
1

A Combo-box is combination of selectbox and text-field, In this case user can either select a city or search and select a city.

A Dropdown button is a menu button, the list items in the menu button has a unique features, either the list items opens a dialog/tab or have some actions.

Improve this answer
0

The ARIA doc explains the trade-offs well:

When constructing a widget that is both visually compact and enables users to choose one value from a set of discrete values, often either a listbox or menu button is simpler to implement and use. One feature of combobox that distinguishes it from both listbox and menu button is that the value of the combobox is presented in an edit field. Thus, the combobox gives users one function that both listbox and menu button lack, namely the ability to select some or all of the value for copying to the clipboard. One feature that distinguishes both combobox and menu button widgets from listbox widgets is their ability to provide an undo mechanism.

My take-aways are:

  • Prefer menu or listbox over combo box because they are simpler to implement
  • Combo boxes enable users to copy to clipboard and undo. If you think those two are important, then combo box it is.
Improve this answer

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.