18

Can someone point me in the direction to articles regarding checkboxes and radio buttons?

I'm in a discussion with an Art Director and he is convinced it makes more sense to use checkboxes because radio buttons look uglier.

Here's the scenario, there are 2-4 steps:

User is presented with step 1 where the user may choose a single option out of 6.

Based on the selection made in step 1, the user will be either presented with a final question that is multi option. Or they will be presented an additional step where the user may only choose a single option.

The AD is convinced that all the fields may be checkboxes. I personally believe all the options where only a single option may be chosen should be radio buttons.

Is there a right or wrong in this scenario?

Improve this question
5
  • 9
    NO. A Checkbox is a yes/no state for one item. A Radio Button is a group of yes/no items where only one yes vote is allowed. It allows one yes selection for one item out of a group of items. DO NOT CONFUSE THE METAPHORS.
    – Alex Zavatone
    Commented Jul 8, 2013 at 19:02
  • 6
    Sadly, Art Directors are often the last person you want to be asking about usability issues. :)
    – DA01
    Commented Jul 8, 2013 at 23:16
  • 1
    uxdrinkinggame.com/drink/…
    – rk.
    Commented Jul 9, 2013 at 17:21
  • How hard is it to apply some styling to a radio button?
    – shea
    Commented Jul 17, 2013 at 10:07
  • What about toggle buttons? they can either be mutually exclusive or multi-select.
    – J. Dimeo
    Commented Oct 17, 2015 at 1:38

3 Answers 3

Reset to default
29

Answer: No.

Checkboxes vs. Radio Buttons - Nielsen Norman 2004

Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.

Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others.

Improve this answer
9
  • Thats exactly the article I linked to the Art Director. Unfortunately it wasn't enough to get my point across. The current UX is that the user checked a checkbox. If a user decides to check a different checkbox the first checkbox is unchecked.
    – Anthony 'Ants' Nguyen
    Commented Jul 8, 2013 at 17:24
  • 2
    Be that as it may, your AD is wrong. That UX is not what is expected when presented with checkboxes.
    – elemjay19
    Commented Jul 8, 2013 at 17:28
  • 3
    @AnthonyN You can try pulling up your job description as an UXD (Information Architecture, Interface Design, etc.) and compare it with the ADs (Make things pretty - NOT messing with the IA/ID) and tell him to stand down ;)
    – rk.
    Commented Jul 8, 2013 at 17:33
  • 8
    If an argument to authority (NN/g) is not effective, then put together a usability test with the two options and hopefully you will have some direct user feedback that says the incorrect usage creates confusion, increases task abandonment, etc. Their opinion is subjective based on aesthetics, so actual objective facts that the design will undermine the user might be your only hope. Arguing for a design element that hurts the bottom line is a harder position to defend than aesthetics.
    – Charles Wesley
    Commented Jul 8, 2013 at 17:37
  • 1
    even worse than the hipster trend for circular check boxes is the sites that model them like flick switches, implying they need to be slid across (like this site: lite.launchlist.net) when actually they can be clicked. The implied mouse action is much trickier than the hidden one and the resulting UX is poor, even though it looks pretty.
    – Toni Leigh
    Commented Jul 8, 2013 at 22:39
5

I worked on a project where the initial design used single-select checkboxes. The javascript for managing it was awful. If you do go down the path of mucking with checkboxes and radio buttons, do it with styling, not function. Some resources:

I've not used most of these exactly, but I have done a few similar tricks, the original source for which I can't locate right now.

Improve this answer
2
  • 1
    Actually the radio buttons were stylized using CSS to match the same styling of the check box. Underneath it was still a radio button but to the end user, they would not be able to visually discern a difference. And that to me is poor ux.
    – Anthony 'Ants' Nguyen
    Commented Jul 9, 2013 at 5:47
  • I agree with you. My first point was that css'ing it is head and shoulders better than js'ing it. My thinking in posting the links was that maybe you could find an alternative acceptable to your boss/stakeholders that isn't such poor UX.
    – Patrick M
    Commented Jul 9, 2013 at 16:22
2

No, the checkbox and radio button are very well established user interface elements, to swap them would be akin to swapping the brake and the accelerator in the car (though not with as dire consequences).

If your art director thinks they are ugly you could contrive something with JavaScript and CSS which functioned like either but looked much prettier than either checkboxes or radio buttons. You can then use hidden form fields that are also updated on click to provide the form submit data that you will require.

But please don't make a radio button look like a checkbox, just make a prettier radio button, and, make sure you've covered everything that a radio button can do (i.e. the ways it can be checked).

This is not particularly tricky mark-up or JavaScript and would leave you with unconfused users and a happier work relationship as both your requirements would be satisfied.

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.