Toggles are interactive elements on your site that change the form (of) or visible content in front of the customer. These toggles have the great ability to put things in context (built by you). For example, you can show that if a potential customer subscribes for 12 months now, instead of paying month by month, the price will be significantly (or at least noticeably) lower. You can also use toggles to show what something looks like before and after your service, or simply let the user choose to browse your site in light or dark mode.
Context
For toggles to work properly, that is, to be understood correctly by users, we need to put them in the right context – to easily understand what will happen when they are moved (clicked).
Switches are typically used, as they are at home, to turn something on or off (for example, when choosing to allow cookies, or the aforementioned light and dark modes), but they can also be used to demonstrate differences.
Switches should be used for decisions that are easy and do not carry a lot of risk. For example, a credit institution should not use a switch when a user chooses a fixed or floating interest rate for their loan.
Animation
It is good to see when a switch changes state.
State
Users should clearly see whether a switch is on or off. This is most often done by changing its colors, but it is possible to achieve this effect by writing “on” and “off” on each side. This is not a recommended option, as people could still get confused. Therefore, the best you can do is to change the colors in the different states of the switches. For example, green for on and (at least) red for off. A better option is to use an “inactive” color when the switch option is “inactive” or “off”. In web design, we have accepted gray (especially pale gray) elements as inactive.
