< Projects‎ | Usability‎ | HIG

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

(new content)
 
(HIG moved to community)
 
(13 intermediate revisions by 4 users not shown)
Line 1: Line 1:
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.
+
{{ Moved To Community | KDE_Visual_Design_Group/HIG/Form Label Alignment }}
 
 
[[Image:Wiki-alignment-1.png|frame|Example of KDE 3 form alignment]]
 
 
 
[[Image:Wiki-alignment-3.png|frame|Example of KDE4 form alignment]]
 
 
 
== 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. 
 
 
 
[[Image:Wiki-alignment-2.png|frame|Example of OSX form alignment]]
 
 
 
[[Image:Wiki-alignment-3.png|frame|Example of 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.
 
 
 
[[Image:Wiki-alignment-4.png|frame|Example of multiple group alignment in KDE4]]
 
 
 
== Checkboxes ==
 
 
 
=== Problems with QT 4 ===
 
 
 
The checkbox widget in QT 4 is the input click box on the left and the label on the right.  Unfortunately, it difficult to create a checkbox with a label on the right of the input click box.  This is a problem because there are common cases when the label on the left of the input click box is better usability.  Until there is a resolution that makes configuring the checkbox label to the left of the input click box easier, use the default checkbox alignment (right aligned label).
 
 
 
== Examples ==
 
 
 
[Screenshots of example dialog layouts simple and complex]
 
 
 
== More Information ==
 
 
 
[http://www.uxmatters.com/MT/archives/000107.php Label Placement in Forms]
 

Latest revision as of 11:26, 4 August 2016

This page is now on the community wiki.


This page was last edited on 4 August 2016, at 11:26. Content is available under Creative Commons License SA 4.0 unless otherwise noted.