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

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
("Example of "--)
 
(3 intermediate revisions by one user not shown)
Line 2: Line 2:
  
 
One of the new changes in KDE 4.x since KDE 3.x is the alignment of form and widget labels.  In KDE 3.x, labels were aligned to the left and widgets were aligned to the left.  In KDE 4, form labels are now aligned to the right and widgets are aligned to the left, making a group of form widgets appear to be center aligned.  In Qt4, using a [http://doc.trolltech.com/qformlayout.html QFormLayout] handles this correctly for you.
 
One of the new changes in KDE 4.x since KDE 3.x is the alignment of form and widget labels.  In KDE 3.x, labels were aligned to the left and widgets were aligned to the left.  In KDE 4, form labels are now aligned to the right and widgets are aligned to the left, making a group of form widgets appear to be center aligned.  In Qt4, using a [http://doc.trolltech.com/qformlayout.html QFormLayout] handles this correctly for you.
 
[[Image:Discover.png|noframe]]
 
  
 
{|
 
{|
|[[Image:Alignment_kde3.png|frame|Example of KDE3 form alignment]]
+
|[[Image:Alignment_kde3.png|frame|BAD: KDE3 form alignment]]
|[[Image:Wiki-alignment-3.png|frame|Example of KDE4 form alignment]]
+
|[[Image:Alignment_kde4.png|frame|GOOD: KDE4 form alignment]]
 
|}
 
|}
  
Line 15: Line 13:
  
 
{|
 
{|
|[[Image:Wiki-alignment-2.png|frame|Example of OSX form alignment]]
+
|[[Image:Alignment_osx.png|frame|BAD: OSX form alignment]]
|[[Image:Wiki-alignment-3.png|frame|Example of KDE4 form alignment]]
+
|[[Image:Alignment_kde4.png|frame|GOOD: KDE4 form alignment]]
 
|}
 
|}
  
 
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.
 
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.
  
[[Image:Wiki-alignment-4.png|frame|center|Example of multiple group alignment in KDE4]]
+
[[Image:Multiple_groups.png|frame|center|Multiple group alignment in KDE4]]
  
 
== Checkboxes ==
 
== Checkboxes ==
Line 29: Line 27:
 
1. Group checkboxes together in the widget column and add a label describing the group in the label column:
 
1. Group checkboxes together in the widget column and add a label describing the group in the label column:
  
[[Image:Hig-grouped-checkboxes.png|frame|center|Grouped checkboxes]]
+
[[Image:Grouped_checkboxes.png|frame|center|Grouped checkboxes]]
  
 
2. Make the checkboxes span the two columns, but keep them at the bottom of the form:
 
2. Make the checkboxes span the two columns, but keep them at the bottom of the form:
  
[[Image:Hig-two-column-checkboxes.png|frame|center|Checkboxes spanning two columns]]
+
[[Image:Two_column_checkboxes.png|frame|center|Checkboxes spanning two columns]]
  
 
3. 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.
 
3. 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:Hig-checkbox-separate-label.png|frame|center|Using a separate title label for the checkbox.]]
+
[[Image:Checkbox_separate_label.png|frame|center|Using a separate title label for the checkbox.]]
  
 
== Aligning Sub-Options ==
 
== Aligning Sub-Options ==
Line 45: Line 43:
 
1. When you are using a left-aligned checkbox or radio button, indent the sub-options by using a horizontal spacer of SizeType "Minimum".
 
1. When you are using a left-aligned checkbox or radio button, indent the sub-options by using a horizontal spacer of SizeType "Minimum".
  
  [[Image:Wiki-alignment-7.png|frame|center|Example of aligning sub-options with a horizontal spacer of SizeType "Minimum".]]
+
  [[Image:Suboption_spacer.png|frame|center|Aligning sub-options with a horizontal spacer of SizeType "Minimum".]]
  
 
2. When you are using a checkbox that is placed right to its label, indent the sub-options in the same vertical axis as the checkbox.
 
2. When you are using a checkbox that is placed right to its label, indent the sub-options in the same vertical axis as the checkbox.
  
  [[Image:Wiki-alignment-5.png|frame|center|Example of aligning sub-options with the same vertical axis as the checkbox itself.]]
+
  [[Image:Suboption_right.png|frame|center|Aligning sub-options with the same vertical axis as the checkbox itself.]]
  
 
'''The contents of this guideline are under discussion.  Please request guidance in #kde-usability if you have any questions regardling Form Label Alignment'''
 
'''The contents of this guideline are under discussion.  Please request guidance in #kde-usability if you have any questions regardling Form Label Alignment'''
Line 57: Line 55:
 
In some cases it may be useful to visually separate groups of related options within one GroupBox to facilitate scanning of the dialog.
 
In some cases it may be useful to visually separate groups of related options within one GroupBox to facilitate scanning of the dialog.
  
In that case, put a vertical fixed size spacer of 16px height between the options.
+
In that case, put a vertical, fixed-size spacer of 16px height between the options.
  
[[Image:Wiki-alignment-6.png|frame|center|Example of separating groups of related options with a vertical spacer.]]
+
[[Image:Related_options.png|frame|center|Separating groups of related options with a vertical spacer.]]
  
 
== Examples ==
 
== Examples ==

Latest revision as of 18:20, 19 June 2013

Contents

[edit] Label Alignment

One of the new changes in KDE 4.x since KDE 3.x is the alignment of form and widget labels. In KDE 3.x, labels were aligned to the left and widgets were aligned to the left. In KDE 4, form labels are now aligned to the right and widgets are aligned 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] Dialog Alignment

In OSX, a group of widgets is center aligned. In KDE4, a group of widgets is left aligned. This aligns the labels closer to the left edge and makes use of space more efficiently.

BAD: OSX form alignment
GOOD: KDE4 form alignment

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.

Multiple group alignment in KDE4

[edit] Checkboxes

The text of a checkbox is on the right of its tick rectangle, which can make it difficult to avoid blank areas on the left side of the form. To keep the layout of the form balanced you can use one of the following approaches:

1. Group checkboxes together in the widget column and add a label describing the group in the label column:

Grouped checkboxes

2. Make the checkboxes span the two columns, but keep them at the bottom of the form:

Checkboxes spanning two columns

3. 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.

[edit] Aligning Sub-Options

When options are subordinate to a checkbox or radiobutton (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:

1. When you are using a left-aligned checkbox or radio button, indent the sub-options by using a horizontal spacer of SizeType "Minimum".

Aligning sub-options with a horizontal spacer of SizeType "Minimum".

2. When you are using a checkbox that is placed right to its label, indent the sub-options in the same vertical axis as the checkbox.

Aligning sub-options with the same vertical axis as the checkbox itself.

The contents of this guideline are under discussion. Please request guidance in #kde-usability if you have any questions regardling Form Label Alignment

[edit] Grouping related options within a GroupBox

In some cases it may be useful to visually separate groups of related options within one GroupBox 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] Examples

[Screenshots of example dialog layouts simple and complex]

[edit] More Information

Label Placement in Forms


This page was last modified on 19 June 2013, at 18:20. This page has been accessed 7,585 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