2

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.

Improve this question
6
  • 2
    Why wouldn't the whole thing (text label and button part) be selectable on desktop size too?
    – JonW ♦
    Oct 10, 2014 at 13:49
  • No reason, I suppose it could be designed that way as well. :) I was just thinking that the radio button is usable on desktop, but may not be on mobile, hence the question for research or best practices on the styling of this piece of forms..
    – Stephanie Pratt
    Oct 10, 2014 at 14:28
  • 1
    If a label is properly associated with its control using a for="" attribute, the label will be clickable by default. You would have to do extra work to make it not clickable.
    – Matt Obee
    Oct 10, 2014 at 14:34
  • Thanks Matt. I am using a mockup from a UI designer, and just putting these on top of it w/o the labels, so this is part of the reason the space isn't clickable with Axure.
    – Stephanie Pratt
    Oct 10, 2014 at 17:23
  • What, exactly, is the problem? I'm not clear on that.
    – DA01
    Oct 10, 2014 at 17:36

3 Answers 3

Reset to default
3

Instead of presenting the user with 7 radio buttons, I would suggest using a dropdown.

A reference for mobile would be the Apple HIG - "Consider using a pop-up menu if you need to display more than five items."

Improve this answer
4
  • Indeed. Once you pass 3 radio buttons you should be questioning their use. After 5, you're introducing a great deal of visual clutter.
    – Nicholas Pappas
    Oct 10, 2014 at 14:59
  • This is probably valuable advice for desktop size screens too, not just mobile.
    – JonW ♦
    Oct 10, 2014 at 15:19
  • Thanks for sharing. Regardless of the number of options I mentioned above, if 5 or less, are there best practices with radio buttons on mobile? We likely have a similar issue on other parts of our site as well.
    – Stephanie Pratt
    Oct 10, 2014 at 15:39
  • Hi Stephanie. Usually radio buttons in a single column or two column layout work well. Single column is preferred if you have a long label. I would suggest making the label clickable/tap-able as well.
    – Paul Farino
    Oct 10, 2014 at 19:56
0

I've been replacing most radio buttons with button groups lately. I find dropdowns are just plain unintuitive on a touch screen.

enter image description here

You said you have already done this, and I agree it is the best solution. Just give consideration for vertical flowing on small devices. If you still have trouble with people picking them, make them bigger, or consider stretching them to fit the width of the display.

Improve this answer
4
  • 3
    I'm not sure this would work for 7 items in a row though. Not on a mobile.
    – JonW ♦
    Oct 10, 2014 at 16:31
  • Why not? Just flow them vertically, and room permitting possibly have two columns of buttons side-by-side for a nice group with a small footprint.
    – Lee Harrison
    Oct 10, 2014 at 16:50
  • Thanks for the feedback.. I was thinking of something like this.
    – Stephanie Pratt
    Oct 10, 2014 at 17:21
  • 1
    What works horizontally does not necessarily work as well vertically. Finger touch area is different for a start. Horizontally you have the whole width of the button to work with, but vertically you only have the height, and the height is smaller than the finger press size. Meaning you'll end up touching two options at once. Plus you'll be covering up options because your hand will be in the way.
    – JonW ♦
    Oct 10, 2014 at 17:22
0

You could always incorporate a snap-to-value slider at low resolutions.
It's a lot easier to work than 7 small buttons.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
2
  • Thanks for the feedback! This is an interesting concept as well.
    – Stephanie Pratt
    Oct 10, 2014 at 17:22
  • How do you attach a label to each radio button though?
    – JonW ♦
    Oct 10, 2014 at 17:57

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.