[kde-guidelines] Styleguide: Check boxes

[Thomas Pfeiffer]

On Thursday 30 May 2013 11:31:14 Aurélien Gâteau wrote:
> Looks good!
> 
> On the topic of check boxes: it would be nice to add some recommendations on
> the topic of label alignments. Some applications have moved the tick square
> to the right of the label, to keep all labels aligned on the left, as can
> be seen in the attached screenshot.
> 
> I have the feeling such arrangement makes sense in "table-like" layouts like
> the list of widget properties in Designer, but looks odd and surprising in
> regular dialogs. What do you think?

Very interesting question! And one for which there is no clear answer.
As always in these cases, I looked what others do and this is what I found:

The Apple HIG for Checkboxes[1] does not mention label alignment explicitly. 
Looking at screenshots of dialogs containing checkboxes in other places of the 
HIGs shows that most of them keep the label on the right, even if there are 
left-aligned elements in the same dialog. a trick they often employ is putting 
a label to the left of a group of checkboxes but still keeping the acutal 
checkbox labels on the right[2]. That way it looks less weird. If that fails, 
though, they usually still keep the label on the right[3], but try to put 
checkboxes at the end of the form.
I found only one exception to this in the example for the popover[4], which 
however has a mix of checkbox labels on the left and on the right. So it seems 
even Apple is not 100% consistent in their design.

The GNOME HIGs do not mention label alignment explicitly in their Checkbox 
guidelines, either[4]. However example screenshots in other guidelines[5] show 
that they always keep checkbox labels on the right, even near other controls 
with labels on the left.

The same goes for Microsoft checkbox guideline[6] and example screenshots [7].

So we can say that the "industry standard" seems to be to keep the labels for 
checkboxes (and radio buttons) on the right, no matter what.
And personally, I'd agree with that. Even though the visual appearance suffers 
form time to time, I'd give the semantic consistency preference over the 
layout. There are ways to mitigate the visual problem a little by trying to 
put the checkboxes together instead of mixing them with other elements or by 
putting a label for several checkboxes on the left.

That's just my position (and obviously that of the people who have written the 
HIGs for Apple, GNOME and MS) and the arguments for consistent alignment 
within a dialog are valid as well.

Cheers,
Thomas

[1]
http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Controls/Controls.html#//apple_ref/doc/uid/TP30000359-TP6
[2] 
http://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines/art/ct_combinationbox.jpg
http://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines/art/ct_radiobuttonex2.jpg
[3] 
http://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines/art/ct_helpbuttonexample.jpg
[4] https://developer.gnome.org/hig-book/stable/controls-check-boxes.html.en
[5] 
https://developer.gnome.org/hig-book/stable/images/windows-dialog-tabbed.png.en
https://developer.gnome.org/hig-book/stable/images/windows-preferences.png.en
[6] http://msdn.microsoft.com/en-us/library/windows/desktop/aa511452.aspx
[7] 
http://i.msdn.microsoft.com/dynimg/IC37689.png
http://i.msdn.microsoft.com/dynimg/IC306385.png