User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I am a bit confused on what should be used when you have to select one option out of the two possible options. Working on a touch screen interface
For ex 1- Selecting a Tax type in a retail store, Options are Inclusive and Exclusive
Ex 2- Selecting a discount type
I can't figure out how one option can be preferred over the other in cases like these. So, can anyone tell me a reason or two to choose one over another in similar cases like mentioned in examples.
I think you're referring to toggle switches here. That being said, Radio buttons let users select one option from two or more choices whereas a toggle switch mimics a physical switch that allows users to turn things on or off.
You can also refer to these UX guidelines by Microsoft on when to use which control:
Guidelines for toggle switch control
Guidelines for radio-button control
Edit: As we're dealing with just two options, you can use radio button for touch interface provided they are easy to tap.
From the screenshots, it seems you're working on a non-touch UI (taking a hint from dropdown). This and that we're dealing with just two options here, I would recommend radio-buttons for this use case. Had it been more than three options, I would have gone ahead with a Toggle Button (not a switch)
I think where the confusion comes is in your question where you say the options are
"Selecting a Tax type in a retail store, Options are Inclusive and Exclusive"
.. do you mean inclusive OR exclusive?
A quick run-down of radio buttons and toggles:
A toggle button should be used when there are ONLY two mutually exclusive options. Think of it like a light switch - the light can either be on or off, not both. In your example this would work if a tax type can be only inclusive OR exclusive.
Radio buttons are great when there are three or more mutually exclusive options. Think of it like picking the month you were born in; you if say you were born in July, you therefore weren't born in any of the other 11 months. In your example this should only be used if there are other options, e.g. if it could be inclusive OR exclusive OR another option.
When the options aren't mutually exclusive, tick boxes should be used. Think of it like picking foods you like. You can like burgers and hot dogs, and liking burgers does not prevent you from liking hot dogs. In your example, this should be used if a tax type could be inclusive AND exclusive - therefore the user could tick both.
TL;DR - Assuming your options are mutually exclusive and there are only two of them, go for a toggle button.
I favor using toggle switches (like in the top "Tax Type" example) because the offer a larger target for the user to click. I would think that Fitts's law would suggest that toggle switches should be preferred over simple binary radio buttons, but I'd like to know what other people think.
I believe the simplest, general answer - while not always followed and with definite exceptions - is that radio buttons may be preferable if there are two or more options, and that they are for something that is not expected to be an instant action: making a choice on a form, for instance, which will require submission.
Toggle switches are meant to mimic an instantaneous action between only two choices - like flipping a light switch - and should be used when the action to be taken will have immediate effect. They are also more easily understood if the action switches between very clear binary and opposite states, such as on/off or yes/no... using toggles to choose between different more or less equivalent states, such as "Staging Network/Production Network" might lead to confusion.
Clearly this is not how they are always used. But the metaphor does make more sense, given how radio buttons have evolved to be understood (once upon a time they, too, connoted instant action), and the clarity of two vs. multiple choices can also help make the choice for you.
Also, switches CAN be useful in smaller spaces, but need to be used carefully because they can make things more ambiguous than less if they are not labeled clearly and/or designed well. Always be careful when using a control to both a trigger for an action AND display its own status.
Stumbled upon this question as i had a similar question, i found my answer as the element i wanted to use was not "Toggle switch" The use case is served with a "Segmented Button".
Do not confuse Segmented Button with Segmented Control from Apple HIG.
Here is an example of its implementation SAP Fiori:
If you want the user to select one option from a small group, offer a segmented button in the toolbar or footer toolbar.
You want to select from one of the set [Inclusive, Exclusive] or [$, %], which is what you use Radio buttons for (it just happens that your set only has two elements.):
A toggle is use typically just to indicate if settings are on/off, certainly in the Material Design / Android world.
It looks a lot like you are using Material Design for your app, but then you're not using the correct toggle, this is the 'Switch' from the Material guidelines:
