I am working on a project with form design - giving users a choice of 7 options. With prototyping (in Axure), I have found that users using mobile phones seem to have some difficulty selecting radio buttons on screen. I adjusted and made the buttons images from a iOS widget kit (so they are larger), but have seen the same comments.
I am curious if there is good practice or research on the radio buttons from desktop display to mobile responsively. Should they become part of a grid, where the whole option (words included) are clickable to give a larger target for mobile?
Would appreciate feedback and/or links to research.
Note: I am going to conduct some additional research on form design by having users go through an actual responsive form with radio buttons to see if it's just a function of the prototype as well.
label
is properly associated with its control using afor=""
attribute, the label will be clickable by default. You would have to do extra work to make it not clickable.