Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
6  
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 Jul 8 '13 at 19:02
2  
Sadly, Art Directors are often the last person you want to be asking about usability issues. :) –  DA01 Jul 8 '13 at 23:16
    
uxdrinkinggame.com/drink/… –  rk. Jul 9 '13 at 17:21
    
How hard is it to apply some styling to a radio button? –  bungeshea Jul 17 '13 at 10:07

3 Answers 3

up vote 25 down vote accepted

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.

share|improve this answer
    
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 Jul 8 '13 at 17:24
2  
Be that as it may, your AD is wrong. That UX is not what is expected when presented with checkboxes. –  norabora Jul 8 '13 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. Jul 8 '13 at 17:33
6  
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 Jul 8 '13 at 17:37
    
And if worse comes to worst, you can follow the hipster trend of using round checkboxes - ux.stackexchange.com/questions/12512/… –  rk. Jul 8 '13 at 17:39

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.

share|improve this answer
    
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 Jul 9 '13 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 Jul 9 '13 at 16:22

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.

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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