5

I can build all the functionallity of a checkbox and a radio button with a select/dropdown, which results in a more lined up interface and I get around with lesser different types of GUI-elements.

So why should these elements be used anyway.

Improve this question
1

5 Answers 5

Reset to default
17

Checkboxes vs. Select:

To replicate checkbox functionality (choose 0 or x out of n), you'd need to employ a multiselect element. There's a lot of research out there indicating that most users are blissfully unaware of how to select multiple items in a multiselect element.

Radio Buttons vs. Dropdown:

Which one to use, then? That really depends on your scenario.

Scenario 1: "Please select your country from this list of several hundred"

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • The label clearly indicates the kind of options available – no surprises here
  • A dropdown will make sense in terms of decluttering the interface/hiding unnecessary information from the user

Scenario 2: "Do you like ice cream?"

mockup

download bmml source

  • The dropdown hides important information (the existence of an option other than "Yes" or "No") from the user.
  • The amount of space saved by a dropdown (2 vertical units) is negligible.

tl;dr: Whether to use Radio Buttons or Dropdowns really depends on your use case. Every time you use a multiselect, a cute kitten dies.

Improve this answer
3
  • 1
    Yeah, didn't now about any research, but I found multiselect stuff in one listbox strange, too. so I always use 2 select boxes, one with all the data an one where the selected items get moved to. The end product seems much faster to grasp than to look which of the boxes are checked.
    – K..
    Sep 6, 2012 at 18:10
  • 1
    +1 for the warning of consequences to cute kittens. That's the only thing here I didn't know before.
    – iconoclast
    Jul 8, 2013 at 19:39
  • 1
    Good answer, +1. Anyway, IMHO you shouldn't say lot of research out there without linking some.
    – Dinei
    Apr 22, 2017 at 18:59
4

Radio buttons:

++ Options are visible (Dropdown: needs a click to reveal)
++ Selecting an option takes only 1 click (Dropdown: 2 clicks)

Checkboxes:

++ Options are visible (Dropdown: needs a click to reveal)
++ Everybody knows how to multiselect (Dropdown: need to press ctrl/cmd key)

Improve this answer
2

For small numbers of options checkboxes and radios:

Improve this answer
1
  • 1
    Excellent, concise answer. I would just add that checkboxes, in particular, have the unfortunate property of forcing a default value (a property not shared by the drop-down menus used by the questioner). Given that, radio button sets should be preferred over checkboxes, and should be the go-to elements for choices with few options.
    – A.M.
    Aug 7, 2013 at 14:03
1

At first, checkboxes and radiobuttons make choices visible and don't require any additional actions to display the set of choices.

Second, their form displays without any text explanations the possibility to make one-from-many or many-from-many choice — and 'cause checkboxes and radiobuttons are recognisable, basic patterns, these elements have great affordance. In dropdowns and selects it will require additional cognitive efforts to understand the possibility of multiple choice, or any additional labels.

At third, dropdowns and choices can't display single checkbox choice correctly — usually it will require two choices ("yes"/"no") and a lot of actions instead of simple click.

And fourth, selects can be perceived as textareas, what makes additional confusion to users.

So, it is not so simple, and lined-up interface made in visual form made of selects and dropdowns will not show the difference in essence and will be much more harder to use.

Improve this answer
1

Just to toss in my two cents, one thing that really irks me is when you have a radio button with only two options, such as "Do you want a cat?" -> "( ) Yes ( ) No". Checkboxes make a lot more sense here ("[ ] I want a cat").

Improve this answer
2
  • Of course the difference between the two is primarily in setting defaults. Unselected radio buttons don't offer a default and can easily fail to validate (which you may want, if you want to force the user to evaluate the question more carefully), while an checkbox will validate fine when ignored.
    – kastark
    Sep 20, 2012 at 10:40
  • @dhmholley You are right that the difference is to do with defaults, but actually radio buttons can be made to offer defaults (whether or not defaults are a good idea ux.stackexchange.com/a/43366/33314). So essentially you have a flexible option (radio button set) versus an option that forces you to have a default (checkbox).
    – A.M.
    Aug 7, 2013 at 13:54

Your Answer

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

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