UX design: checkboxes and radio buttons in forms

When creating forms, designers often face the need to choose which element of the user interface will provide the necessary level of interaction when changing parameters. Of course, each specialist has his own rules, but everyone should be aware of some invariable axioms that work always and everywhere.

Parameters can be selected 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

Flags are used when there is a list of parameters, and the user can select any number of them: one, several or none. In other words, each flag is an independent control, and the inclusion of one of them does not cancel the action of the other.


Flags are labeled

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). Here you can draw an analogy with a light switch.


Lighting is the most common area of ​​application for switches.

Practical guidelines for using checkboxes and radio buttons

Use the standard appearance

. A check mark is just a small box with a check mark or a cross.


Two checkboxes: checked or unchecked The

switch should look like a normal toggle switch with two positions.


Two positions of the switch: on or off.

You need to provide a clear, unambiguous user interaction with the control. Small animation can help here - this is especially important for mobile applications where the user interface should be tangible.


IOS7 / 8 switch

Try to keep your options list upright. This rule applies to checkboxes and radio buttons. If it is impossible to get away from horizontal placement, it is necessary to arrange the elements with a sufficiently large interval so as to prevent double interpretation, which selects each flag. Below is an example with elements too close together.


It’s difficult to understand which radio button to click to select the fourth option

Current switch position

When designing switches, the uncertainty associated with the current state should be avoided. As an example, take the switch from iOS 6 and look at it in the on state - the color is blue and the word ON is displayed.


It’s not clear whether it’s turned on - is this the current state, or can the proposed action

be unambiguous, is the switch in the on position, or will it only go into it if you move the slider? “Enabled” - is it a state or action? Unclear.

You should 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 perceived unambiguously, as in the following example:


The font color indicates the current position.

In the text of the flag labels, use positive confirmation so that the user knows exactly what will happen if he puts a mark. Avoid phrases like “Don’t send me e-mail messages anymore”, which would mean that the user needs to check the box to prevent something from happening.



Flags should have inscriptions with positive commands, and not with negative “Not ...”

Make the check box the target area

All flags are accompanied by labels, but labels are not always clickable. The flags are small in size, and according to the Fitts law it’s hard to hit them with either a mouse or a finger. In order to increase the area of ​​pressing, give users the opportunity to choose the required parameter not only by entering exactly into the box, but also by label or related words.


Allow the user to make a choice by pressing not only a flag, but also a label.

Use flags only to change parameters, but not as control buttons.

The main difference between a flag and a switch is that the flag is used to change the state, and the switch is used to enable or disable the action.

In the example below, the position of the switch allows us to say unequivocally: wireless is on. In the case of the checkbox, the user has to guess - WiFi is on, or to enable it, check the box.


Use the switches to enable / disable services and hardware components such as WiFi

Flag interaction is different from switch interaction

You can make sure that the state for which the checkbox is responsible does not change immediately (as part of the form to be submitted, for example), but the action for which the switch is responsible should be performed immediately.

A good practice for user interaction is to instantly change the managed parameter using the switch - not after clicking the Save button or going to the previous page. This is exactly what we expect from this control in real life - we click the switch and the light turns on.


Enabling Wi-Fi in iOS
Use the checkboxes when additional actions are expected from the user to enter the change into force



Use the checkboxes when the user must click the “Send” or “Next” button to save the changes.

Conclusion

When developing an interface, be consistent in choosing its elements. Follow generally accepted standards; this will allow users to get convenient predictable control. Otherwise, if you violate generally accepted standards, your user interface will be unpredictable, as if anything could happen at any time.