Improving radio button + checkbox selection states
Identified in color audit #287 (closed)
Problem
Problems that came up in the color audit:
- Radio buttons do not feature a hover state while checkboxes do
- Checkbox hover states are too subtle in their hoverstate and could be improved with a bigger visual change cue screenshot
Further information
https://www.nngroup.com/articles/radio-buttons-default-selection/ offer some great improvement tips to radio buttons (and possibly other items), especially for the selection states
Horizontal radio buttons are sometimes difficult to scan. As seen from the EDF examples, the horizontal arrangement of the radio buttons can make it challenging to tell with which label the radio button corresponds: the one before the button or the one after. This problem is even more noticeable when this EDF responsive-design site is viewed on a phone. Vertical positioning of radio buttons is safer.
Radio buttons are tiny in nature, and, thus, according to Fitts’ law, they can be hard to click or tap. To enlarge the target area, let users select an option by clicking or tapping not just that button, but also the label or associated words. This is easier than having to acquire the tiny target of the button itself.