My boss insists on using checkboxes!

Hi,

I was asked at work to look at a page design made by one of the designers. It displays a list of company products, and the user is asked to select only one of the products then press a continue button.

To select an option however, the designer used a checkbox for each product, which in my eyes is wrong from a usability perspective as checkboxes are for multiple selections; whereas radio is for exclusive choice. The designer however said his boss told him to use checkboxes because, and I quote, “they look better”. When told a radio button should be used, he said it should be made to look like a checkbox.

He’s very stubborn when it comes to things like this, so I was hoping anyone could help me out in providing a grounded explanation why using a checkbox in this case is wrong on all counts.

If you think I’m wrong, then please say so … with a grounded explanation why :slight_smile:

Thanks in advance.

You can always make the radio buttons look like checkboxes with some CSS & JavaScript. For other user agents it’ll still be a radio button in the source.

if you must you must… but I would probably try to approach him with some backup material. Find an article somewhere by someone important explaining the difference. Explain to him that making a radio look like a checkbox is the driving equivalent of painting stop signs green (because they look better that way lol). They are red for a reason, and radio buttons are round for a reason. So people (well, some people at least) know what interaction to expect from it.

Of course if the juice isn’t worth the squeeze I’m sure you could write some css to style the radio, or use some javascript to make a checkbox to function like radio.

True, but making them look like checkboxes - is it me or does it give the user the wrong impression, as they operate with multiple selections in mind? In this case though, you can only select one.

Do you have another view on this rustybuddy?

To me this is similar to making portions of text underlined and blue when they’re not links.

There are certain “de facto” standards that clue users into what the functionality is. If everywhere on the web checkboxes “work” by allowing multiple checks, that’s what users are going to expect in terms of behavior. Misuse of form elements is sure to confuse.

Maybe you could risk doing a mock-up with intentionally broken functionalty to get your point across? Of course this depends on how tactifully you can say “but doesn’t it look better?” and what his temperment is.

Or maybe he’d settle for square boxes around the radios?

That’s right. You’re also using the HTML tag in a way that it wasn’t designed to, like using an A tag to submit a form using JavaScript. To me, any website should operate properly without needing CSS or JavaScript, which in my opinion are enhancements.

Beside, he’s the boss! He decides…

It all depends on whether he wants people selecting a sinle option or selecting multiple ones.

If people select multiple options and it then rejects when they submit the form then they will be really annoyed.

t all depends on whether the boss intends that the form be annoying and drive people away from the web site or not.

Only one option can be selected. It is about avoiding users getting annoyed, that’s right, and as a user myself I’d be frustrated if I was told I’d selected too many fields.

I would do what he said, use checkboxes, and let users get annoyed. He may not listen to you, but he will listen to customers. They have money.

You can even have a special javascript popup error message specifically for when more than one checkbox is selected. This popup box will include contact information “call us at 1-800-foo-bar or email us foo@bar.org if you have a problem using this form”. This will encourage the silent unhappies to actually get off their butts and complain. Of course, the instructions above that fieldset should say “please select only one” and again, if enough people act like real people (real people don’t read instructions) and they get the popup (just some javascript validation is all) then the boss may hear enough complaints to decide against it later.

It’s a usability thing but not a deal breaker. If people find they can only select one even though it’s a control that means select many, after an error telling them they may only select one, they will comply. A sort of user trial and error (similarly, trying to click on underlined text : ) So this means, good back-end validation messages and a good front-end (JS) validation message which compliments it.

You should show this Muppet any standard Windows interface, and let’s say a Word Processor then ask him to configure the spell-checker does he expect a selection of check-boxes to only allow one choice? Or there only one to be highlighted?

Maybe you should just sledgehammer him;
http://en.wikipedia.org/wiki/Radio_button (allows the user to choose only one of a predefined set of options)

http://en.wikipedia.org/wiki/Check_box (permits the user to make multiple selections from a number of options.)

Perhaps it might just sink-in if he reads something like that. Looketh even a Jakob Nielsen reference too on the ‘Check box’ wiki page; “Checkboxes vs. Radio Buttons” try the subtitle approach of being direct.

<whine> But Rooooobert, they don’t LOOOOOK snazzy like checkboxes dooooooo… </whine>

I really don’t know of a decent way to style radios to look like checks either. It would have to be with JS if it’s going to be cross-browser, what a waste of bloat and garbage for the browser to spend time loading…

[ot]

Radio buttons are cool you can play darts with them and don’t have the option to choose nothing - you must choose one and only one.[/ot]

The Coder had fewer resources but greater resourcefulness… and that is how you defeat the boss. :wink:

Just an idea here… couldn’t you screenshot a “check” whether graphically different to the browsers default or to look the same as it, and then apply the image to padding on the checkbox (while hiding the radio representation itself)? I’m sure I’ve seen replacements for checkboxes to provide larger “ticks” for accessibility reasons (and to theme them better), it must be possible to accomplish - some kind of visual checkbox made from ratio buttons. Though that might cause usability issues in terms of what people expect to see in such decision making processes (IE the check rather than the dot effect). :slight_smile:

See post #2 :cool:

Oh, don’t know how I missed that but in that case… I agree with you entirely Dan :stuck_out_tongue:

Actually he might be able to eliminate the need for JavaScript if he used attribute selectors to base it on the type of input used. :slight_smile:

I’d like to see it, cross-browser. I would be very interested in seeing someone pound the cross- browser styling of form controls well.