3

I'm working on designing a responsive form, and I'm wondering if anyone has ideas for dealing with "long" radio button options on mobile. For example, take the following image:

enter image description here

I've browsed around the web for ideas a bit, and I've seen suggestions like "use segmented controls" or "use dropdowns"--but that doesn't work when there is a lot of text per radio option.

Any ideas?

  • is there a problem with wrapping text to next line? – Devin Sep 24 '15 at 23:22
6

Line wrapping and correct indent / whitespacing

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Spacing between options in above example should be a tad tighter, but you should get the idea.

5

This is an interesting question.

Dropdowns: Nope

I would hazard against using a dropdown. In general, they're frowned upon for mobile UX because they require a "tap" to view the options, and another to select one.

Segmented Controls: Maybe

Normally, this is where I would point you. It might still be an option, depending on your data. Instead of going the traditional route of "Button Groups", it may be worth creating a new component that fits your data better.

New Componenet: Yes

This likely has a name, but why not something like this?:

enter image description here

(I did this in paint. Open to suggestions for a better program).

Where you use some kind of list component where the entire area is tappable/clickable. Just make sure the element has a "selected" state. It's definitely more work, but I think it's a huge improvement for UX.

  • More aesthetically pleasing.
  • Larger hit area.
  • Accommodates longer strings.

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.