Behavior
Unicode
In Unicode, empty and checked checkboxes are represented by the codes U+2610 (☐, "BALLOT BOX"), U+2611 (☑, "BALLOT BOX WITH CHECK"), and U+2612 (☒, "BALLOT BOX WITH X").
Alternatives
A special type of switch is common in mobile applications - the so-called toggle switch (toggle switch) . Unlike a checkbox, to turn a toggle switch on or off, you need to drag the toggle switch slider in one direction or another. Often the toggle switch itself displays its position, but it is not always obvious to the user whether the toggle switch is in this state or will go into it if the slider is moved. Therefore, it is usually recommended to sign the toggle switch positions on the outside.
Locking buttons usually used in toolbars, as they take up little space and allow you to place an icon on yourself. It is impossible to determine by the appearance of the button whether it is fixed or not.
Buttons with changing label/icon- they also have a problem: is the inscription/icon an indicator of the current state or the action that will occur after clicking? Therefore, such buttons are only used when the current state is clear from the context.
You can also use instead of a checkbox switches(radio buttons, radio buttons, etc.) if they are given only two positions.
Links
- Anatoly Khomonenko and others. Delphi 7. - St. Petersburg: BHV-Petersburg, 2005. - P. 172-175. - 1216 s. - (In the original). - additional, circulation 3,000 copies.- ISBN 5-94157-267-0.
- Alan Cooper. about the interface. Design Basics = About Face. The Essentials of Interaction Design. - 3. - St. Petersburg: Symbol-Plus, 2009. - P. 499. - 688 p. - 1500 copies. -
To make data entry easier, you can insert form controls such as check boxes and radio buttons. Checkboxes work well for forms with multiple options. Radio buttons are more convenient to use when the user has only one choice.
To add a checkbox or radio button, you will need a tab Developer on the tape.
Notes: To add a Developer tab, follow these steps:
Advice: If not all of the text is visible, click and drag one of the handles until all of the text is visible. The size of the control and its distance from the text cannot be changed.
Formatting a Control
After inserting a checkbox or radio button, it's a good idea to check that it works as expected. For example, you may need to customize its appearance or properties.
Note: The size of the switch inside the control and its distance from the text cannot be changed.
Removing a control
Right-click the control and press DELETE.
Checkbox controls cannot currently be used in Excel Online. If you're working in Excel Online and you open a workbook with checkboxes or other controls (objects), you won't be able to edit the workbook without removing those controls.
Important: If you see the message "change in browser?" or "unsupported features" and then want to change the workbook in the browser again, all objects such as checkboxes will be lost at once. If this happens and you want those objects to be returned, use previous versions to restore an earlier version.
If you have the Excel desktop app, click the button Open in Excel and add checkboxes or radio button.
additional information
You can always ask a question from the Excel Tech Community, ask for help in the Answers community, or suggest a new feature or improvement to the website
Control element OptionButton serves to select one element from several mutually exclusive elements presented in a group.
Switches must always be in groups, and only one of the switches can be “pressed” (activated). The user can change his decision by canceling the previous choice. Such buttons are sometimes called selector or radio buttons, similar to the band switch on a receiver.
OptionButton Control Properties
Name default element name Option1, Option2 etc.; can be specified with a prefix, for example, OptButton.
Caption to the left or right of the OptionButton element.
Alignment determines where the tooltip is displayed. If the property value is 0, then the tooltip is displayed to the right of the OptionButton element; if the value is 1, then the tooltip is displayed to the left of the element.
Value Boolean property that determines whether the button is pressed or not. If the property value is True, the button is pressed; if it is False, then the button is not pressed.
When creating a switch, the value of the property is Value = False, i.e. In the initial state, the switch is in the off position. Only one of the switches in a group can be in the on state. As soon as the value of one of the switches becomes True, the similar properties of all other switches are reset to False.
E
When the CheckBox control is in the disabled state, the button is not pressed, i.e. There is no "tick". This corresponds to a “No” answer. A checkbox is ideal when you want to provide the user with a set of options from which they can choose just one, several, or none. For example, to display weather conditions, we place three checkboxes on the form:
Ice
And each time, starting the program, the user notes the presence of one or another, or all natural phenomena at once, by clicking on the corresponding button.
CheckBox Control Properties
Name default property value Check1, Check2, etc.; can be specified with a prefix, for example, ChkFlag .
Caption property contains the text of the tooltip displayed to the left or right of the CheckBox element.
Alignment determines where (left or right) the tooltip is displayed. If the property value is 0, then the tooltip is displayed to the right of the CheckBox element; if the value is 1, then the tooltip is displayed to the left of the element.
Value this property determines whether the button is marked or not (i.e., the button is selected or not). The property has three values: 1,0,2.
1 button selected (marked with a tick),
0 button is not selected (this is the default value),
2 – the button is inaccessible (the checkbox and the mark on it are discolored).
Control elementFrame(Frame). Grouping buttons
E
Frames are needed when you need to install more than one set of buttons - switches - on the form. Within a frame, a set of buttons operate as a group, independent of other buttons. It should be borne in mind that first a frame is added to the form, and then buttons - switches or other controls - are added inside the frame. When you move a frame, the objects inside it move along with it. You can also place one frame inside another.
Control propertiesFrame
Name the default property value is set to Frame1, Frame2, etc., you can set the name with the Frm prefix .
Caption stores text placed in the upper left corner of the frame. This property is used to identify the contents of the group. If you want the group to not have a caption, then the Caption property should be assigned an empty string.
Appearance allows you to give the frame a three-dimensional look.
BorderStyle determines whether the group will have a border around it or not. (If the property value is 0, there is no border.)
Rules for working with groups of elements
If the form already has some controls, they will not be included in the group even if you place a Frame element on top of them.
To place a control element into a group, you need to click on the corresponding button on the control panel and drag the mouse pointer inside the group, and then drag the control element. Another way is to double-click on the control, making sure that the group is selected.
You cannot add a control to a group by dragging it from a form to inside a Frame element. Likewise, you cannot remove a control from a group by dragging it from a frame onto a form.
To drag a control from a form to a group (inside the frame):
cut the control into the buffer (Cut) or (Copy);
select container;
perform pasting from the buffer (Paste).
When creating forms, designers are often faced with choosing which UI element will provide the desired level of interaction when changing parameters. Of course, each specialist has his own rules, but everyone should remember some unchanging axioms that apply always and everywhere.
Option selections can be made using checkboxes, radio buttons, radio buttons, and drop-down buttons. All options are good if used correctly. This article will focus on checkboxes and radio buttons.
Checkboxes
Checkboxes are used when there is a list of options and the user can select any number of them: one, several, or none. In other words, each checkbox is an independent control, and turning on one of them does not cancel the effect of the other.
Flags are provided with inscriptions
Switches
A switch is a control that turns something on and off.Switches allow you to choose between two directly opposite options.
Typically, switches are used to enable or disable an action (start or stop something). An analogy can be made with a light switch.
Lighting is the most common application for switches
A checkbox is simply a small square with a checkmark or cross.
Two checkbox positions: checked or unchecked
The switch should look like a regular toggle switch with two positions.
Two switch positions: on or off
You need to provide a clear, unambiguous user interaction with the control. This is where a little animation can help – this is especially important for mobile apps where the user interface needs to be tangible.
iOS7/8 switch
Try to keep the list of possible options vertical. This rule applies to both checkboxes and radio buttons. If you cannot avoid horizontal placement, you need to arrange the elements at a sufficiently large interval to prevent double interpretation of what each checkbox selects. Below is an example with elements too close to each other.
It's hard to figure out which radio button to press to select the fourth option
Current switch position
When designing switches, uncertainty associated with the current state should be avoided. As an example, let's take the switch from iOS 6 and look at it in the on state - it is colored blue and the word ON is displayed.
It is not clear whether enabled is the current state or a proposed action
Can you tell definitively if the switch is in the on position, or will it only go there if you move the slider? Is "enabled" a state or an action? Unclear.
You must not mislead users; It is very important to distinguish between state and action. Yes, you can use color to further inform users, but you should make sure that the current view is clear, as in the following example:
Font color indicates current position
Use positive confirmation in checkbox text to let the user know exactly what will happen if they check the box. Avoid phrases like “Don't send me email again,” which would imply that the user needs to check a box to prevent something from happening.
Flags should be labeled with positive commands, not negative “Do not...”
Make the checkbox label the target area
All checkboxes are accompanied by labels, but the labels are not always clickable. The flags are small in size, and according to Fitts' law, they are difficult to hit, either with a mouse or with a finger. To increase the clickable area, give users the ability to select the desired option not only by hitting the exact box, but also by label or related words.
Allow the user to make selections by clicking not only a checkbox, but also a label
Use checkboxes only to change settings, not as control buttons
The main difference between a checkbox and a radio button is that a checkbox is used to change a state, while a radio button is used to enable or disable an action.
In the example below, the position of the switch allows you to clearly say: wireless is on. In the case of a checkbox, the user has to guess whether WiFi is enabled or whether a checkbox must be checked to enable it.
To turn services and hardware components such as WiFi on/off, use the switches
Checkbox interaction is different from radio button interaction
You can have the state of a checkbox not change immediately (as part of a form submission, for example), but the action of a radio button should happen immediately.It is good user experience practice to immediately change the controllable parameter using a switch - not after clicking the "Save" button or going to the previous page. This is what we expect from this control in real life - we flip the switch and the light turns on.
Enabling Wi-Fi in iOS
Use checkboxes when additional action is expected from the user to make a change take effect.
Use checkboxes when the user must click the Submit or Next button to save changes.
Conclusion
When developing an interface, be consistent in choosing its elements. Follow generally accepted standards; this will allow users to experience comfortable, predictable control. Otherwise, if you violate generally accepted standards, your user experience will be unpredictable, as if anything could happen at any moment.(✓), or less often a cross (×)). Traditionally, the flag has a square shape. Next to the flag its designation is displayed, usually a signature, less often an icon. To increase the area of the active element, both the flag itself and the caption to it react equally to mouse clicks.
Behavior
Unicode
In Unicode, empty and checked checkboxes are represented by the codes U+2610 (☐, "BALLOT BOX"), U+2611 (☑, "BALLOT BOX WITH CHECK"), and U+2612 (☒, "BALLOT BOX WITH X").
Alternatives
A special type of switch is common in mobile applications - the so-called toggle switch (toggle switch) . Unlike a checkbox, to turn a toggle switch on or off, you need to drag the toggle switch slider in one direction or another. Often the toggle switch itself displays its position, but it is not always obvious to the user whether the toggle switch is in this state or will go into it if the slider is moved. Therefore, it is usually recommended to sign the toggle switch positions on the outside. Locking buttons usually used in toolbars, as they take up little space and allow you to place an icon on yourself. It is impossible to determine by the appearance of the button whether it is fixed or not.
Buttons with changing label/icon- they also have a problem: is the inscription/icon an indicator of the current state or the action that will occur after clicking? Therefore, such buttons are only used when the current state is clear from the context.
You can also use instead of a checkbox switches(radio buttons, radio buttons, etc.) if they are given only two positions.
Write a review about the article "Checkbox (interface)"
Links
- Anatoly Khomonenko and others. Delphi 7. - St. Petersburg: BHV-Petersburg, 2005. - P. 172-175. - 1216 s. - (In the original). - additional, circulation 3,000 copies.- ISBN 5-94157-267-0.
- Alan Cooper. about the interface. Design Basics = About Face. The Essentials of Interaction Design. - 3. - St. Petersburg: Symbol-Plus, 2009. - P. 499. - 688 p. - 1500 copies. - ISBN 978 5 93286 132 5.
- in Apple HIG
- in GNOME HIG
- W3C on Web Page Controls
- .
Notes
| This article or section contains or external references, but the sources of individual statements remain unclear due to the lack of footnotes. Statements not made may be questioned and removed. You can improve the article by providing more accurate citations to your sources. |
|
||||||||||||||||||||||||||||||||||||||
An excerpt characterizing the Checkbox (interface)
- No, killing a person is not good, it’s unfair...- Why is it unfair? - repeated Prince Andrei; what is just and unjust is not given to people to judge. People have always been mistaken and will continue to be mistaken, and in nothing more than in what they consider just and unjust.
“It is unfair that there is evil for another person,” said Pierre, feeling with pleasure that for the first time since his arrival, Prince Andrei became animated and began to speak and wanted to express everything that made him what he was now.
– Who told you what evil is for another person? - he asked.
- Evil? Evil? - said Pierre, - we all know what evil is for ourselves.
“Yes, we know, but the evil that I know for myself, I cannot do to another person,” Prince Andrei said more and more animatedly, apparently wanting to express to Pierre his new view of things. He spoke French. Je ne connais l dans la vie que deux maux bien reels: c"est le remord et la maladie. II n"est de bien que l"absence de ces maux. [I know in life only two real misfortunes: remorse and illness. And the only good is the absence of these evils.] To live for yourself, avoiding only these two evils: that is all my wisdom now.
– What about love for one’s neighbor, and self-sacrifice? - Pierre spoke. - No, I cannot agree with you! To live only in such a way as not to do evil, so as not to repent? this is not enough. I lived like this, I lived for myself and ruined my life. And only now, when I live, at least try (Pierre corrected himself out of modesty) to live for others, only now I understand all the happiness of life. No, I don’t agree with you, and you don’t mean what you say.
Prince Andrei silently looked at Pierre and smiled mockingly.
“You’ll see your sister, Princess Marya.” You’ll get along with her,” he said. “Maybe you’re right for yourself,” he continued, after a short silence; - but everyone lives in their own way: you lived for yourself and you say that by doing this you almost ruined your life, and you only knew happiness when you began to live for others. But I experienced the opposite. I lived for fame. (After all, what is glory? the same love for others, the desire to do something for them, the desire for their praise.) So I lived for others, and not almost, but completely ruined my life. And since then I have become calmer, as I live only for myself.
- How can you live for yourself? – Pierre asked heatedly. - And the son, and the sister, and the father?
“Yes, it’s still the same me, it’s not others,” said Prince Andrei, but others, neighbors, le prochain, as you and Princess Mary call it, are the main source of error and evil. Le prochain [Neighbor] are those, your Kyiv men, to whom you want to do good.
And he looked at Pierre with a mockingly defiant gaze. He apparently called Pierre.
“You’re kidding,” Pierre said more and more animatedly. What kind of error and evil can there be in the fact that I wanted (very little and poorly fulfilled), but wanted to do good, and at least did something? What evil can it be that unfortunate people, our men, people just like us, growing up and dying without any other concept of God and truth, like ritual and meaningless prayer, will be taught in the comforting beliefs of a future life, retribution, reward, consolation? What evil and delusion is it that people die from illness without help, when it is so easy to help them financially, and I will give them a doctor, and a hospital, and a shelter for the old man? And isn’t it a tangible, undoubted blessing that a man, a woman and a child have no rest day and night, and I will give them rest and leisure?...” said Pierre, hurrying and lisping. “And I did it, at least poorly, at least a little, but I did something for this, and not only will you not dissuade me that what I did was good, but you will also not disbelieve me, so that you yourself do not think so.” “And most importantly,” Pierre continued, “I know this, and I know it correctly, that the pleasure of doing this good is the only true happiness in life.
“Yes, if you put the question like that, then that’s a different matter,” said Prince Andrei. - I build a house, plant a garden, and you are a hospital. Both can serve as a pastime. And what is fair, what is good - leave it to the one who knows everything, and not to us, to judge. “Well, you want to argue,” he added, “come on.” “They left the table and sat on the porch, which served as a balcony.
