Layout
Arrange UI controls in dialogs according to the rules below to help people locate the necessary settings faster and understand how they are related.
Independent controls:
Labeled input controls: fields, combo boxes, text areas, etc.
Dependent controls — controls that depend on a parent control.
Organize controls into easily readable groups with vertical and horizontal insets.
Independent controls
Labeled input controls
Labeled input controls are: input field, combo box, drop-down list, text area, and spinner.
By default, put input controls with labels of similar length on different lines and align their input boxes on the left side.
Do not align input boxes on the left side if one label is twice as long as the other one or even longer.
If several related input controls have labels of up to 10 characters and their input boxes are short, organize them in two columns. Do not use more than two columns.
If an input box is long, and the horizontal space is limited, place the label above the box. Otherwise, always put the label and the box on the same line.
Separated by other controls
If there are two input controls with labels of similar length that are separated from each other by a single control, align their input boxes on the left side.
Align only the input boxes of the neighboring input controls. If there are several input controls on a page, and they are separated from each other by two or more other UI elements, do not align their input boxes.
If input groups are separated by a group of other UI controls, align only the boxes located within one group.
Labels and right borders
Always left-align labels.
Align the right borders of input boxes that have a similar length. For alignment, use built-in icons. Do not use buttons.
Checkboxes and radio buttons
By default, put independent checkboxes and radio button groups on different lines.
If there is a group of 2–3 checkboxes with short labels (1–3 words), place them on the same line. The same rule applies to radio buttons. With this alignment, controls form a short sentence, making it easier to understand their meaning compared to when they are split into several lines.
When there is an input control on one line and a group of checkboxes or radio buttons on the next line, and their labels are of similar length (one is no more than 5 characters longer than the other), align the input box with the checkbox/radio button.
If one label is much longer than the other, do not align these UI elements.
If a checkbox group does not have a label, align it with other independent controls by the left side.
4 and more checkboxes can be arranged in columns:
Arrange checkboxes with labels of up to 30 characters in 2 columns.
Arrange checkboxes with labels of up to 15 characters in 3 columns.
Do not arrange radio buttons from one group in several columns. Splitting a group of radio buttons into two or more columns makes it unclear that all these radio buttons belong to the same setting.
Buttons and links
Align an independent button or link to the left with other controls.
If there are 2–3 buttons or links with labels of up to 30 characters each, place them on one line.
Do not arrange buttons or links in several columns. Such a layout takes more time to parse visually.
Lists, trees and tables
Choose a control width such that most of the common values are visible. Take the whole width of the dialog if necessary.
If the dialog containing the control is noticeably wider than the control itself, reduce the length of the control.
Do not put other independent controls to the right of a list, tree, or table. They would look like dependent controls in the master-detail layout.
If there are several lists, trees, or tables in a dialog, make them of the same width.
Dependent controls
Align controls according to the rules below to show that they are related.
Place 2–3 related UI controls on the same line if each control takes up to 30 characters. This way the user needs to read just one line, and it is quicker to see that the controls depend on each other.
In all other cases, place interrelated controls on different lines:
Main control: labeled input control.
Align other dependent elements with the left border of the input box.
If an input's label is long or the input box is very short, align by the label and add a horizontal inset.
Main control: checkbox or radio button. Align dependent controls by the label.
When the main control or one of the dependent controls takes the whole width of a panel, left align all elements.
When the main control takes the whole width of a panel, and there is one small dependent control (for example, a drop-down list), place this dependent control to the top-right corner, above the main control.
See the Inline help text and Tooltip articles for details on how to arrange help information in dialogs.
If controls do not depend on each other, left-align them all. Otherwise, the user might think that controls are linked.
Organize with insets
Use vertical insets to break a list of controls into easily readable groups. Compare:
Incorrect
Correct
Treat insets with extra care and make sure that elements within a group are actually related. An unnecessary inset may create a false impression that the controls are grouped. This complicates the UI and might cause confusion.
Incorrect
Correct
Horizontal insets also matter for grouping controls.
Incorrect
Better
Correct
See Groups of controls for how to organize a bigger group of controls.