Print

Print


Thanks Margaret Shore, Ash Donaldson, Elizabeth Buie and Ethan McKinney for replying my question.  

Here is the summary:
There are three other options:
Option 4: Right-align the labels (Ethan)
Option 5: Left-align the label.  When the label becomes too long because of translation, wrap the label to the second line (Ash)

I also noticed the "wrapping" approach in the web site below where I got my travel itinerary:
https://www.virtuallythere.com/new/reservations.html

Try selecting different languages and look at the sample itinerary.

Option 6: Place the label at the top of the field but move the labels slightly to the left. (It is in one of our products and users like it)

Example -
Last Name:
   lastName field

First Name:
   firstName field

Elizabeth mentioned that 2.2 was recommended by ISO 9241-12.  ISO 9241-12 also mentioned Option 3 (labels on top).

Thanks!

- Cindy
================
Original Question:
How to place and align the labels so that not only it supports the user tasks but also makes it easier for internationalization.

Option 1: Left aligned with more space between the label and the fields.
For example:
First Name:             Text Field
Last Name:              Text Field
Address:                Text Field

Option 2: 
2.1 Left aligned with fixed spacing between the label and the fields. Vary the right margin.
2.2 Left alighted with fixed spacing between the label and the fields. Vary both the left margin (on the label side) and the right margin (on the field side)

Option 3: Place the label at the top.

====================Original Replies======================
From: Margaret Shore

Cindy -- as a previous person replied, I would suggest either over/under
alignment OR aligning the ":" on the label close to the text fields.

---------
Reply to Margaret from Cindy:

1) Above the fields.  
Unfortunately, the product team does not like this option.  I remember some
time ago, when the manager of Internationalization team insisted on this
layout, she was threatened to lose her job.

2) Align the labels close to the fields.
That's an option but I have not seen a windows application has this layout.
All the literatures suggest left alignment for ease of reading and scanning.

----------
From: Margaret Shore
If you want, I can send you some screen prints.  I have seen a number of
desktop applications which use this, even a Java one!

The point about readability is well made, but if you place your labels that
far away from the data, you have lost any advantages the basic left
alignment gives you.  Many of our screens use a combination of alignments --
whatever works for the data and design at hand.

----------
From: Ash Donaldson

HFI has a good paper on crypto ref: 
http://www.humanfactors.com/downloads/layout.pdf.

Basically, it recommends to use the GUI justification principles (left-
aligned, logically grouped).

==========
From: Ash Donaldson

Localisation is an interesting issue.  It doesn't stop with 
translating words or spelling (BTW, I'm in Australia, thus the 's' 
instead of the 'z' in 'localisation').

The recommendations made in the article pertain to English speaking 
cultures - more specifically, American.  If you are wishing to 
localise for non-English speaking areas, text-flow, reading direction 
and natural eye-tracking often vary widely and should also be taken 
into account.  Even population stereotypes differ greatly between 
countries that speak the same language.

My advice in this respect would be to test locally with each area 
being targeted.  I know - budget is rarely set aside for such things, 
but a strong case can be made for anyone wishing to internationalise, 
that local resources will be required for support, and local resources 
should be consulted for design.

All that aside, in generic, English speaking, left-right, top-bottom 
reading localities, left alignment for both labels and input boxes 
should be used in GUIs.  The left margin should be the constant.

==========
From: Ash Donaldson

Have a look at the label sizes, generate an average character length, 
and stick to it.  In this way, the margins will be fixed - the labels 
aligned left, and the input boxes aligned left.  Any extensively long 
labels will flow over two lines as demonstrated in the attached image, 
form.gif.  This is OK as long as there is sufficient vertical spacing 
between each field.

Another alternative is to do what I do for online forms (although it's 
opposed to the standard for GUI applications).  Since I try and create 
inclusive designs (incorporating accessibility for transgenerational 
users and disabled users), I place my labels in close proximity (for 
people with screen magnifiers), above the input field (utilising the 
LABEL tag for people with screen readers) as demonstrated in the 
attached image ol_form.gif
============
From: Elizabeth Buie  

Option 2.2 is what is recommended by ISO 9241-12, Presentation of
Information -- or at least, that's how it was in the draft version I have
from when the HFES-HCI standards committee was reviewing and commenting on
it.

Option 1 may be used when the labels are of more or less the same length.
It is not an issue of visual appeal but of human factors -- being able to
recognize which field is associated with which label.  For this, the
labels have to be reasonably close to the fields.

Option 3 is also mentioned in 9241.  Why does your product team reject it?
============
From: Ethan McKinney

Option 4: right-align the labels. This creates a surprisingly strong
visual alignment along the "seam between the labels and the text boxes.
It makes it obvious which label belongs to which text box (even when you
have to or three columns of label:text box pairs). It produces
consistent spacing between the labels and their associated text boxes.
Finally, there's no problem with the length of the labels changing with
different languages.

I had trouble following your English, so this may be the same as your
option 2.2. If so, I disagree with the aesthetic judgment that it
"doesn't look good."  :)  You may be trying to push the labels (and
everything else) too close to the left edge of the screen. Center the
_seam_ on a line about 1/3 of the screen width from the left edge of the
screen.

-------
Reply to Ethan McKinney by Cindy

Sorry that 2.2 description is not clear.

In 2.2, the group box is fixed in size, the text labels are aligned to the left and the space between the label and the left size of the control fields are fixed.  For different language, the left and right margins are changed.

For example:

|   Last Name:  Doe     |
|   First Name: John    |

In another language:
| Knddndndnd fddd: Doe  |
| Mdfdjdjf ghgf:   John |
==================End of Original Replies=======================

    --------------------------------------------------------------
           Tip of the Day: Postings must be in plain text
     CHI-WEB: www.sigchi.org/web POSTINGS: mailto:[log in to unmask]
              MODERATORS: mailto:[log in to unmask]
       SUBSCRIPTION CHANGES & FAQ:  www.sigchi.org/web/faq.html
    --------------------------------------------------------------