9

Is there any recommended alternative to the default "Radio Buttons side by side" solution when we need to show a small set of options (2 or 3) to the user? I mean, we usually do this:

enter image description here

But I've seen a lot of apps adapting something like "Segmented Controls" from iOS:

enter image description here

Which I don't think it's a good practice at all.

In my case specifically, I don't think hiding some of the options would be helpful to the user, so Spinners are not a real option. I won't be changing any views either, so it's not like I'm looking for tabs or something like that. And then we have toggle buttons and switches, which I don't think fits my needs, because I won't be switching between states. And finally we have this article that suggests to use simple regular buttons instead: http://kintek.com.au/blog/portkit-ux-metaphor-equivalents-for-ios-and-android/

I'm inclined to use an implementation with regular buttons, like the one in the article, but I wanted to know if there are any elegant alternative to this.

Thanks!

duggu
  • 37,851
  • 12
  • 116
  • 113
Renan Ferrari
  • 2,449
  • 5
  • 21
  • 26
  • I'm quite interested in this issue. However, if possible, could you add an image draft to what you think about elegant alternative? (Btw, thanks for the informative link!) – Andrew T. May 05 '14 at 05:22
  • @AndrewT. To be honest, I don't really know what an elegant alternative would be. All I know is that two radio buttons displayed side by side looks kind of ugly. Of course this is a very subjective matter, but I'm looking forward to discover what other solutions designers came up with. (You're welcome for the link!) – Renan Ferrari May 05 '14 at 06:47

1 Answers1

4

There are tons of questions posted on UX Stack Exchange on the topic of radio buttons vis a vis segmented controls, and there is one in particular about inserting radio buttons and checkboxes into buttons, but I cant seem to find it at the moment. I also, to the detriment of you and other readers, cannot add images or more than two links to my answer (so ill put them in as plain text) because I don't have enough reputation.Thanks whoever!

I think the main issue with the a segmented control is that, to quote user Pdxd on a UX Stack question : Is there any reason to use buttonsets over radio buttons / dropdown pickers?

the con to using button sets is it's difficult to see that you can only select 1 option at a time

I think this is especially true outside of the context of mobile.

I'm personally a big fan of what the product design team over at Dualingo is doing: they've combined a classic horizontal radio buttons and inserted them into buttons to make the targets large enough for touch-enabled devices. Personally, I think this is the best solution. enter image description here

jQuery mobile does something similar to this in for their vertically stacked radio buttons, but its worth noting that in the latest releases have moved to using segmented controls for horizontal radios on both jQuery UI and jQuery Mobile. jQuery Mobile Vertical Radiobuttons

Community
  • 1
  • 1
coffeecola
  • 100
  • 12