6

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

enter image description here

12

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

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.

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.