1

I'm currently defining the hover and focus states for my Design System and looking at the major DSs (carbon, material, spectrum, eg) out there I see that the focus and hover definitions for these are on the element itself:

enter image description here

But I cannot think of these elements as something independent of the label, so I would expect something like this:

enter image description here

What am I missing? Is there any use case where having the entire container(box+label) focused would be confusing?

Improve this question

4 Answers 4

Reset to default
3

A lot of these big design systems are designed by visual designers who don't necessarily have the same priorities or experience as UX designers. Very few of them understand how the HTML tags work so they just add the hover to the individual elements rather than to an assembly of element + label.

What you're proposing sounds great: Including the label makes more semantic sense, removes a lot of potential confusion, and offers a larger 'hit' area for the user.

Keep it up!

Improve this answer
2

Design systems are designed to assist with many different use-cases, they could be small and very specific to the product's needs or they could be more generic and broad. Bigger design systems like on the OP are assisting many different products.

There are cases where the checkboxes can be standalone actions without a label. An example of this would be:

A table with a multi-select ability on the rows for batch actions such as delete, move, archive, etc. Gmail example for multi select

None of the checkboxes on Gmail have any label attached to them.

Improve this answer
2
  • 1
    Perfect, thank you! That was the use case I was missing. Makes total sense here to have the focus only on the checkbox.
    – ananeto
    Aug 18, 2022 at 14:03
  • This works if there are well-known icons only, like ⭐ for a favourite. But where does the fat, coloured arrow send me to? Or is this a symbolised US army sergeant's sleeve badge prior to 2019? See phpMyAdmin with non-common/action icons + label and the usual ⭐ without.
    – Gerold Broser
    Feb 28 at 18:50
0

The only thing I can think of are error messages and help text existing outside the hover/action zone... but it still basically holds up.

Checkbox with error message

Checkboxes and radio buttons are moving toward a chip- or button-style design in many systems because as you're probably intuiting, they provide large and clear targets that are easier to interact with.

Checkbox chips example from UX Movement

Improve this answer
1
  • Thank you @Izquierdo Validation should be a different story. Yes, chips could work for low cardinality use cases, the issue is when you have a big list of options and you need to scan through them.
    – ananeto
    Aug 17, 2022 at 8:36
0

Hover should usually be used as a signifier for "clickable" elements. The hover state should therefore appear when the mouse moves over any area that is clickable.

That said, if the text is part of the click area for the check box, it should ideally also be part of the hover effect. On the other hand, if in your design system you can only click on the checkbox, then only the checkbox should get the hover effect (e.g. in stand-alone cases)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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