Is there any reason to use buttonsets over radio buttons / dropdown pickers?

Question

In more websites I see, when there are small number of choices, people using button sets

instead of a list of regular radio buttons.

and dropdown pickers.

Is there any reason for this trend? Is there any evidence that these are more readable or better in any other way compared to the regular radio button?

Answer 1

My feeling is that button sets are easier for the user to tap on with mobile devices.

Apple had set the bar for tap regions to be 44px x 44px so using the button sets makes it more obvious and easier for user on touch devices.

Read More: https://stackoverflow.com/questions/1928991/minimum-sensible-button-size-on-iphone

EDIT: On the other hand, the con to using button sets is it's difficult to see that you can only select 1 option at a time.

EDIT2: Also, on top of being easier to style, button sets are easier to Layer (via Z-index) in the site. Many traditional form elements are notorious for having a finicky z-index setting between browsers.

Answer 2

There could be a couple of things contributing to this. My guess;

• It looks better
• Easier to style
• It's clearer where and easier to click

Fact of the matter is, styling-wise, radio buttons don't look good. On top of that, on the web, they're not stylable in any reliable way.

Add to that the fact that not everyone always makes the text behind a radio button a label, and you've got an element that's small, hard to click, and can cause a fair bit of frustration. This would be one of those cases where the people that mess up (the label bit) make it worse for the people that do it properly, as users start compensating and will automatically mouse towards the circle as opposed to the label.

That latter reason isn't probably nearly as important as the former ones though. They're just tough to style.

.edit: plus, bootstrap is quite popular and perhaps people have copied that pattern a bit.

.edit2: As for dropdowns, it's probably because having choices out in the open makes it easier to see what's coming then when you have to click first.

Answer 3

Good things about button sets:

• Click area is bigger
• Visual consistency across browser
• They look nicer (because they look like you want them to be)

The big problem with button sets that replace radio buttons is that buttons don't convey the fact that they're mutually exclusive.

A button is usually meant to submit a form or navigate to a different URL. How do you know when buttons are togglable? You don't until you actually interact with them.

In forms, radio buttons should always be used for mutually exclusive options. Button sets can be used outside of forms.

What about dropdowns? Their problem is that they hide the user's options [1]. Unless you don't have the space, just use radio buttons or regular ones.

[1] http://jgthms.com/dont-use-dropdowns-for-a-few-items-only.html