type="topic"

      id="visual-layout">

  <info>

    <credit type="author">

      <name>Allan Day</name>

      <email>aday@gnome.org</email>

    </credit>

    <credit>

      <name>Calum Benson</name>

    </credit>

    <credit>

      <name>Adam Elman</name>

    </credit>

    <credit>

      <name>Seth Nickell</name>

    </credit>

    <credit>

      <name>Colin Robertson</name>

    </credit>

    <include href="legal.xml" xmlns="http://www.w3.org/2001/XInclude"/>

    <desc>Arranging elements within a user interface.</desc>

  </info>

<title>Visual layout</title>

The visual layout of controls, information and content affects how easy it is to understand your application, as well as how beautiful it is. It is important to recognise that visual design has a strong impact on how much work is involved in using an application - poor layout results in users having to put in additional effort, while good layout requires less effort.

Following these visual layout guidelines will help you to produce an application that is beautiful, easy to understand, and efficient to use.

<section id="general-guidelines">

<title>General guidelines</title>

<list>

<item>
An alignment point is an imaginary vertical or horizontal line through your window that touches the edge of one or more labels or controls in the window. Minimize the number of these - the fewer there are, the cleaner and simpler your layout will appear, and the easier it will be for people to understand.
</item>

<item>
Align content and controls in your layout exactly. The eye is very sensitive to aligned and unaligned objects. If visual elements do not line up, it will be hard for someone to scan them. Elements that do not quite line up will be distracting.
</item>

<item>
Be consistent. Use the same amounts of spacing throughout.
</item>

<item>
Organize related controls and information into groups, and use spacing to differentiate them. This makes an interface far easier to read and understand.

<list>

<item>
As a rule of thumb, leave space between elements in increments of 6 pixels, going up as the relationship between related elements becomes more distant.
</item>

<item>
Between labels and associated components, leave 12 horizontal pixels.
</item>

<item>
For vertical spacing between groups of components, 18 pixels is adequate.
</item>

<item>
A general padding of 18 pixels is recommended between the contents of a dialog window and the window borders.
</item>

</list></item>

<item>
Indent elements by 12 pixels to denote hierarchy and association.
</item>

<item>
Avoid using frames with visible borders to separate groups of controls - use spacing and headers instead.
</item>

</list>

Incorrect spacing and alignment:

<media type="image" mime="image/svg" src="figures/visual-alignment-incorrect.svg"/>

Correct spacing and alignment:

<media type="image" mime="image/svg" src="figures/visual-alignment-correct.svg"/>

Correct spacing, with units (pixels):

<media type="image" mime="image/svg" src="figures/visual-alignment-spacing.svg"/>

</section>

<section id="label-alignment">

<title>Label alignment</title>

If possible, right-justify labels (see the diagram below). This will avoid large gaps between labels and their associated controls. This type of right-justification is not possible if you have indented controls: here left-justification should be used instead.

<media type="image" mime="image/svg" src="figures/label-alignment.svg"/>

</section>

<section id="hierarchy">

<title>Visual hierarchy</title>

Organize visual elements from top-to-bottom and left-to-right. This is the direction that people from western locales tend to read an interface, so that the items at the top-left will be encountered first. This ordering gives interfaces a hierarchy: those components that are viewed first are perceived to have priority over those that come after them. For this reason, you should place dominant controls above and to the left of the controls and content that they affect. Header bars are a key design pattern in this respect.

</section>

</page>