SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Location
    Cambridge, UK
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Thanks in advance.

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Location
    Cambridge, UK
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Grossman View Post
    You can always make the radio buttons look like checkboxes with some CSS & JavaScript.
    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.

    Quote Originally Posted by rustybuddy View Post
    if you must you must....
    Do you have another view on this rustybuddy?

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,034
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    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?

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Location
    Cambridge, UK
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    To me this is similar to making portions of text underlined and blue when they're not links.
    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.

  7. #7
    SitePoint Zealot codythebest's Avatar
    Join Date
    Jul 2001
    Location
    Fuerteventura
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Beside, he's the boss! He decides...

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Location
    Cambridge, UK
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    It all depends on whether he wants people selecting a sinle option or selecting multiple ones.
    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.

  10. #10
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  11. #11
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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.

    Quote Originally Posted by http://www.useit.com/alertbox/20040927.html
    No professional interaction designer would make the mistake of using checkboxes when radio buttons are called for. The distinction between these two controls is one of the first things taught in any interaction design class.
    Last edited by xhtmlcoder; Mar 24, 2010 at 08:23. Reason: Improving clarity.

  12. #12
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    <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...

  13. #13
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by Stomme poes View Post
    <whine> But Rooooobert, they don't LOOOOOK snazzy like checkboxes dooooooo... </whine>
    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.


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

  14. #14
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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...
    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).

  15. #15
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    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)?
    See post #2

  16. #16
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Oh, don't know how I missed that but in that case... I agree with you entirely Dan

    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.

  17. #17
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •