What's the best cases these patterns can be use?
-
1One is for turning things off and on. One for selecting only one and the last for ticking multiple options. Not sure what can be said beyond that. Ideally they are used for those cases.– KMSTRDec 17, 2015 at 9:20
-
This question will be of interest to you: Should a toggle button show its current state or the state to which it will change?.– SNagDec 17, 2015 at 10:06
Add a comment
|
4 Answers
Well, it kind of depends on which system you are.
There are mobile guidelines for Android, iOS and Windows.
iOS, for example, doesn't use regular checkboxes (they are not called tickbox btw) or radio buttons but only grouped lists of elements (scroll down to "table view") or switches.
But from what I've learned, you use all of those controls like this:
Radio Buttons
- For mutually exclusive options, but not for binary choices
- If there are too many options (on Windows the number is 8) use a drop-down instead
Checkboxes
- For selecting a binary option or multiple options in a set
- Should always be used with positive commands, not negative like "do not .."
Switches
- Are also used for binary options, but usually those that activate/deactivate something, like you would expect from a switch in real life
- It is a good user experience to immediately change the affected setting by the switch and not only after pressing "save" or returning to the previous screen.
Because we have this expectation for a switch in real life (for example we know light immediately turns on)
-
1Exception: If you have a binary choice and you want to force the user to make a choice then you need to use radio buttons with no default selection. If you choose to use a checkbox then the user could accept the default value without making a choice. With the radio buttons you can pop up text saying "Please choose A or B". Dec 17, 2019 at 17:46
-
@HackSlash Usually, you have error validation in the form in most cases and will block the user from continuing unless he checks that checkbox and mark it in red error color for them to see. This is very common with "[ ] I agree to terms and conditions", where you cannot continue without it. Dec 18, 2019 at 11:35
-
1I think you are missing my point. Your scenario is where the user must answer in the affirmative. That's not really a binary choice. That's a single forced acknowledgement. A binary choice is where the user can choose either True OR False. If you use a checkbox that defaults to False then you're not sure if the user is choosing false or if they just clicked past the choice. If you have a real binary choice where you want the user to choose one or the other, you need a radio button with no default selection because now you have 3 positions. True, False, or no answer. Dec 18, 2019 at 16:11
The toggle switch general use is to start or stop something. Like Wi-Fi or Bluetooth access. It has the analogy of a light switch.
The radio button is used in a group of several other radio buttons where only one at a time can be selected. When selecting one, all other are deselected.
The tick box (or check box) can be used in groups of several other tick boxes, but have no dependency with others. Selecting one doesn’t affect any other tick box. Checked represents true, un-checked represent false.
answered Dec 17, 2015 at 9:28
Toggle - Despite their relative popularity (eg, Apple use them as a standard interface control) toggle switches have an inherent state-action ambiguity; that is, it is unclear whether the label ('on' for example) is the current state, or the action.
Radio button - let users select one option from two or more choices. Each option is represented by one radio button; a user can select only one radio button in a radio button group.
Checkbox - There are various ways to improve the usability of such switches, and one has to remember that these are both fairly popular and only require a few learning iterations before most users get it. But from a cognition perspective a checkbox is far easier (and faster) to interpret compared to a toggle switch.
--------------------- Toggle example ---------------------
--------------------- Radio button example ---------------------
--------------------- Checkbox example ---------------------
At end if upto your context of utilising them, i.e., in what way you want them to be presented to user. For instance, toggle is default considered for on/off scenario but you could use it for camera selection with front or rear.
Reference URL -
Radio buttons or Toggle switch for one out of two options?
https://msdn.microsoft.com/en-us/library/windows/apps/hh465475.aspx
https://msdn.microsoft.com/en-us/library/windows/apps/hh700395.aspx
Toggle button vs. check box and toggle switch
Note - Do check above reference link for more clarity and understanding.
This selection control flowchart has suggestions on which control to use according to use cases. Might be a quick resource if decision trees are useful for you and your team.
