6

I'm interested in what people know about UX regarding horizontal button groups and radio buttons. There seems to be a wealth of stats around when and where to use radio buttons as opposed to select/dropdown lists but I'm curious about how button groups perform.

My assumption is that button groups take up a little less room (vertically) but I have seen data show that forcing the reader to read top to bottom as well as left to right adds effort/fatigue and that keeping everything in a list format is beneficial. Anybody have any strong opinions (or better yet, data) on this?

Improve this question
3
  • 1
    I think there may be an issue here with separating the technology from the UI. Radio buttons can be lain out horizontally as well as vertically. Button groups could be set up to perform the same way as radio buttons (logically XOR). In the end you have to design for the way users will understand the UI regardless of the technology required to achieve the result.
    – Roux Martin
    Sep 7, 2018 at 8:41
  • 1
    Good point. It is effectively a visual treatment of something which interacts in the same way. Maybe the real question is list or row? And I expect that answer is always: 'it depends'.
    – Adamant
    Sep 11, 2018 at 2:50
  • Yes, that's about it ;)
    – Roux Martin
    Sep 11, 2018 at 7:03

3 Answers 3

Reset to default
4

You should use the control which makes the most sense in context.

radio buttons

  • are easy to scan and will generally allow you to provide a cleaner line-of-sight to your primary call-to-action below.
  • They're also visually light and wouldn't compete as much with your primary page actions.
  • are a small target (especially on mobile) so the size could be a concern

enter image description here

button groups

  • are generally more visually prominent, so they may be ideal if you want the selection to be a primary action on your page.
  • make a larger tapping target

enter image description here

Improve this answer
1
  • +1 mobile usage is an important consideration so it is good that you have mentioned it here
    – Michael Lai ♦
    Sep 11, 2018 at 20:22
1

I don't have data, but, for me, it would come down to a couple of things:

  1. Scalability - button groups aren't particularly scalable as they need to fit horizontally within the available space. If you're likely to have selections that have more than a handful of options, radio buttons would make more sense. Similarly, if the option labels are potentially more than one or two words radio buttons would be my choice.

  2. Style - if the rest of your form elements follow common standards (e.g. checkboxes and dropdowns that look like regular checkboxes and dropdowns) it would make sense to stick with radio buttons.

Improve this answer
1

Actually, if we talk about usage of group buttons and radio list for taking input then obviously radio list is most likely and understandable control.

However, group buttons as input will look beautiful if you use it to take Boolean (1-0) selection/input like a switch button.

The major use of group buttons is not in the form. They are majorly used as "Filter Options" or act like "Tabs".

Improve this answer

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.