user's avatar
History Of Toggle + UI/UX Case Study + UI Samples

Switch / Toggle
The history of light switches date back to the 80’s, and they were used for just the On-Off purpose. The technological advancements of the day allow performing numerous tasks with the help of these light switches, including the adjustment of brightness of lamps.

The first ever light switch worked on a technology called the quick-break mechanism. Invented by John Henry Holmes in 1884, there used to be formation of a residue in the previous arcing technologies, thus reducing the life of the switch. 
The word "toggle" is a reference to a kind of mechanism or joint consisting of two arms, which are almost in line with each other, connected with an elbow-like pivot. However, the phrase "toggle switch" is applied to a switch with a short handle.

The toggle switch represents a physical switch that allows users to turn things ON or OFF, like a light switch. Simply toggled between two states.

In some contexts, particularly computing, a toggle switch, or the action of toggling, is understood in the different sense of a mechanical or software switch that alternates between two states each time it is activated.

Toggle Design Models:

I found equal argument on the question ‘is toggle clickable or slidable?’.
In my view for mobile devices they should work on click and drag to be fully useful. But on desktop or pointer devices it should be clickable because it will be difficult to click-hold and drag to switch.

The entire visual design of this type of switch depends on us being familiar with physical toggle-switches in real life, thus we project an affordance of ‘toggle-ability’ onto this virtual switch.
The switch shouldn’t be toggled by clicking the inactive option. When the switch is on, user do expect to be able to click on the ‘Off’ side to toggle it to off. The toggle doesn’t work that way. Indeed, assuming that I understand its appearance above correctly (and that it’s thus currently on), user have to click the current state to toggle it to the opposite state!
More on this topic:

There are some arguments that the sliding switch-style controls we describe for mobile devices are less usable on a non-mobile platform because they look like they are designed to be clicked and then dragged into a different state. This works on a mobile device where the primary interaction medium is tactile, but with pointer devices, the traditional interaction medium is the click - hence the single checkbox, radio button, or 2-button group.

This isn't to say that the sliding switch control is unusable on a desktop - It is difficult to design web applications without taking into account of touch and gesture controls because it is just as likely for a user to be accessing a website on a mobile device. So user could make it toggle by clicking on it.

Light switches is a sliding button which displays its current state, clicking the button will switch states. A light switch should be used as a gate, in scenarios where simple binary functions are necessary.
For example turning on a set of features or search criteria. 

Toggle a button which only allows for one item to be selected at a time, turn off unselected items as a selection is made. The toggle should be used as a pivot where both items in the Toggle are options – for example, filtering a grid by one of the options in the Toggle. In the diagram below the information flow is diverted to either option of the Toggle.

Switches always indicate whether a setting is on or off. Switches should never require users to press a button to apply their settings. This is because a switch is already a toggle button. When you require users to press a submit button, you confuse them because it’s not what they expect.
You should only use switches on settings that need to take effect instantaneously. If a setting requires a button press before it can take effect, you should use a checkbox instead.

A stand-alone checkbox is used for a single option that the user can turn on or off. it does not apply a setting at an instant like a switch. Instead, it’s accompanied by a submit button and takes effect after the user presses it. This helps prevent accidental activation errors.

Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.

Usage: Switches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.

State: A switch is successfully toggled when the user slides a switch thumb to the other side of the track, and the state of the switch changes.

Text label: The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Avoid creating a switch that includes the text “on” and “off” within the graphic itself. The switch alone should be sufficient.

Behaviour: When a user toggles a switch, its corresponding action takes effect immediately. If a switch cannot be turned on, the switch will automatically turn back off.

Display processing status: Because a switch shows the actual status of something, sometimes there is a delay in its change of state. In such cases, a processing status animation can be used.

A processing status is an animation on the thumb of the switch. For example, it can be used when a switch that controls a hardware feature experiences a delay before its final status can be confirmed.
States: Switches can be on or off. Switches have enabled, hover, focused, and pressed states.
Display the outer radial reaction only on form factors that use touch, where interaction may obstruct the element completely.
For desktop, the radial reaction isn’t needed.

Use switches in table rows only. Switches are intended for use in tables, such as in a list of settings that can be toggled on and off. If you need similar functionality in a toolbar or navigation bar, use a button instead, and provide two distinct icons that communicate the states.

Avoid adding labels to describe the values of a switch. Switches are either on or off. Providing labels that describe these states is redundant and clutters the interface.

Consider using switches to manage the availability of related interface elements. Switches often affect other content onscreen. Enabling the Airplane Mode switch in Settings, for example, disables certain other settings, such as Cellular and Personal Hotspot. Disabling the Wi-Fi switch in Settings > Wi-Fi causes available networks and other options to disappear.

Use a toggle switch for binary operations that take effect right after the user flips the toggle switch.
Think of the toggle switch as a physical power switch for a device: you flip it on or off when you want to enable or disable the action performed by the device.

To make the toggle switch easy to understand, label it with one or two words, preferably nouns, that describe the functionality it controls. For example, "WiFi" or "Kitchen lights."
You can modify the default Style and ControlTemplate to give the control a unique appearance. 

Choosing between toggle switch and check box
For some actions, either a toggle switch or a check box might work. To decide which control would work better, follow these tips:
> Use check boxes for optional ("nice to have") items.
> Use a checkbox when the user has to perform extra steps for changes to be effective. For example, if the user must click a "submit" or "next" button to apply changes, use a check box.
> Use check boxes when the user can select multiple items that are related to a single setting or feature.In this example, 

it's clear with the toggle switch that the kitchen lights are set to "On." But with the checkbox, the user needs to think about whether the lights are on now or whether they need to check the box to turn the lights on.

A switch should look like a on/off switch, provide a clear visual feedback for user interaction with control
- > The visual state should be clear and could help users make decision easily.
- > As above, the text label next to the switch should help users understand the state and correspond to the flipping operation. Otherwise it will become redundant if you already use the visual clues as the affordance.
- > Subtle animation makes the experience feel crafted — it’s especially important for mobile apps which UI controls should appear tangible.
- > The feedback/result should taking effect immediately after flipping the toggle switch; (think about the physical light switch in your room).


Inspirations from

Thank you for scrolling
Hit like if you really like.. : )

History Of Toggle + UI/UX Case Study + UI Samples

History Of Toggle + UI/UX Case Study + UI Samples

A mobile application mockup which is represent below tags : UX, UI, Mobile, Inspiration, Design, Android, iOS, APP, Application, Graphic, Interfa Read More