Should the checkbox label be on the right or left of the controller?

Question

Usually we put the label to the left of the data entry control. Well, it has layouts but this is a common good. By linearity would be the case of label continue left. But it’s very common to see the label be placed on the right. It is true that in such cases the checkbox is not part of a sequence of data input fields.

Doesn’t it get weird to be on one side, time to be on the other? Thinking about these two scenarios:

• one of them is a form where one or more fields are checkboxes;
• the other scenario where these checkboxes are only isolated options.

When to use the label on one side and the other? And most importantly, why should it be so?

I need a plausible justification and not just an opinion, if possible some reference that confirms.

Answer 1

A checkbox (checkbox) represents a binary option that can be checked or unchecked by the user. Thus, far more important than the organisation of the accompanying text is affordance selectable option: the user must first understand that this is an option that can be checked or unchecked.

The text, or label, needs to be clearly noticeable as related to the option, so there is no doubt about what is being chosen. This is usually done by keeping this label sufficiently close to the box and in the same colors and dimensions.

The positioning of the text in relation to the box is usually done to the right or above it, which most likely it’s a convention (I say probably because I haven’t found any corroborative sources to be absolutely sure). When questionnaires began to be used in sociology and psychology studies (more or less when the likert scale was created, that is, around the beginning of the last century), probably this convention was used because it aids in usability in languages that are read from left to right.

By placing the box before the text and next to it, it ensures that the perception of relationship will be the best possible. For example, in a questionnaire containing dozens of questions, the text of each question must have different lengths. The placement of the boxes after the text would cause the options to be vertically misaligned, which besides being visually uncomfortable would also hinder the easy perception of the relationship between the text and the box of each question.

In the case of a computer system, this principle should be followed if large amounts of options are also used on the same screen. The perception of relationship can also be effected by spacing, by placing different options (with their respective texts) away from each other. Anyway, the best thing to do is certainly follow the operating system convention that you’re using yourself. In addition to probably having already been studied by OS developers, users will already be used to this convention in a way that will avoid misunderstandings.

Answer 2

Edit

Who chooses is the client, who designed the layout or the need.

And the case of languages where the writing comes from right to left.

I believe that there are rules that must be broken, to maintain the "affordance" !

There may be theories about intuitive layout, or the user’s reading mode, however, let’s face it, there should be no such obligation.

The form controls automatically have a label associated with them through the attribute value, however those that do not have (text Fields, checkboxes, radio Buttons, and menus) have the attribute for that will make the reference to the control.

That is if I want to put the label up, down, superimposed, diagonally, I can ! There is no validator who will say it is wrong.

There is no justification outside the design. There is scenario for use in all positions.

Examples :

No more is a pattern is pure theory.

Although it is said here(W3.org) that the checkbox at the level of predictability, should have the control before the label, is still an opinion of what is better in terms of UX, however prevails the design, this in turn will tell what is correct for a certain purpose.

Imagine a text column to the left and in the center another with checkbox options, if you follow the "rule" above the control will be between 2 texts, and there ? Is it more readable ? No, so it depends on the design.

section{float:left;}

<section>
blablbalbalballballlballbal<br>
blablbalbalballballlballbal<br>
blablbalbalballballlballbal<br>
blablbalbalballballlballbal<br>
blablbalbalballballlballbal<br>
</section>
<input type="checkbox" id="check">
<label for="check">blablablalballbalbla</label>

See the result, it’s a consistent rule ?

Answer 3

This question focuses a lot on opinion, but, when it comes to UX, the most accepted concept says that the Label should be in the right of control. With all kinds of reasons:

• Consistent alignment;
• Follow our natural left-right reading mode;
• be consistent with Labels of varying sizes.

Much more can be read here (in English): https://ux.stackexchange.com/questions/5080/should-checkbox-labels-be-to-the-right-or-the-left