Issues to consider in the design of toggle switches
Release time:
2023-03-30
Pulling the switch is like controlling a light bulb in daily life. It is a button that always has a default value between two mutually exclusive options, and the operation will take effect immediately. After operation, it is necessary to have opposite options, such as on/off, yes/no, agree/disagree, etc.
Pulling the switch is like controlling a light bulb in daily life. It is a button that always has a default value between two mutually exclusive options, and the operation will take effect immediately. After operation, it is necessary to have opposite options, such as on/off, yes/no, agree/disagree, etc.
Guidelines for using toggle switches
Pulling the switch requires a clear indication so that the user can know what will happen after the operation before proceeding. When using, the following principles should be followed:
For scenarios that take effect immediately after the operation; The and label buttons are two independent visual focal points. When there is a possibility of confusion or unclear labels among users, auxiliary words should be added for explanation. Mainly used to control the overall situation, with high weight. For the control of a single task process, please use single/multiple checks; This is the default on/off state. If there are children, parents should close and hide them (to avoid turning gray); When there are risks in the operation, clear prompts need to be given; Avoid excessive use. If there are too many conditions to turn on/off, it is recommended to use check.
Background and copy
The background of a toggle switch usually only has two states. When the switch is turned off, it appears gray (all clothes are ordinary), and when turned on, it appears green. There are also many products that set it as brand color, and the color style can be unified.
There are two types of auxiliary copywriting. One type is the current status feedback, such as obtaining notification permissions for the device's "message push enabled/disabled". This feedback can be flexibly applied in applications, especially in the closed state, which can serve as guidance. The second type is label assisted prompts, such as the benefits or risks after surgery, telling users what will happen and allowing them to have certain psychological expectations in advance.
Radio controlled entanglement
(1) Radio button boxes and check boxes
It seems better to define whether to use a single box or a check box. We have consulted a lot of information and the information we have obtained is' one option requires single selection, multiple options require multiple choices'. The answers are surprisingly consistent. It seems that everything has been said (indeed), but nothing has been said (a designer understands everything). When we carefully analyze it, we will find that it's not just that.
When there are two opposite options on the PC side (such as yes/no, agree/disagree, pass/fail), in addition to the two individual options, check boxes can also be used, especially in permission control, which needs to be checked. In addition, during the registration and login process of mobile terminals, the user service protocol is also a representative use case with a checkbox (agree/disagree). Except for these special usage scenarios, most of the others are directly chosen.
(2) Radio Box and Dropdown List
Fewer options can be presented directly on the current page using radio boxes (gender selection) and buttons (labels). When users need to choose from a large number of options, the PC can use a drop-down list, while the mobile end can use the pop-up window in the operation bar or jump to a new page for users to operate. There is actually no clear boundary in this regard, and it needs to be flexibly changed according to the usage scenario and the attributes of the options, according to the actual situation.
Related news
Yuen Fung Electronics (Shenzhen) Co., LTD.
Add: 603, Block B, Building 6, Zhonggang Plaza, No. 83, Zhanjing Road, Zhancheng Community, Fuhai Street, Baoan District, Shenzhen
Factory Address: No. 7 Yuxian Road, Liangjia Village, Shijie Town, Dongguan City, Guangdong Province
Tel：0755-33809280 33809281
0755-33809283 33809286
Email∶sunny@yuenfung-ec.com
Copyright © 2023 Yuen Fung Electronics (Shenzhen) Co., LTD. Technical support:www.300.cn SEO Business license