Should checkbox label be styled like an anchor link?

Question

I've struggled to find any sort of argument that supports either of my theories so i wanted to see what the UX community at large thinks about this.

Scenario

I have an online shop. When you view a product list view you're presented with checkboxes and labels to filter the products visible.

Clicking the label, as a given, would check or uncheck the checkbox.

Argument to style them as links

The labels are clickable and perform an action when clicked. We should make it obvious the label is clickable or people will not know they can do it.

Argument against styling them as links

The label should be clickable, for ease of use and to make the checkbox target bigger in a way, however ultimately the checkbox is the element the user is interacting with, not the link.

So making a label look like any other hyperlink (blue underlined) would potentially confuse the user into believing clicking that link may navigate them elsewhere.

I would however make the label display the pointer cursor when hovered as it's a non-intrusive way of indicating something can be clicked.

Other sites

So looking at other websites with filter by menus it's fairly damming that those sites display the labels as links. This doesn't make the decision the correct one (as they could be misadvised).

www.asos.com

www.sportsdirect.com

Amazon, however, make the filter labels appear like links when hovered but do not use their default link colour. This however is probably done to show the hierarchy of their primary and secondary links.

If yes for checkboxes, what about other form elements?

Depending on what answers come back i'll throw in another argument against checkbox links. If we say checkbox labels should be links then does this same argument apply to labels for elements, for elements etc?

Answer 1

Expected behavior and common practice is to make the label clickable, subsequently checking the box. You're spot on with that. However, users have come to expect this behavior without underlining the label.

Making the cursor change to pointer is indication enough to the user that the label will also select the box. I've actually A/B tested this in the past and seen users try to click the label anticipating it to check the box. (It was a very broad demographic as well)

Answer 2

Clickable labels

Checkbox labels should be made clickable. The Nielsen Norman Group covers this in their guide on using checkboxes and radio-groups.

Let users select an option by clicking on either the button/box itself or its label: a bigger target is faster to click according to Fitts's Law. In HTML forms, you can easily achieve this by coding each label with elements, as I've done for the example with horizontal radio buttons above (to select that option, click on the word "Four").

Checkbox labels styled as anchor links

None of the sites mentioned in your question have their filter checkbox labels styled as traditional links by default as you have proposed. All three, have hover effects. Upon hover Amazon changes the colour of the label, Asos underlines the label and SportsDirect does both. I would argue that these effects allows the user to differentiate the filter that's currently selected from all the others. This is important since filters are commonly displayed in small fonts and thus the clickable area would be minimal. Clicking on the wrong filter on the Asos website is a common occurrence for me personally.

Checkbox labels implemented as anchor links

Asos and Amazon give their checkbox labels a secondary function. They are implemented as hyperlinks and allow the user to navigate to a new page with the filter applied. You can test this by right-clicking the filter labels on either of these sites. SportsDirect's filter labels don't allow navigation to take place.

While the hover styles used for Amazon and Asos can be suggestive of link behaviour I don't know if they have that effect for most users or even if they are intended to. So the appropriateness of this remains an open question.

Conclusion

1. Clickability does not imply that an element is a link
2. Don't style checkbox labels as hyperlinks
3. It is useful to give checkbox labels used for filters hover effects

Answer 3

I think the arguments against are more compelling. In general, seeing a word (default) styled as a hyperlink, the user will expect to navigate to a page linked to that word.

You could overwrite the hyperlink style to just make it underlined without change of color, but personally I thinks it's so common to just leave it as is, that you're pretty safe there.

Answer 4

No. Since the checkbox itself gives the visual affordance to select / unselect, so there is no extra indicator is required to give a hint to the user. Generally, the underline(s) are used for hyperlinks to indicate for navigation from one section to another / page / site. The underlines are largely ignored these days, but having a different color gives the clickable clue to the user.

Answer 5

As others have said usability wise definitely labels should be clickable for items that have a binary state.

In addition to, or instead of, you could consider other visual approaches to give the label and checkbox a more grouped feel through background colour or borders.

You could use any of these approaches on hover too, if the user hovers over something and it is given a background colour or border they will normally interpret that as meaning interactive, so you can communicate this to them.

Presumably you need to consider mobile too, so making sure you allow adequate spacing and providing bg colour or borders to indicate the scale of the target prior to hover may also work there.