< KDE Visual Design Group‎ | HIG
Revision as of 09:56, 3 August 2017 by Elvis Angelaccio (talk | contribs) (There is no "KDE5", replace it with "Plasma 5")

Purpose

One of the most important aspects of presentation is alignment and placement of controls. Its theoretical foundation is based on Gestalt psychology. Human perception tends to order experience in a manner that is regular, orderly, symmetric, and simple. Visual impression is generated to an emergent whole based on several principles, called Gestalt laws. Two basic laws are:

  • Law of proximity: an assortment of objects that are close to each other are formed into a group
  • Law of similarity: objects will be perceptually grouped together if they are similar to each other

Placement of controls should be carefully done according to Gestalt theory.

Guidelines

Labels

  • Align labels to the right and connected widgets to the left, making a group of form widgets appear to be center aligned. In Qt5, using a QFormLayout handles this correctly for you.
Form Align KDE3.qml.png
Form Align KDE5.qml.png
BAD
KDE3 form alignment
GOOD
Plasma 5 form alignment.

Controls

  • Align groups of items vertically rather than horizontally, as this makes them easier to scan visually. Use horizontal or rectangular alignments only if they greatly improve the layout of the window.
  • Align a group of widgets to the left. This makes use of space more efficiently.
Form Align OSX.qml.png
Form Align KDE5.qml.png
BAD
OSX form alignment
GOOD
Plasma 5 form alignment.
  • Left align controls over multiple groups (in case of right-to-left languages mirror the alignment). The visual anchor facilitates scanning of content, and left-hand alignment fits as well forms that have been oversized individually.
Form Align NO.qml.png
Form Align YES.qml.png
BAD
no alignment over controls
GOOD
left aligned controls
  • Keep track on label size; avoid big differences in text length (even after translation), that could result in much white space for multiple aligned controls.
Form Align Long.qml.png
BAD
Avoid very long captions


  • In some cases it may be useful to visually separate groups of related options within one group box to facilitate scanning of the dialog. In that case, put a vertical, fixed-size spacer of 16px height between the options.
Separating groups of related options with a vertical spacer.


Check boxes and Radio buttons

For more details on alignment of radio buttons and checkboxes see the detailed HIG pages.

Addendum


Content is available under Creative Commons License SA 4.0 unless otherwise noted.