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.

  • 2
    Why wouldn't the whole thing (text label and button part) be selectable on desktop size too? – JonW Oct 10 '14 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 '14 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 '14 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 '14 at 17:23
  • What, exactly, is the problem? I'm not clear on that. – DA01 Oct 10 '14 at 17:36
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."

  • Indeed. Once you pass 3 radio buttons you should be questioning their use. After 5, you're introducing a great deal of visual clutter. – Evil Closet Monkey Oct 10 '14 at 14:59
  • This is probably valuable advice for desktop size screens too, not just mobile. – JonW Oct 10 '14 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 '14 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 '14 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.

  • 3
    I'm not sure this would work for 7 items in a row though. Not on a mobile. – JonW Oct 10 '14 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 '14 at 16:50
  • Thanks for the feedback.. I was thinking of something like this. – Stephanie Pratt Oct 10 '14 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 '14 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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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