Differential D12961 Diff 37192 source/layout/alignment.rst

Changeset View

Standalone View

View Options

source/layout/alignment.rst

Show All 16 Lines16- Law of similarity: objects will be perceptually grouped together if
17 they are similar to each other 17​ they are similar to each other
18 18​
19Placement of controls should be carefully done according to Gestalt 19​Placement of controls should be carefully done according to Gestalt
20theory. 20​theory.
21 21​
22Guidelines 22​Guidelines
23---------- 23​----------
24 24​
25Labels ​
26~~~~~~ ​
27 25​
28- Align labels to the right and connected widgets to the left, making a 26​Labels on the left
29 group of form widgets appear to be center aligned. In Qt5, using a 27​~~~~~~~~~~~~~~~~~~
30 QFormLayout handles this correctly for you. 28​
29​On |desktopicon| Desktop it is recomended to place the labels to the left
ngrahamUnsubmitted
Done

This is somewhat confusingly worded, since the title is "Labels on the left" but the text says "it is recomended to place the lables to the right".

ngraham: This is somewhat confusingly worded, since the title is "Labels on the left" but the text says…
ngrahamUnsubmitted
Done

"lables" -> "labels"

ngraham: "lables" -> "labels"
30​of the connected widgets.
31 31​
32.. container:: flex 32​.. container:: flex
33 33​
34 .. container:: 34​ .. container::
35 35​
36 .. figure:: /img/Form_Align_KDE3.qml.png 36​ .. figure:: /img/Form_Align_KDE3.qml.png
37 :scale: 80% 37​ :scale: 80%
38 38​
39 :iconred:`BAD` |br| 39​ :iconred:`BAD` |br|
40 KDE3 form alignment 40​ KDE3 form alignment
41 41​
42 .. container:: 42​ .. container::
43 43​
44 .. figure:: /img/Form_Align_KDE5.qml.png 44​ .. figure:: /img/Form_Align_KDE5.qml.png
45 :scale: 80% 45​ :scale: 80%
46 46​
47 :noblefir:`GOOD` |br| 47​ :noblefir:`GOOD` |br|
48 Plasma 5 form alignment 48​ Plasma 5 form alignment
49 49​
50​- The labels that are to the left of their connected widgets should be right-aligned.
ngrahamUnsubmitted
Done

How about this?

"The labels that are to the left of their connected widgets should be right-aligned. This makes the whole group of form widgets appear to be center-aligned."

ngraham: How about this? "The labels that are to the left of their connected widgets should be right…
51​ This makes the whole group of form widgets appear to be center-aligned.
52​ In Qt5, using a QFormLayout handles this correctly for you.
53​
50Controls 54​Controls
51~~~~~~~~ 55​~~~~~~~~
52 56​
53- Align groups of items vertically rather than horizontally, as this 57​- Align groups of items vertically rather than horizontally, as this
54 makes them easier to scan visually. Use horizontal or rectangular 58​ makes them easier to scan visually. Use horizontal or rectangular
55 alignments only if they greatly improve the layout of the window. 59​ alignments only if they greatly improve the layout of the window.
56- Align a group of widgets to the left. This makes use of space more 60​- Align a group of widgets to the left. This makes use of space more
57 efficiently. 61​ efficiently.
Show All 35 Lines96 .. container::
93 97​
94 .. figure:: /img/Form_Align_YES.qml.png 98​ .. figure:: /img/Form_Align_YES.qml.png
95 :scale: 80% 99​ :scale: 80%
96 100​
97 :noblefir:`GOOD` |br| 101​ :noblefir:`GOOD` |br|
98 left aligned controls 102​ left aligned controls
99 103​
100- Keep track on label size; avoid big differences in text length (even 104​- Keep track on label size; avoid big differences in text length (even
101 after translation), that could result in much white space for 105​ after translation), that could result in much whitespace for
102 multiple aligned controls. 106​ multiple aligned controls.
103 107​
104 .. figure:: /img/Form_Align_Long.qml.png 108​ .. figure:: /img/Form_Align_Long.qml.png
105 :scale: 80% 109​ :scale: 80%
106 110​
107 :iconred:`BAD` |br| 111​ :iconred:`BAD` |br|
108 Avoid very long captions 112​ Avoid very long captions
109 113​
110- In some cases it may be useful to visually separate groups of related 114​Labels on top
111 options within one group box to facilitate scanning of the dialog. In 115​~~~~~~~~~~~~~
ngrahamUnsubmitted
Not Done

Same: we're overloading the word "label", which is confusing.

ngraham: Same: we're overloading the word "label", which is confusing.
ngrahamUnsubmitted
Done

"on the top" -> "on top"

ngraham: "on the top" -> "on top"
112 that case, put a vertical, fixed-size spacer of 16px height between ​
113 the options. ​
elvisangelaccioUnsubmitted
Done

Why are we removing this guideline?

elvisangelaccio: Why are we removing this guideline?
ngrahamUnsubmitted
Done

I think because we're trying to move towards separating groups of controls using whitespace and horizontal lines instead of group boxes.

ngraham: I think because we're trying to move towards separating groups of controls using whitespace and…
elvisangelaccioUnsubmitted
Done

But that's exactly what this sentence is suggesting: "use a 16px spacer to separate group of related options".

elvisangelaccio: But that's exactly what this sentence is suggesting: "use a 16px spacer to separate group of…
ngrahamUnsubmitted
Done

The guideline--sans group box recommendation--was moved to a different part of the document, onto line 106.

ngraham: The guideline--sans group box recommendation--was moved to a different part of the document…
fabianrAuthorUnsubmitted
Not Done

As Nate said, the guidelines is not removed, but it is moved to a more appropriate page. Since this page is only about alignment, I moved it to "Metrics, placement & keylines" which has a lot of rules about spacing and paddings.

fabianr: As Nate said, the guidelines is not removed, but it is moved to a more appropriate page. Since…
114 116​
115.. figure:: /img/Form_Align_Space.qml.png 117​For |mobileicon| mobile, or if only narrow space is available, it is
116 :alt: Separating groups of related options with a vertical spacer. 118​recomended to place the labels above the connected widgets.
119​
120​.. image:: /img/Form_Align_YES_Mobile.qml.png
121​ :scale: 80%
117 122​
elvisangelaccioUnsubmitted
Not Done

I'd also add: "or if a label is quite long and cannot be reduced".

Sometimes a form layout would just look bad, even if there is plenty of space. For example see F5835555.

elvisangelaccio: I'd also add: "or if a label is quite long and cannot be reduced". Sometimes a form layout…
ngrahamUnsubmitted
Not Done

I worry that such a guideline could result in undesirable visual inconsistency on single page, with some using a label on the left, and others having a label on top. We're trying in general to move away from labels that are trying to be paragraphs. :)

ngraham: I worry that such a guideline could result in undesirable visual inconsistency on single page…
elvisangelaccioUnsubmitted
Not Done

I'm not saying we should also add a screenshot. This is the place where we add "exceptions", right? Given that sometimes you cannot reduce the length of the label (see again the screenshot above), I think it's important we clarify what we should do in such cases.

elvisangelaccio: I'm not saying we should also add a screenshot. This is the place where we add "exceptions"…
ngrahamUnsubmitted
Not Done

IMHO, it's almost always possible to reduce the length of the label. If it's not because the concept is rather complicated, then it would be better to express the information in another way, such as with a short label for the control itself, and an extended explanation label beneath it. Gwenview's Advanced Settings page does this, as an example.

ngraham: IMHO, it's almost always possible to reduce the length of the label. If it's not because the…
fabianrAuthorUnsubmitted
Not Done

The HIG pages for check boxes https://hig.kde.org/components/checkbox.html has a rule, that could extend to cover these cases:
"Do not add line breaks. If necessary place an additional label below the check box."

fabianr: The HIG pages for check boxes https://hig.kde.org/components/checkbox.html has a rule, that…
118 Separating groups of related options with a vertical spacer. 123​- Labels and widgets align left
124​- Minimize label length. Avoid multi-line labels.
ngrahamUnsubmitted
Done

"multi line" -> "multi-line"

ngraham: "multi line" -> "multi-line"
ngrahamUnsubmitted
Done

"Keep track on label length" -> "Minimize label length"

ngraham: "Keep track on label length" -> "Minimize label length"
119 125​
120Check boxes and Radio buttons 126​Check boxes and Radio buttons
121~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 127​~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
122 128​
123For more details on alignment of :doc:`radio buttons </components/radio>` and :doc:`checkboxes </components/checkbox>` see the detailed HIG pages. 129​For more details on alignment of
130​:doc:`radio buttons </components/radiobutton>` and
131​:doc:`checkboxes </components/checkbox>`, see the detailed HIG pages.
ngrahamUnsubmitted
Done

"checkbox> see" -> "checkbox>, see"

ngraham: "checkbox>` see" -> "checkbox>`, see"