[kde-guidelines] Styleguide: Check boxes

[Aurélien Gâteau]

Le Thursday 30 May 2013 13:03:08 Thomas Pfeiffer a écrit :
[snip]
> 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.
(Second [4] here :) can you post the link for the first one?)
[snip]

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

I agree with you. The way you describe how Apple avoid odd layouts could be 
good additions to the HIG. Something along the lines of:

-----------------------------

In general keep the label of the check box to the right of the tick box. When 
using check boxes in a two-column, "$label: $widget" layout, you can do the 
following to keep the layout balanced:

Group check boxes together in the widget column and add a label describing the 
group in the label column:

<pre>
Appearance: [ ] Wrap text

            [x] Show tooltips

      Text: [_________]

     Color: (____)
</pre>

- or -

Make the check boxes span the two columns, but keep them at the bottom of the 
layout:

<pre>
   Text: [_________]

  Color: (____)

  [ ] Wrap text

  [x] Show tooltips
</pre>

-----------------------------

Does it make sense?

Aurélien