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...")
 
(HIG moved to community)
 
(11 intermediate revisions by one other user not shown)
Line 1: Line 1:
__NOTOC__
+
{{ Moved To Community | KDE_Visual_Design_Group/HIG/Alignment }}
 
+
* 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.
+
{|
+
|[[Image:Alignment_kde3.png|frame|BAD: KDE3 form alignment]]
+
|[[Image:Alignment_kde4.png|frame|GOOD: KDE4 form alignment]]
+
|}
+
* 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_kde4.png|frame|GOOD: KDE4 form alignment <font color="blue">Remark: Example seems to be justified rather than left aligned</font>]]
+
|}
+
* 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.
+
[[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.
+
* Create a buddy relation with the caption so access keys are assigned.
+
* If activating a choice affects the appearance or the enabled state of other controls, place them next to it with a space indentation.
+
* 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.
+

Latest revision as of 11:26, 4 August 2016

This page is now on the community wiki.


This page was last modified on 4 August 2016, at 11:26. Content is available under Creative Commons License SA 3.0 as well as the GNU Free Documentation License 1.2 unless otherwise noted.