4

Possible Duplicate:
Should the cursor change to pointer over radio buttons, checkboxes, their labels and selects?

My problem is that the little checkbox and radio buttons for form controls in HTML are too small and hard to click. It's also not easy to increase the size of them without resorting to some really hacky methods.

What I usually do is give the label for the checkbox a for="idOfCheckbox" attribute so you can click on the label and it will select the checkbox.

Now I had another idea which might improve the usability a bit more:

.items label {
    cursor: pointer;
}

This is adding a bit of CSS to change the mouse cursor when hovering over the label. In a usual browser this changes to a hand/finger pointer icon hand icon so it should let the user know they can click on the label as well to select the checkbox. I set up a little demo here for you to try.

My thoughts:

  • It's still differentiated from a hyperlink because if it's a hyperlink then it'll usually be blue coloured and have an underline underneath it when you hover over it.
  • I think it is more obvious than the mouse pointer basic arrow basic arrow when hovering over the label which would indicate it was just basic text and you couldn't click on it unless you tried it first and realised you could. Some websites make the labels clickable, bad ones don't so usually you don't know till you try.
  • Added bonus when you hover over it, the checkbox lights up light blue so that's an added visual that you can click the label. The problem with leaving the mouse icon as a basic arrow and just having the checkbox light up blue is that by itself it is a pretty subtle thing for a user to notice and instantly know they can click the label.

Anyway thought I'd get an opinion from the UX experts, is it a good or bad idea?

Solution: Checkboxes are most usable with label tag wrapping the checkbox with display: block and a bit of extra padding around the label so there's more clickable area. Then on mouse hover, the mouse icon changes to hand icon and the background colour of the label changes as well to indicate it's selected. I figured out how to make the whole table row selectable as well. See demo here.

Improve this question
3
  • 4
    I think your question has already been answered here ux.stackexchange.com/questions/23266/…
    – superduperfly
    Dec 18, 2012 at 0:42
  • 1
    a pointer traditionally represents a link action--so that's something to consider. Ideally, all form elements would have a proper label tag association to begin with so this would be a moot issue, but of course a lot of people have built bad forms, so it is something not necessarily intuitive to a lot of folks.
    – DA01
    Dec 18, 2012 at 2:40
  • 1
    For all the work they're doing to try to attract more users, you guys sure have a strange way of promoting the field of UX.
    – Shash
    Dec 18, 2012 at 21:14

1 Answer 1

Reset to default
1

Def my preference over just the box, not quite as usable as if the region between the checkbox and it's label was also hot (such as for touch screens). FWIW, in Safari on OS X 10.8.2, no highlighting appears as you described for the box or the label on hover, so the only indication in your demo is the cursor change. Something to keep in mind since you can't always control environment... [or maybe i'm doing it wrong]

Improve this answer
6
  • Interesting that Safari doesn't do any highlighting of the checkbox on hover. I was doing my testing on Firefox. I think to get the region between the checkbox and label clickable you'd have to wrap the checkbox and text inside the label tag, maybe like in this example.
    – zuallauz
    Dec 18, 2012 at 2:31
  • Chrome doesn't do it either. At least not version 23.0.1271.97
    – JohnGB ♦
    Dec 18, 2012 at 6:20
  • 1
    @zuallauz that only works in firefox, not chrome or safari. it also seems that checking and unchecking quickly causes collisions with the interaction for highlighting text, which then does not check and uncheck the box (dbl tap, triple tap). This may not cause an issue for your purposes. Feels clunky that the entire control doesn't really operate as a single unit. I found jsfiddle.net/qYZFJ on stackoverflow which I think is better and the collision is handled nicer. stackoverflow.com/questions/6293588/…
    – Shash
    Dec 18, 2012 at 8:48
  • 1
    @Shash check this out, I managed to make the whole table row hoverable (including mouse pointer change) and anywhere you click selects the checkbox. It's pretty good.
    – zuallauz
    Dec 19, 2012 at 1:52
  • 1
    well look at that, maybe there's a site out there somewhere that works just a little bit better because i left a comment on my answer to a question that got closed ;-) good stuff...
    – Shash
    Dec 19, 2012 at 2:27

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