28

In a recent project of ours I am tasked with creating an interface that solves the same problem as radio buttons or a dropdown menu would, but using buttons instead.

It approximately looks like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I wonder what you think the implications this has over using dropdowns and radio buttons and why it is good or bad or neither. Please back your answer with evidence or personal experience rather than taste.

3
  • 1
    What is your restriction: that you have to make the UI controls look like buttons visually, or that you have to use a <button> tag? The ideal solution for you might be to use <input type="radio" (with all the infrastructure that comes automatically with that) but with restyling to make them appear like the buttons in your mockup. May 3, 2013 at 14:34
  • 1
    Look at this, Apple uses images to select the color and model of the iPhone when you want to buy it, that could have been implemented as radio or select store.apple.com/us/buy/home/shop_iphone/family/iphone5 May 3, 2013 at 14:50
  • @AlfredoOsorio I wish you had taken a screenshot, because of course that link no longer works, and your comment is now basically useless to the discussion.
    – Phrogz
    Sep 20, 2017 at 20:58

6 Answers 6

29

This kind of UI elements exists and is used in many applications even if differently.

Facebook events

enter image description here

Google calendar

enter image description here

If well designed they are even more affordant than the usual radio buttons.

enter image description here

The thing is, because of this affordance they seem "auto selected" so there is no need of a validation like in your example. Therefore I would say radio buttons and drop-down are better here because they need a validation to be used (or at least it is expected to work this way).

8
  • I didn't see the forest for the trees. May 3, 2013 at 13:33
  • Why do I seem to see this particular radio image everywhere on this site?
    – Alvin Wong
    May 3, 2013 at 14:06
  • 1
    @AlvinWong Possibly because this and many similar interfaces that were required to be simple because of technological, manufacturing, and cost constraints resulted in a simpler UX. Also, it is familiar to some of us. Simplicity and familiarity help relay concepts more easily. May 3, 2013 at 14:16
  • :-) The original picture globalnerdy.com/2009/05/01/… and the real original picture forums.nasioc.com/forums/showthread.php?t=1745468 May 3, 2013 at 14:20
  • I think an important thing to note is that in the examples given (facebook and google calendar) the mutually exclusive buttons don't stand on their own to let the user make a choice, but serve as tabs that display different content depending on which one is selected.
    – frozenkoi
    May 3, 2013 at 21:32
24

A single button should perform an action, and not act as a radio button. If you want buttons to act as radio buttons, you should use a segmented button.

enter image description here

There is established precedent for this in both mobile and web UI, so people are likely to already understand what they do. Additionally the design of segmented buttons shows that the buttons are related to each other, which would not be the case with standard buttons.

Don't let a control behave in a way that is not predictable.

2
  • 1
    This is exactly how jquery mobile renders Radio buttons in a horizontal control group. See the section on "Horizontal Radio Button Sets" here: api.jquerymobile.com/checkboxradio
    – xdumaine
    May 3, 2013 at 17:54
  • 1
    +1, especially for Don't let a control behave in a way that is not predictable.
    – poke
    May 4, 2013 at 19:15
2

I see a clear distinction between where to use button, radio button or dropdown.

Button - is typically used to submit information. If you just want user to select an option without submitting the information you can use Button.

Radio Button - is typically used to provide a selection to user if you have a very few option to select. Anything in the range of 2-10 can be considered few depending upon your whole UI.

Dropdown - is used to provide selection to user when values are fairly large in number.

You can still use dropdown instead of radio button for smaller number of values in certain situation.

  • Values are not so important or distinguishing feature of the overall selection on UI.
  • You don't have or don't want to occupy lot of space on UI.
1
  • In your point about "Button", I think you mean to say that if a user isn't submitting information, then don't use Button. Apr 18, 2017 at 14:31
1
  • Dropdowns require multiple clicks vs single - multiple events (clicks) to activate/select one, and they are not "readily" visible (the options) until you activate the dropdown.
  • Radio buttons are groups (single one active) - no multiple selection available without a new radio group
  • your buttons have the features of multiple select (select any number as well as single click (visual, and only a single event to activate)

Think mobile devices and so buttons tend to be better there - touch them vs click a dropdown and click again - not really that easy with fingers.

1
  • Can you explain this a little better? It's not clear what your answer is trying to say.
    – elemjay19
    May 3, 2013 at 17:15
0
  1. Command Button is meant for executing some command as per the caption it holds. Like this, every UI component has its own purpose.

  2. The UI components can be used for different purposes other than the ones they are actually intended for. For example, like in your case, command buttons can be used to accept various options from user, or for that matter, even a label component can be used for capturing user typed text by trapping the keys. But all these lead to mere increased coding.

  3. The UI components and their purpose is established in the end users mind and it is not intuitive if the UI component are used for the purposes other than they are actually meant for.

So, in my experience, it is correct to use radio buttons or drop down list in your case.

2
  • That wasn't really the question. May 3, 2013 at 13:33
  • then what is the question? Can you please kindly make me clear
    – rags
    May 3, 2013 at 13:43
0

Have you considered incorporating a toggle switch into the button?

Courtesy of Rickie Sherman via Dribbble

I'm not sure if this would be an improvement over the radio/menu option but it might help your users understand what you're trying to achieve. It's still not great, though, if only one option is available at a time.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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