3

I'm working on a product which has a bunch of selectors that can have anywhere between one, and several hundred possible selections with no way to be absolutely certain how many possible options there will be.

Right now I'm trying to determine which parts of the design are better served with a filtered radio button selection vs a combo-box based on expected ranges of options, but I'm running into a problem.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

At what point (how large a list of possible selections) does the combo-box break, and is better served by the design on the right? (which is a modal dialog as opposed to the inline combo-box)

Relatedly, is there a better way of providing the the ability to select from a large list of potentially hundreds of results? (There can only be one selection, and it needs to be immediately visible/readable as text when the user is scanning up and down the page.

  • Would there be a way to split the "several hundred" possible selection into sub groups ? Are they at least sorted so that the user can quickly scroll to a potential target ? – Max Feb 16 '16 at 19:03
  • Sadly no. The list is of the business entities, and our clients are of the "we own hundreds of companies, who may have hundreds of holding companies" variety, and we need to be able to select any one of them. The list of "possibly several hundred" is already the result of sorting and filtering. – Nathanael Feb 17 '16 at 9:19
1

Just looking at your two illustrations side-by-side, it's pretty clear which is a simpler layout. The drop-down takes up a lot less space on the page.

I think once you have to scroll through options, you've gone too far. All your selectable options in a checkbox group should be able to fit on one line. If not, place them in a drop-down.

Depending on the criteria of your filters, a great option would be to implement select2 which allows you to query the options inside. You can also use <optgroup> to categorize your options.

EDIT: Addtionally, if the list is exhaustive (over 100), consider using an autocomplete UI element, similar to Google's search suggestions or Facebook's friend finder. (there are lots of them out there) You can also limit results by having the user select a category beforehand, and only return the results that match it.

  • What about if the dropdown (which has hundreds of entities) is already for the smallest logical categories for our system? This is for selecting the business entity belonging to a customer; our customers commonly have hundreds of business entities, with no grouping scheme that will make it easier to scan through, and nobody wants to scroll through a combobox with potentially up to a thousand (and theoretically, more) options, but might in some cases have just two. – Nathanael Feb 17 '16 at 18:18
  • edited my answer to address that. – invot Feb 17 '16 at 18:40
  • If you like my answer, please select it. Thanks :) – invot Mar 8 '16 at 22:41
-1

I like your question. The longest combo boxes I've seen are usually country lists (~196 countries). I'd say they are still easier to scan visually and navigate than if you were to place them in a 3 column layout like in your example on the right side.

Another benefit of a combo box is that I can just click on a list item to select it, having a couple of hundred radio boxes on the side would look a bit odd in my opinion. Hope this helps.

  • 1
    Are there any studies or research you can think of to support this? – Nathanael Feb 17 '16 at 9:22
  • It doesn't have to be a 3 column layout. (Our legacy system is actually a single column, and whilst it doesn't doesn't display as a radio button group, it has the behaviour of it) – Nathanael Feb 17 '16 at 10:21
  • Are you suggesting he places his checkboxes all in one column? – invot Feb 17 '16 at 16:49

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.