GUI Design - ComboBoxes Versus Lists or RadioButtons

Question

When should some GUI elements be used over others? For instance, how do you choose between a ComboBox, RadioButtons, or Listbox? For instance, I have seen ComboBoxes used for as many as two items and radio buttons for two items as well, on the same panel. How do you maintain a constant, intuitive GUI interface that is not confusing to the user?

Answer 1

From what i recall of the MS design guidelines, you should use radio buttons for up to four items and then a combo box for any more. One consideration is that combo boxes hide potential data while radio buttons always show all options. The drawback with radio buttons being that they take up a great deal of room. List boxes? i never use them. Logically they are no different than radio buttons in selection or layout so you might as well use radio buttons.

There's actually a great book that addresses questions like yours. It's currently in its 2nd edition

Handy link for MS UI guidelines in a single page. It doesn't actually address your question directly but a handy reference nonetheless. Here's a radio button-specific link.

Answer 2

Radio buttons are often used when one selection is mutually exclusive to the others. For example, if you had a set of colors and only one is permitted at once, you'd use radio buttons.

Comboboxes support this style of single selection, but they also allow more than one selection at a time via a ctrl+click.

Listboxes are mutually exclusive but are more compact than radio buttons once a selection is made.

For GUI consistency, try to follow the GUI design guidelines for your platform (Windows, Mac, etc.)

Happy coding,

Scott

Answer 3

If only one item may be selected at a time, I would use radio buttons up to three options. For four or more I would go with a combo box. If several items may be selected, or if the user will select other items in the list frequently I would switch over to a list box (space permitting) to minimize the number of required clicks.

The Windows User Experience Interaction Guidelines has a some information about various controls, where the detail page for each control contains a section called "Is this the right control?" (which suggests to use radio buttons for up to 7 choices).

Answer 4

There is no single rule to follow. Sometimes it's just whichever fits the design better. There are certainly some common sense guidelines to follow -- you don't want 100 radio buttons, and it doesn't make much sense to have a combobox with just two or three items.

Basically, though, you want to hide as little information as possible. If there are two choices, putting them in a combobox hides the unselected choices. OTOH, if you have lots of radiobuttions they make take up so much space that you show less of other controls or other data.

As with most UI questions, you need to answer the question "what makes the program easier to use?" rather than "what rule should I follow in this case?". Of course, the fact that you asked the question means you are trying to learn what makes programs easier to use. Give some serious thought to what you think makes the program easier to use, then let a small handful of people use it and get their feedback.

Answer 5

Radio buttons vs. combo box (drop list mode)
As mentioned, usually if your options for selection are greater than 3 or 4 items, then use a combo box. However, there are exceptions, because using radio buttons show all the options at one time. The other biggest consideration in this comparison is the dynamicism of the options. If there are a fixed number of options, then tend towards radio buttons (subject to the other guidelines). For a dynamic list of items, then it's far easier to implement as a combo box since there are no GUI layout/design modifications necessary when you want to add or remove an option. I believe it's also more intuitive to the user since an additional option should belong to the "group" represented by the combo box. You just have to make sure that the new item belongs to the group -- I've seen combo box items that completely broke this rule, and the resulting UI is almost indecipherable to a new user.

Listbox
This is a far more complex control than either the radio buttons or the combo box, and IMO is not directly interchangeable with either of those controls. There needs to be a compelling reason to (a) display multiple options, and/or (b) use the multi-select functionality -- and all that has to happen where it's not possible to use a series of radio buttons or a combo box. Usually, for a list of objects, I'll use a ListView in details mode, but as the dominant part of the UI. Radio buttons, combo boxes, and list boxes are normally supporting UI elements.