Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
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. –  vincebowdren May 3 '13 at 14:34
    
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 –  Alfredo Osorio May 3 '13 at 14:50

6 Answers 6

up vote 28 down vote accepted

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).

share|improve this answer
    
I didn't see the forest for the trees. –  nimrod May 3 '13 at 13:33
    
Why do I seem to see this particular radio image everywhere on this site? –  Alvin Wong May 3 '13 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. –  Gary S. Weaver May 3 '13 at 14:16
    
:-) The original picture globalnerdy.com/2009/05/01/… and the real original picture forums.nasioc.com/forums/showthread.php?t=1745468 –  Gildas Frémont May 3 '13 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 '13 at 21:32

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.

share|improve this answer
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 '13 at 17:54
    
+1, especially for Don't let a control behave in a way that is not predictable. –  poke May 4 '13 at 19:15

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.
share|improve this answer
  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.

share|improve this answer
    
That wasn't really the question. –  nimrod May 3 '13 at 13:33
    
then what is the question? Can you please kindly make me clear –  rags May 3 '13 at 13:43
  • 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.

share|improve this answer
    
Can you explain this a little better? It's not clear what your answer is trying to say. –  norabora May 3 '13 at 17:15

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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