Re: [Usability] label alignments

[Liam Quin <liam holoweb net>]

Speaking as a typographer... :) some general principles
for information design apply:

(1) keep related things close together where possible, and always
    closer than unrelated things

    example: a section heding should be closer to the text that follows it
    than the the last paragraph of the previous section.  Many books and
    online browsers get this wrong, and if you can adjust it (hard for
    a printed book!) you will see what I mean.

(2) align things wherever it makes sense to do so

    the human eye is *very* good at detecting misalignment; an error of
    under 0.1m can easily be spotted, at least subconsciously.

(3) use consistent treatment of similar elements

    this is pretty clear -- if text entry boxes all work the same, and
    all have te standard Unix keybindings, ^U to delete to start ,^W to
    erase word tec., the system as a whole becomes easier to learn.
    This is sometimes called avoiding surprises; I expect Alan Cooper
    gave it a name like "the principle of least astonishment", although
    that term predates Alan's use of it.

So, back to dialogue boxes then:

To take an extreme to start with,
[A]

   Height of Box:                          12
   Weight:                                  7
   Sock Count:                             22
   Age:                                    14

is just asking for trouble, compared with:
[B]

   Height of Box: 12
          Weight:  7
      Sock Count: 22
             Age: 14

In the first example you probably read down the list on the left first
and then the list of values.  But to determine wither Sock Count was
7 or 22, you may have ended up counting down form the top of the
right-hand row.  So you can see how this separation causes errors.

In the model where one normally has to read each label
in turn and relate it to its value, the value needs to be close to
the label.  Some acceptable alternatives:

[C] values on the left, right-aligned:

[  12]: Height of Box
[   7]: Weight
[  22]: Sock Count
[  14]: Age

This works well with numeric data but only if the value-boxes are all
the same size, and not if you add other controls such as spin-boxes
or sliders.  It's also unusual enough to confuse pepole.

[D] ragged values

   Height of Box: 12
   Weight: 7
   Sock Count: 22
   Age: 14

This turns out to look very ugly when there are 3d contols everywhere.


If you want your program to look slick and professional, and to be
easy to use, you will almost always want the right-aligned labels.

And to be consistent, you should do this evreywhere, because the even
treatment contributes to the invisiblity of the typographic mechanisms
and allows the readre (the user) to concentrate on the information.

For what it's worth, the open look team did some studies on this, I
think, but they may have been based on experience with data entry systems.
Certainly they ended up rcomending right-aligned labels.

I lament that it's easire to make them left-adjusted than right-adjusted
in glade -- a tool to let you select a bunch of fields and have a table
inserted automatically to right-align them would improve the look of
a lot of gnome software immensely.

Liam


-- 
Liam Quin - XML Activity Lead, W3C, http://www.w3.org/People/Quin/
Ankh: irc.sorcery.net www.valinor.sorcery.net irc.gnome.org www.advogato.org
Author, Open Source XML Database Toolkit, Wiley August 2000
Co-author: The XML Specification Guide, Wiley 1999; Mastering XML, Sybex 2001