In a form checklist, should whitespace beyond the label text be clickable? Or only the checkbox and label itself? Demo here.
- choice
- choice
- choice
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this communityIn a form checklist, should whitespace beyond the label text be clickable? Or only the checkbox and label itself? Demo here.
There are at least 2 ways to see this problem. On one side, these are called controls for a reason. Providing control behaviors to random (even worse, empty) space goes against the whole concept of control.
However, in accesibiity scenarios, sometimes we "cheat' a little bit and provide a bigger (invisible) clicking area for controls. This is done in order to make things easier to people with some neurological disorders (for example, Huntington's Chorea, Parkinson, general tremors and so on). Same for users with no hands using devices such as mouth sticks, head wands and such.
However, this doesn't mean a whole row of empty space will accept an interaction, because the remedy would be worse than the illness. Just imagine someone using a head wand completely frustrated because white spaces are actually behaving like controls! . Just take it easy, about 15-20% of additional space should work fine.
But this is not only limited to users with disabilities, it will affect users on touch screens, that may use that white space to scroll, selecting options randomly. Even worse, those options will get out of view, because the user is scrolling down.
Some additional clicking area could be of benefit, but don't make it too big, just big enough to provide a certain ease of use fo accessibility purposes
According to the Fitts's law the bigger the click area the faster the target will be selected.
Users will surely select faster your checkboxes. However, you should test whether that won't create accidental clicks or some other usability problems in your interface.
I'd make the checkboxes bigger and add some padding between the rows. If you do that, then you can stick with just making the checkboxes clickable, and not worry about the row.
If you're ever tempted to make the entire row clickable, you need to provide some visual feedback (e.g. change the row background color). Otherwise, users won't know it's clickable.