Difference between revisions of "Projects/Usability/HIG/Alignment"

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(Created page with "__NOTOC__ * Align labels to the right and connected widgets to the left, making a group of form widgets appear to be center aligned. In Qt4, using a QFormLayout handles this...")
 
 
(10 intermediate revisions by one user not shown)
Line 1: Line 1:
 
__NOTOC__  
 
__NOTOC__  
 +
== 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 Qt4, using a QFormLayout handles this correctly for you.  
 
* Align labels to the right and connected widgets to the left, making a group of form widgets appear to be center aligned. In Qt4, using a QFormLayout handles this correctly for you.  
 
{|
 
{|
Line 6: Line 13:
 
|[[Image:Alignment_kde4.png|frame|GOOD: KDE4 form alignment]]
 
|[[Image:Alignment_kde4.png|frame|GOOD: KDE4 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.  
 
* Align a group of widgets to the left. This makes use of space more efficiently.  
 
{|
 
{|
 
|[[Image:Alignment_osx.png|frame|BAD: OSX form alignment]]
 
|[[Image:Alignment_osx.png|frame|BAD: OSX form alignment]]
|[[Image:Alignment_kde4.png|frame|GOOD: KDE4 form alignment <font color="blue">Remark: Example seems to be justified rather than left aligned</font>]]
+
|[[Image:Alignment_kde4.png|frame|GOOD: KDE4 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.
 +
{|
 +
|[[Image:GroupAlignment_bad.png|frame|BAD: no alignment over controls]]
 +
|[[Image:GroupAlignment_good.png|frame|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.
 +
{|
 +
|[[Image:CaptionSize_bad.png|frame|BAD: Avoid very long captions]]
 
|}
 
|}
* The alignment of groups of widgets is independent, and so you may have different sized groups with different "centered" lines. A group of widgets consists of widgets within some type of natural separation such as a group box or separator bar. <font color="blue">Remark: Probably a matter of discussion</font>
 
[[Image:Multiple_groups.png|frame|center|Multiple group alignment in KDE4]]
 
 
* 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.
 
* 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.
 
[[Image:Related_options.png|frame|center|Separating groups of related options with a vertical spacer.]]
 
[[Image:Related_options.png|frame|center|Separating groups of related options with a vertical spacer.]]
* 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.
+
=== Check boxes and Radio buttons ===
* Create a buddy relation with the caption so access keys are assigned.
+
* Group check boxes or radio buttons together in the widget column and add a label describing the group in the label column.
* If activating a choice affects the appearance or the enabled state of other controls, place them next to it with a space indentation.
+
*: [[Image:Grouped_checkboxes.png|frame|center|Grouped checkboxes]]
* If the control appears in a dialog or utility window, consider making the window and the control within it resizeable so that the user can choose how many items are visible at a time without scrolling. Each time the user opens this dialog, set its dimensions to those that the user last resized it to.
+
* Make the check boxes or radio buttons span the two columns, but keep them at the bottom of the form.
 +
*: [[Image:Two_column_checkboxes.png|frame|center|Checkboxes spanning two columns]]
 +
* If all else fails, add a label describing the checkbox on the left side of the checkbox, then set the text of the checkbox to "Enabled", "On", or similar.
 +
*: [[Image:Checkbox_separate_label.png|frame|center|Using a separate title label for the checkbox.]]
 +
* When options are subordinate to a check box or radio button (e.g. Audio level can only be set if the Activate Audio option is selected), this relation should be visualized by indenting the sub-options. There are two options to do so:
 +
** When you are using a left-aligned check box, indent the sub-options by using a horizontal spacer of SizeType "Minimum".
 +
**: [[Image:Suboption_spacer.png|frame|center|Aligning sub-options with a horizontal spacer of SizeType "Minimum".]]
 +
** When you are using a check box that is placed right to its label, indent the sub-options in the same vertical axis as the check box.
 +
**:  [[Image:Suboption_right.png|frame|center|Aligning sub-options with the same vertical axis as the checkbox itself.]]
 +
 
 +
== Addendum ==
 +
* ColumnResizer: http://agateau.com/2011/01/28/clean-up-your-layouts-with-columnresizer/
 +
 
 +
[[Category:Usability]][[Category: Presentation]][[Category:Layout]]

Latest revision as of 12:52, 9 January 2014

[edit] 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.

[edit] Guidelines

[edit] Labels

  • Align labels to the right and connected widgets to the left, making a group of form widgets appear to be center aligned. In Qt4, using a QFormLayout handles this correctly for you.
BAD: KDE3 form alignment
GOOD: KDE4 form alignment

[edit] 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.
BAD: OSX form alignment
GOOD: KDE4 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.
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.
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.

[edit] Check boxes and Radio buttons

  • Group check boxes or radio buttons together in the widget column and add a label describing the group in the label column.
    Grouped checkboxes
  • Make the check boxes or radio buttons span the two columns, but keep them at the bottom of the form.
    Checkboxes spanning two columns
  • If all else fails, add a label describing the checkbox on the left side of the checkbox, then set the text of the checkbox to "Enabled", "On", or similar.
    Using a separate title label for the checkbox.
  • When options are subordinate to a check box or radio button (e.g. Audio level can only be set if the Activate Audio option is selected), this relation should be visualized by indenting the sub-options. There are two options to do so:
    • When you are using a left-aligned check box, indent the sub-options by using a horizontal spacer of SizeType "Minimum".
      Aligning sub-options with a horizontal spacer of SizeType "Minimum".
    • When you are using a check box that is placed right to its label, indent the sub-options in the same vertical axis as the check box.
      Aligning sub-options with the same vertical axis as the checkbox itself.

[edit] Addendum


This page was last modified on 9 January 2014, at 12:52. This page has been accessed 1,014 times. Content is available under Creative Commons License SA 3.0 as well as the GNU Free Documentation License 1.2.
KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V.Legal