Label Alignment in KDE4

[Celeste Lyn Paul]

On Friday 18 July 2008 05:20:12 Aaron J. Seigo wrote:
> On Friday 18 July 2008, David Jarvie wrote:
> > This is the problem I have in KAlarm. Most of the dialogs don't seem
> > suitable for the right-aligned label treatment, since there are a lot of
> > check boxes and radio buttons with only some label/widget pairs
> > interspersed. Are there any alignment guidelines for this case?
>
> iirc, checkboxes are supposed to end up like:
>
> Lineedit Label  [                                           ]
>    Check Label  [  ]
>
> radio buttons are tricker, with the category on the left and the specific
> options on the right
>
> this is from memory at 03:05 (yes, am) though, so i could be wrong ;)

Checkboxes and radio buttons are tricky.  There are a whole host of scenarios 
designing for them, and sometimes they arent consistent.  Maybe some of these 
examples can help.

This scenario is where the radio buttons (or check boxes) which are line up on 
the center line.:

Day of the week: [ Select Day of Week | V ]
      Time of day: ( ) Morning
                         ( ) Afternoon
                         ( ) Evening

You can also have a radio button or checkbox as the parent option, with the 
group of centered element beneath it (very common in KDE dialogs).  (This 
Enable even option is actual an exception I will discuss later):

[ ] Enable event
    Day of the week: [ Select Day of Week | V ]
          Time of day: ( ) Morning
                             ( ) Afternoon
                             ( ) Evening

^ The above also works for radio selections which enable options below them.

Now the inconsistent part is when you have a list of items you are configuring 
where there is a single checkbox.  Usually this is to turn on/off an option 
and a "yes" option is implied.

So.. here is our ambiguous example:

           OS title: [ Kubuntu Linux OS                   | V ]
             Kernel: [ /boot/vmlinuz-2.6.24-19-generic... ] [ Browse... ]
                Lock: [ ]
Save as default: [ ]

~ or ~

           OS title: [ Kubuntu Linux OS                   | V ]
             Kernel: [ /boot/vmlinuz-2.6.24-19-generic... ] [ Browse... ]
                        [ ] Lock
                        [ ] Save as default

The first example is the most correct. Why? : 

1) In the second example, Lock and Save as default look like they belong to 
the Kernel option when they are options on the same hierarchical level as 
Kernel

2) In the second example, the alternative layout It breaks the visual and 
logical flow of form options.  Although users tend to read form labels 
instead of scan, we've now put an obstacle between the line they were reading 
and the label and they must interpret that those options are on the same 
level as the OS title and Kernel options

3) I think the first option looks better, but it's not really always about 
looks

Remember that a checkbox is equivalent to a yes/no radio button group:

Save automatically: [ ]
~~
Save automatically: ( ) Yes
                             ( ) No

With this helper rule in mind, I hope it will help remember laying out single 
checkbox items.  There are what you can call exceptions to this rule 
for "parent" options (such as enabling a group of elements).  Using our above 
example:

               OS title: [ Kubuntu Linux OS                  | V ]
                Kernel: [ /boot/vmlinuz-2.6.24-19-generic... ] [ Browse... ]
Advanced options: [ ] Lock
                           [ ] Save as default

^ This could happen and be valid, but if you look at the first example, that 
is just a better design for this particular configuration activity.

Now here is another example which may occur.  These check box items refer 
directly to the Kernel option.  So the "hierarchy" problem we had in the 
first bad example is actual the solution here because we *want* the options 
to "belong" to the Kernel:

               OS title: [ Kubuntu Linux OS                  | V ]
                Kernel: [ /boot/vmlinuz-2.6.24-19-generic... ] [ Browse... ]                      
                           [ ] Kernel option 1
                           [ ] Kernel option 2

Now, to group everything on a single center line or to have 
separate "centered" line groups.  Just as we group similar items together in 
separate group boxes, we will center similar items together on separate 
centered lines:

In a large or complex form, you could possible have this, two group boxes 
centered on two different lines:

Group1 ---
| Day of the week: [ Select Day of Week | V ]
        Time of day: ( ) Morning
                           ( ) Afternoon
                           ( ) Evening

Group2 --
|     First name: [                       ]
      Last name: [                       ]
 Email address: [                       ]

As for the Kate question earlier, from what I can see most of the options are 
checkboxes, and so having a list of checkboxes is perfectly fine.  The one 
set of options you might have been concerned with:

[ ] Keep meta-information past sessions
Delete unused meta-information after: [ 10 day(s) | V ]

According to the guidelines I just explained, the first checkbox item should 
have the checkbox on the right, because it is an option within a group of 
options, and not a parent option: 

Keep meta-information past sessions: [ ]
 Delete unused meta-information ater: [ 10 day(s) | V ]

(BTW, what does "Keep meta-information past sessions mean?  Should it be "Keep 
past (as in tense) session meta-information" or "Keep meta-information at the 
end of sessions"?)

Hope this helps and please, questions.  This is the first time I've written 
all of this down, and so there might be typos or logic errors which negate 
it's sense-making.

~ Celeste

-- 
Celeste Lyn Paul
celeste at kde.org
KDE Usability Project
usability.kde.org