10

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 enter image description here

enter image description here

Ex 2- Selecting a discount type

enter image description here

enter image description here

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.

  • 1
    A lot of the time, there's little to choose between the two. One possible reason against a toggle button is that -- as mentioned on UX many times -- a poorly-designed toggle button can be confusing. Sometimes it's unclear which half is the "active" one (not the case in your examples) and sometimes it's unclear whether it's showing the current value, or the CTA (blue rectangle) will select the value to be made current. – TripeHound Aug 7 '17 at 11:15
11

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've edited the question as it's a Toggle switch. Thanks. – Harshit Choudhary Jul 28 '15 at 5:56
  • Also, it's a touch UI, similar to material dropdowns. Thanks for sharing guidelines, although I've gone through similar guideline but was still confused. – Harshit Choudhary Jul 28 '15 at 5:59
7

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.

Toggle Button

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.

Radio Button

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.

Tickboxes

TL;DR - Assuming your options are mutually exclusive and there are only two of them, go for a toggle button.

  • "do you mean inclusive OR exclusive?" To be a little pedantic: "Options are Inclusive and Exclusive" is correct (there are two entries -- "inclusive" and "exclusive" -- in the list of valid options); however, the one you choose must be "inclusive or exclusive" (you must pick one or the other). – TripeHound Aug 7 '17 at 11:09
3

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.

2

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.

1

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.

enter image description here

  • It seems as if you are recommending, in effect, a radio button. – Mayo Aug 7 '17 at 12:44
1

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

enter image description here

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:

enter image description here

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.