d8e83b57ea
* Add UI Guidelines to SDK docs * Add UI Guidelines to SDK docs * Fixing build errors * optimize PNGs * add UI guidelines landing page placeholder * IJ SDK Docs <-> UI guidelines crosslinks updated * split_button.md: remove reference to removed setting * use <ui-path> * use MD instead of <note> * use %gh-ic% links * drop_down.md: fix <control> * code samples: fix most obvious issues * remove obsolete `_defaults.md` * ijs.tree: UI cleanup * Delete "under construction" pages * Fix headers * Add link-summary * Remove invalid links * Delete unused files * Remove ''@2x' from image file names * Use Markdown syntax for some images and tables * Rename non-unique files to unique * Remove alpha in images where content is unreadable * align quotation marks * Controls: cleanup/fixes, add code links, edit * tooltip.md: fix HTML * misc fixes * typography.md: fix table contents * typography.md: fix table header * UI guidelines landing page + TOC fixes * remove unused icons_list.md * Normalize image paths * validation_errors.md: Fix broken tab * "correct"/"incorrect" labels styling * Resize images to 50% * button.topic: fixes * grammar, spelling, minor edits * remove ' ' * fix 99px * cleanup * UI_kit.md: minor * Fix "MRK058: Large image in paragraph rendered as a block element by default." * button.topic: Add img[alt] * mnemonics.md: Update "Contact Us" link to the IJSDK YouTrack * split_button.md: Use ui-path * UI landing: add feedback snippet * Improve code snippets formatting and naming * Fix code samples * Fix code samples * Add Kotlin variants for code samples * Add icons_list.md * crosslinks * Change external link to https://intellij-icons.jetbrains.design/ * icons list -> https://intellij-icons.jetbrains.design * Hide info about reducing split button to simple action button (now it is available through the registry only) * reformat * icons_style.md: Images in new line --------- Co-authored-by: marianna.kononenko <marianna.kononenko@jetbrains.com> Co-authored-by: Yann Cébron <yann.cebron@jetbrains.com>
9.9 KiB
Layout
UI guidelines on laying out the controls in dialogs.
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.
- Checkboxes and radio buttons
- Buttons and links
- Lists, trees, tables
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.
{width=391}
Do not align input boxes on the left side if one label is twice as long as the other one or even longer.
{width=391}
{width=391}
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.
{width=391}
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.
{width=412}
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.
{width=452}
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.
{width=452}
If input groups are separated by a group of other UI controls, align only the boxes located within one group.
{width=616}
Labels and right borders
Always left-align labels.
This alignment is inconsistent with macOS guidelines, but the aim is to maintain consistency in all JetBrains IDEs on all supported platforms.
{style="note"}
{width=464}
Align the right borders of input boxes that have a similar length. For alignment, use built-in icons. Do not use buttons.
{width=302}
Checkboxes and radio buttons
By default, put independent checkboxes and radio button groups on different lines.
{width=358}
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.
{width=358}
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.
{width=461}
If a checkbox group does not have a label, align it with other independent controls by the left side.
{width=417}
4 and more checkboxes can be arranged in columns:
- Arrange checkboxes with labels of up to 30 characters in 2 columns.
{width=417}
- Arrange checkboxes with labels of up to 15 characters in 3 columns.
{width=417}
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.
{width=417}
Buttons and links
Align an independent button or link to the left with other controls.
{width=361}
{width=361}
If there are 2–3 buttons or links with labels of up to 30 characters each, place them on one line.
{width=361}
Do not arrange buttons or links in several columns. Such a layout takes more time to parse visually.
{width=361}
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.
{width=638}
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.
{width=638}
If there are several lists, trees, or tables in a dialog, make them of the same width.
{width=452}
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.
{width=497}
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.
{width=281}
{width=281}
- If an input's label is long or the input box is very short, align by the label and add a horizontal inset.
{width=489}
Main control: checkbox or radio button. Align dependent controls by the label.
{width=342}
When the main control or one of the dependent controls takes the whole width of a panel, left align all elements.
{width=475 style=block}
The text area is the main control, the button is the dependent control.
{width=475 style=block}
The checkbox is the main control, the table is the dependent control.
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.
{width=475}
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.
{width=517 style=block}
The spinners do not depend on the top checkbox.
Organize with insets
Use vertical insets to break a list of controls into easily readable groups. Compare:
Incorrect
{width=396 style=block}
The list of controls is hard to scan quickly because the controls "stick" together.
Correct
{width=396 style=block}
Scanning a list of controls becomes easier when vertical insets are added between the groups of controls.
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
{width=396 style=block}
The first checkbox depends on the combo box which is shown with the horizontal inset. However, the checkboxes appear grouped because they are closer.
Correct
{width=396 style=block}
The first checkbox is closer to its main control, and it is easier to see that the combo box and checkbox are related.
Horizontal insets also matter for grouping controls.
Incorrect
{width=396 style=block}
The checkboxes and the "Length" fields look independent because the horizontal inset between them is bigger than the vertical inset below the second checkbox.
Better
{width=396 style=block}
With smaller horizontal and bigger vertical insets, the checkboxes and the "Length" fields look related. However, it could be made better if the repeating word "Separator" appears only once.
Correct
{width=396 style=block}
Correct grouping and no duplicates help understand the UI quicker.
See Groups of controls for how to organize a bigger group of controls.