8

What's the best cases these patterns can be use?

enter image description here

13

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

enter image description here


Switches

  • Are also used for binary options, but usually those that activate/deactivate something, like you would expect from a switch in real life

enter image description here

  • 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)
| improve this answer | |
  • Exception: 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". – HackSlash Dec 17 '19 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. – Big_Chair Dec 18 '19 at 11:35
  • I 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. – HackSlash Dec 18 '19 at 16:11
4

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.

enter image description here

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.

enter image description here

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.

enter image description here

| improve this answer | |
0

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

Toggle example

--------------------- Radio button example ---------------------

Radio button example

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

| improve this answer | |

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.