Label left or right align

3 Mar 2004 - 5:16am
10 years ago
11 replies
5019 reads
Narey, Kevin
2004

Basic stuff I know but...

Putting political persuasion aside, does anyone have an opinion on aligning
form field labels left or right to the form field.

I generally prefer to right align so that they remain in close proximity to
the device they are describing. Left aligning (which does have it's pro's in
defining a bounding area) can cause issues with marrying the label to the
device unless using a background colour to suggest the relationship.

Kind regards

KN

**********************************************************************
gedas united kingdom limited
Registered in England no. 1371338

This email and any files transmitted with it are confidential
and it may be privileged.

It is intended solely for the use of the individual or entity to
whom it is addressed.

If you have received this in error, please contact the sender
and delete the material immediately.
**********************************************************************

Comments

3 Mar 2004 - 3:05pm
vutpakdi
2003

--- "Narey, Kevin" <Kevin.Narey at Gedas.co.uk> wrote:
> Putting political persuasion aside, does anyone have an opinion on
> aligning
> form field labels left or right to the form field.

General practice in most applications appears to be left align the labels,
but there are plenty that right align. Besides the defining the bounding
area, left aligned labels tend to be easier/faster for the user to scan.

As you mentioned, left alignment can cause issues with a disconnect between
the label and the target, particularly when the labels vary in length.
Some of that can be ameliorated by choosing labels carefully and breaking
labels into two lines if necessary.

All that said, Jeff Johnson in _GUI Bloopers_ says that it doesn't really
matter as long as you pick a convention, preferably the dominant practice
for the platform, and use it consistently.

I personally prefer left alignment and use it almost exclusively.

Ron

PS: Of course, the above is for left to right languages. For right to
left languages, everything would be reversed. :-)

=====
============================================================================
Ron Vutpakdi
vutpakdi at acm.org

__________________________________
Do you Yahoo!?
Yahoo! Search - Find what you’re looking for faster
http://search.yahoo.com

3 Mar 2004 - 3:16pm
Coryndon Luxmoore
2004

Just to throw one more option in ;) I like right aligned above the field. The only real problem with this is vertical space which can be a problem with a non scrolling screen. Labels to the left or right always looked a bit wierd to me. I usually just end up in illustrator hitting the left and right align key until i figure out what looks the least wierd. --Coryndon

-------Original Message-------
> From: Narey, Kevin <Kevin.Narey at Gedas.co.uk>
> Subject: [ID Discuss] Label left or right align
> Sent: 03 Mar 2004 10:16:39
>
> Basic stuff I know but...
>
> Putting political persuasion aside, does anyone have an opinion on aligning
> form field labels left or right to the form field.
>
> I generally prefer to right align so that they remain in close proximity to
> the device they are describing. Left aligning (which does have it's pro's in
> defining a bounding area) can cause issues with marrying the label to the
> device unless using a background colour to suggest the relationship.
>
> Kind regards
>
> KN
>
>
> **********************************************************************
> gedas united kingdom limited
> Registered in England no. 1371338
>
> This email and any files transmitted with it are confidential
> and it may be privileged.
>
> It is intended solely for the use of the individual or entity to
> whom it is addressed.
>
> If you have received this in error, please contact the sender
> and delete the material immediately.
> **********************************************************************
>
> _______________________________________________
> Interaction Design Discussion List
> discuss at interactiondesigners.com
> --
> to change your options (unsubscribe or set digest): http://discuss.interactiondesigners.com
> --
> Questions: lists at interactiondesigners.com
> --
> Announcement Online List (discussion list members get announcements already)
> http://interactiondesigners.com/announceList/
> --
> http://interactiondesigners.com/
-------Original Message-------

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.interactiondesigners.com/private.cgi/discuss-interactiondesigners.com/attachments/20040303/1949f9ae/attachment.html

3 Mar 2004 - 3:23pm
John Vaughan - ...
2004

My pref is left align with spatial, border or background "boundary box".
Radically different lengths of label or formfields can influence that
decision.

Sometimes use a "watermark" guideline (s.a. light grey underline on white
bgd) to help maintain the relationship between row-items that are separated
by a lot of whitespace.

JV

----- Original Message -----
From: "Narey, Kevin" <Kevin.Narey at Gedas.co.uk>
To: <discuss-interactiondesigners.com at lists.interactiondesigners.com>
Sent: Wednesday, March 03, 2004 5:16 AM
Subject: [ID Discuss] Label left or right align

> Basic stuff I know but...
>
> Putting political persuasion aside, does anyone have an opinion on
aligning
> form field labels left or right to the form field.
>
> I generally prefer to right align so that they remain in close proximity
to
> the device they are describing. Left aligning (which does have it's pro's
in
> defining a bounding area) can cause issues with marrying the label to the
> device unless using a background colour to suggest the relationship.
>
> Kind regards
>
> KN
>
>
> **********************************************************************
> gedas united kingdom limited
> Registered in England no. 1371338
>
> This email and any files transmitted with it are confidential
> and it may be privileged.
>
> It is intended solely for the use of the individual or entity to
> whom it is addressed.
>
> If you have received this in error, please contact the sender
> and delete the material immediately.
> **********************************************************************
>
> _______________________________________________
> Interaction Design Discussion List
> discuss at interactiondesigners.com
> --
> to change your options (unsubscribe or set digest):
http://discuss.interactiondesigners.com
> --
> Questions: lists at interactiondesigners.com
> --
> Announcement Online List (discussion list members get announcements
already)
> http://interactiondesigners.com/announceList/
> --
> http://interactiondesigners.com/

3 Mar 2004 - 4:54pm
Ian Roberts
2004

Right align the labels and left align the input fields. This forms a
solid visual element down the middle and makes it easier to scan the
form. Sometimes if I have a little block of text I need to describe
something, I'll put it under the label in an indented left-aligned block
since that is read and not scanned.

See Mullet and Sano's "Designing Visual Interfaces" for a great
description of basic design properties that we all could use a refresher
on from time to time.
~ian

Ian Roberts <Interaction Designer> Rich Interaction Environments,
Pacific Northwest National Laboratory

-----Original Message-----
Putting political persuasion aside, does anyone have an opinion on
aligning form field labels left or right to the form field.

Kind regards

KN

3 Mar 2004 - 5:14pm
Ian Roberts
2004

Right align the labels and left align the input fields. This forms a
solid visual element down the middle and makes it easier to scan the
form. Sometimes if I have a little block of text I need to describe
something, I'll put it under the label in an indented left-aligned block
since that is read and not scanned.

See Mullet and Sano's "Designing Visual Interfaces" for a great
description of basic design properties that we all could use a refresher
on from time to time.
~ian

Ian Roberts <Interaction Designer> Rich Interaction Environments,
Pacific Northwest National Laboratory

-----Original Message-----
Putting political persuasion aside, does anyone have an opinion on
aligning form field labels left or right to the form field.

Kind regards

KN

3 Mar 2004 - 5:22pm
Dave Malouf
2005

My understanding of this topic relates to proximity and clarity of
understanding that X label is relevant for X field.

I do 3 different things depending on the style of my application.

Left align all labels in the same row with data fields that are also all
left aligned to each other. What I like to do here though is use color,
shading, or lines so that it is clear that row is defined and that the
objects in the row are related. This is useful when I have field labels that
wrap b/c right alignments w/ wrapping gets a bit yucky.

Right align labels and left align data fields. I do this when I don't want
such a cluttered screen and want to just use the juxtaposition as the basis
of the relations.

Layer the lables to the top of the fields.

I do this if I have a lot of text areas, if the horizontal space is valuable
or if I'm trying to create more of a paper form feel. I don't know why; I
just think it mirrors better.

Anyway, those are my thoughts on this. Good luck!

-- dave

3 Mar 2004 - 5:25pm
Mark
2003

At the risk of displaying political persuasion, I don't know that a
"solid visual element down the middle" makes it any more scanable. Users
don't need to know where the description stops and the field starts as
much as they need to read the label. If they were reading right-to-left,
it would be a clear answer. Otherwise, unless the variance in field
names is so great that the shortest labels loose visual connection to
their fields, it takes less time to scan if the starting point to read a
label is consistient (left aligned).

I am not familiar with Mullet and Sano's work. I would be interested in
hearing their explanation on why right-justified is easier to scan (just
saying it is isn't convincing me).

</MWK>

Roberts, Ian E wrote:

>
>Right align the labels and left align the input fields. This forms a
>solid visual element down the middle and makes it easier to scan the
>form. Sometimes if I have a little block of text I need to describe
>something, I'll put it under the label in an indented left-aligned block
>since that is read and not scanned.
>
>See Mullet and Sano's "Designing Visual Interfaces" for a great
>description of basic design properties that we all could use a refresher
>on from time to time.
>~ian
>
>Ian Roberts <Interaction Designer> Rich Interaction Environments,
>Pacific Northwest National Laboratory
>
>-----Original Message-----
>Putting political persuasion aside, does anyone have an opinion on
>aligning form field labels left or right to the form field.
>
>Kind regards
>
>KN
>_______________________________________________
>Interaction Design Discussion List
>discuss at interactiondesigners.com
>--
>to change your options (unsubscribe or set digest): http://discuss.interactiondesigners.com
>--
>Questions: lists at interactiondesigners.com
>--
>Announcement Online List (discussion list members get announcements already)
>http://interactiondesigners.com/announceList/
>--
>http://interactiondesigners.com/
>
>
>
>

3 Mar 2004 - 5:32pm
Elizabeth Buie
2004

When the Human Factors and Ergonomics Society's HCI Standards Committee
(of which I am a member) was working on this issue, we agreed that it
depended on the task. If the user is likely to be scanning down looking
for a specific field, left alignment can be helpful because it's easier to
find the fields. If the user is likely to be familiar with the form and
entering data field by field, right alignment is helpful because it's
easier to recognize which label goes with the field of interest.

Both ISO 9241-12 and HFES-200 say that labels should be right aligned if
they are of widely varying lengths and that they may be left aligned if
they are of similar length. Note the "should" and the "may".

Personally, I almost always right align labels, next to their fields.
(When the label is beside the field, that is. Above -- which I do
sometimes -- is a different story. :-)

Elizabeth
--
Elizabeth Buie
Computer Sciences Corporation
Rockville, Maryland
301.921.3326

----------------------------------------------------------------------------------------
This is a PRIVATE message. If you are not the intended recipient, please
delete without copying and kindly advise us by e-mail of the mistake in
delivery. NOTE: Regardless of content, this e-mail shall not operate to
bind CSC to any order or other contract unless pursuant to explicit
written agreement or government initiative expressly permitting the use of
e-mail for such purpose.
----------------------------------------------------------------------------------------

3 Mar 2004 - 5:47pm
Mark
2003

That's one of the most consice yet complete explanations I have ever
read on the subject.

Well put! :-)

Perhaps to answer the question that started this thread it would be
beneficial to understand the nature of the form in question. Will the
form be used many times a day by the same user? Or , is it an entry /
application type form that will typically only be used once by each user?

The answer is always "it depends," isn't it? :-P

</MWK>

Elizabeth Buie wrote:

>When the Human Factors and Ergonomics Society's HCI Standards Committee
>(of which I am a member) was working on this issue, we agreed that it
>depended on the task. If the user is likely to be scanning down looking
>for a specific field, left alignment can be helpful because it's easier to
>find the fields. If the user is likely to be familiar with the form and
>entering data field by field, right alignment is helpful because it's
>easier to recognize which label goes with the field of interest.
>
>Both ISO 9241-12 and HFES-200 say that labels should be right aligned if
>they are of widely varying lengths and that they may be left aligned if
>they are of similar length. Note the "should" and the "may".
>
>Personally, I almost always right align labels, next to their fields.
>(When the label is beside the field, that is. Above -- which I do
>sometimes -- is a different story. :-)
>
>Elizabeth
>--
>Elizabeth Buie
>Computer Sciences Corporation
>Rockville, Maryland
>301.921.3326
>
>
>----------------------------------------------------------------------------------------
>This is a PRIVATE message. If you are not the intended recipient, please
>delete without copying and kindly advise us by e-mail of the mistake in
>delivery. NOTE: Regardless of content, this e-mail shall not operate to
>bind CSC to any order or other contract unless pursuant to explicit
>written agreement or government initiative expressly permitting the use of
>e-mail for such purpose.
>----------------------------------------------------------------------------------------
>
>_______________________________________________
>Interaction Design Discussion List
>discuss at interactiondesigners.com
>--
>to change your options (unsubscribe or set digest): http://discuss.interactiondesigners.com
>--
>Questions: lists at interactiondesigners.com
>--
>Announcement Online List (discussion list members get announcements already)
>http://interactiondesigners.com/announceList/
>--
>http://interactiondesigners.com/
>
>
>
>

3 Mar 2004 - 9:07pm
id at ourbrisba...
2004

Quoting "Narey, Kevin" <Kevin.Narey at Gedas.co.uk>:
> Putting political persuasion aside, does anyone have an opinion on aligning
> form field labels left or right to the form field.

Some observations from usability and accessibility testing...

Yes, as with everything else in this industry "it depends". It depends on the
application, the context, and the target audiences. I'm not sure if the third
option mentioned earlier was thought of in the context of people with cognitive
and visual disabilities - especially the relatively common problems of dyslexia
and myopia - when the ISO 9241 standard was created.

If there are long labels in the design, left aligned labels are often hard to
match to fields for most people, let alone those using lower screen resolutions,
or using screen magnifiers. Two solutions would be to either: use alternating
background colours, or just right-align the labels to left-aligned fields,
right? Well, the first is problematic for people with screen magnifiers or
general cognitive disabilities, as it still makes them work to find the fields
associated with the labels (running their finger along the line or making sure
the movement of the magnifier is steady as it makes a potentially long journey).
The second solution creates a problem for people with dyslexia, as
right-aligned (jagged left) text can be hard for them to scan or even read
sequentially.

In my experience the best format to cater for such accessibility requirements
when designing online forms (of more than a few fields) is left aligned, above
the field (positioned using CSS to ensure linearity). When implemented
correctly, this provides context by proximity, resulting in lower cognitive
loads for people of all abilities. It also removes the need for layout tables.
Sure, it may mean more vertical space is used, but that's just a design
constraint - something that we as designers are paid to find innovative
solutions for... ;)

As an adjunct, the use of the fieldset and legend tags to logically group fields
is extremely useful (yet rarely implemented) for designing more usable,
accessible forms.

Best regards,

Ash Donaldson
User Experience Designer

4 Mar 2004 - 2:25am
Nathan Moody
2004

Perhaps obvious, if so, apologies: right label alignment can be a huge
boon for internationalization without having to do much visual redesign
or layout, so that super-long translations can just be flowed in. In
the RIA projects we work on, we don't have huge, robust layout managers
for all our projects, so it's developed into a standard operating
procedure with us (rules broken when needed of course).

Best,
-Nathan

Syndicate content Get the feed