Label alignment left or right?

2 Apr 2007 - 4:12am
7 years ago
9 replies
1903 reads
sysscore
2007

Hallo,

I have a problem at the definition of the layout guideline of our software
company (software is a desktop application and not a web forms). In many
discussions it is said that the right alignment is a good alternative to
vertical positioning of labels. But in some cases left-alignment labels are
better structured (if I use multiple columns). It is said likewise that the
consistence in the complete application is very important.

My question: Can I use a mixture of both in the applictation layout?

And if not, what is the best standard

Thanx in advance

Comments

2 Apr 2007 - 6:19am
tristan blanc-brude
2006

Hi,

personnaly I think that left alignment can be ok as long as the right end of
labels
are not too distant from the left end of fields.
If you have labels that vary a lot in terms of length a solution is to break
the longer ones into two lines

cheers

Tristan

2007/4/2, sysscore <mail at sysscore.com>:
>
> Hallo,
>
>
>
> I have a problem at the definition of the layout guideline of our software
> company (software is a desktop application and not a web forms). In many
> discussions it is said that the right alignment is a good alternative to
> vertical positioning of labels. But in some cases left-alignment labels
> are
> better structured (if I use multiple columns). It is said likewise that
> the
> consistence in the complete application is very important.
>
>
>
> My question: Can I use a mixture of both in the applictation layout?
>
> And if not, what is the best standard
>
>
>
>
>
> Thanx in advance
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

2 Apr 2007 - 6:35am
jstrande
2007

Another option is to put the labels above the fields.

The advantage to this approach is that you have flexibility for longer text,
including if you need to internationalize the labels.

The downside is that it makes the form appear longer than it actually is and
some of the inputs could be pushed beneath the fold.

Jon

On 4/2/07, tristan blanc-brude <tristan.blancbrude at gmail.com> wrote:
>
> Hi,
>
> personnaly I think that left alignment can be ok as long as the right end
> of
> labels
> are not too distant from the left end of fields.
> If you have labels that vary a lot in terms of length a solution is to
> break
> the longer ones into two lines
>
> cheers
>
> Tristan
>
>
> 2007/4/2, sysscore <mail at sysscore.com>:
> >
> > Hallo,
> >
> >
> >
> > I have a problem at the definition of the layout guideline of our
> software
> > company (software is a desktop application and not a web forms). In many
> > discussions it is said that the right alignment is a good alternative to
> > vertical positioning of labels. But in some cases left-alignment labels
> > are
> > better structured (if I use multiple columns). It is said likewise that
> > the
> > consistence in the complete application is very important.
> >
> >
> >
> > My question: Can I use a mixture of both in the applictation layout?
> >
> > And if not, what is the best standard
> >
> >
> >
> >
> >
> > Thanx in advance
> >
> > ________________________________________________________________
> > Welcome to the Interaction Design Association (IxDA)!
> > To post to this list ....... discuss at ixda.org
> > List Guidelines ............ http://listguide.ixda.org/
> > List Help .................. http://listhelp.ixda.org/
> > (Un)Subscription Options ... http://subscription-options.ixda.org/
> > Announcements List ......... http://subscribe-announce.ixda.org/
> > Questions .................. lists at ixda.org
> > Home ....................... http://ixda.org/
> > Resource Library ........... http://resources.ixda.org
> >
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

2 Apr 2007 - 6:57am
Sandra
2006

Hello

The rule we try to adopt in my company is the following:

You should vertically align input fields and their labels; justification can
be done according to the context:

- If all labels are of similar length: left justify the fields and the
labels
- If labels are of various lengths, right justify them and left
justify the fields

Hope it helps

Sandra

2007/4/2, sysscore < mail at sysscore.com>:
>
> Hallo,
>
>
>
> I have a problem at the definition of the layout guideline of our software
>
> company (software is a desktop application and not a web forms). In many
> discussions it is said that the right alignment is a good alternative to
> vertical positioning of labels. But in some cases left-alignment labels
> are
> better structured (if I use multiple columns). It is said likewise that
> the
> consistence in the complete application is very important.
>
>
>
> My question: Can I use a mixture of both in the applictation layout?
>
> And if not, what is the best standard
>
>
>
>
>
> Thanx in advance
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

2 Apr 2007 - 7:24am
James Melzer
2004

http://www.lukew.com/resources/articles/web_forms.html
http://www.uxmatters.com/MT/archives/000107.php

It depends. The two articles above by Luke W give the pros and cons
for the various alignment options based on his research. But mixing
and matching? - I'm not so sure about that.

~ James

p.s. more : http://del.icio.us/jamesmelzer/forms

On 4/2/07, sysscore <mail at sysscore.com> wrote:
> Hallo,
>
>
>
> I have a problem at the definition of the layout guideline of our software
> company (software is a desktop application and not a web forms). In many
> discussions it is said that the right alignment is a good alternative to
> vertical positioning of labels. But in some cases left-alignment labels are
> better structured (if I use multiple columns). It is said likewise that the
> consistence in the complete application is very important.
>
>
>
> My question: Can I use a mixture of both in the applictation layout?
>
> And if not, what is the best standard
>
>
>
>
>
> Thanx in advance
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

--
James Melzer
http://www.jamesmelzer.com
http://del.icio.us/jamesmelzer

2 Apr 2007 - 7:22am
Susie Robson
2004

You said: I have a problem at the definition of the layout guideline of
our software company (software is a desktop application and not a web
forms). In many discussions it is said that the right alignment is a
good alternative to vertical positioning of labels. But in some cases
left-alignment labels are better structured (if I use multiple columns).
It is said likewise that the consistence in the complete application is
very important.

My question: Can I use a mixture of both in the applictation layout?

And if not, what is the best standard

My answer: No, you cannot use a mixture of both in the application.
Consistency is important, which means doing it one way all the time.

As someone else said, putting the labels above the text box/field, is
another option.

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
sysscore
Sent: Monday, April 02, 2007 5:13 AM
To: discuss at ixda.org
Subject: [IxDA Discuss] Label alignment left or right?

Hallo,

I have a problem at the definition of the layout guideline of our
software
company (software is a desktop application and not a web forms). In many
discussions it is said that the right alignment is a good alternative to
vertical positioning of labels. But in some cases left-alignment labels
are
better structured (if I use multiple columns). It is said likewise that
the
consistence in the complete application is very important.

My question: Can I use a mixture of both in the applictation layout?

And if not, what is the best standard

Thanx in advance

________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
List Guidelines ............ http://listguide.ixda.org/
List Help .................. http://listhelp.ixda.org/
(Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org
Home ....................... http://ixda.org/
Resource Library ........... http://resources.ixda.org

2 Apr 2007 - 8:34am
sylvania
2005

As has been pointed out, consistency is important. Especially in a desktop application, mixing alignment typically gives an unprofessional result, and is discouraged.

Which OS(es) are you targeting?
On Windows, the general guideline is to left-align labels; on Mac, labels should be right-aligned. These are guidelines, of course, and not hard-set rules, but software tends to look more polished when it follows the visual styles of the OS on which it runs.

If the software is being developed in English, remember to make field labels around 1.5x the length of the English text if you'll be localising into other lanuages.

As was mentioned by Jon, the labels can also be placed above the fields, but when done a lot in a UI, this will also give an unpolished result. Generally, a label should be placed above its field only when the label text is long, and with all other design considerations kept in mind.

For more on control layout for desktop apps, you may want to check out the Apple User Experience guides here: http://developer.apple.com/ue/ and the MS guides here: http://msdn2.microsoft.com/en-us/library/aa511258.aspx

Cheers,
Sylvania

2 Apr 2007 - 9:43am
sysscore
2007

Thanx for the first....

>You said: "Which OS(es) are you targeting?"<

Our applications (banking software) based on Java and the systems is win2k
and winxp. Therefore i used the ui-standards of Microsoft.

>You said: "Which OS(es) are you targeting?
On Windows, the general guideline is to left-align labels; on Mac, labels
should be right-aligned. These are guidelines, of course, and not hard-set
rules, but software tends to look more polished when it follows the visual
styles of the OS on which it runs."<

I have seen some applications for windows platform which used the
right-alignment of labels.....(i.e. adobe products)

>You said: "As was mentioned by Jon, the labels can also be placed above the
fields, but when done a lot in a UI, this will also give an unpolished
result. Generally, a label should be placed above its field only when the
label text is long, and with all other design considerations kept in mind."<

In most situations we place the labels above the fields (that's the second
alternative to horizontal placement). But we have dialogs, where are many
fields (sometimes up to 30 fields...). our old design of the property pages
i.e. had the labels above the fields but it has wasted to much space and
reduced the overview.

In my optinion the right-alignment of labels is mostly better. But in some
situations it's difficult to scan the content. I have read it's depend on
the experience of the user and the quantity of content.

Mmmmmhhhhh.......

Cheers

Thomas Witsack

2 Apr 2007 - 10:41am
sylvania
2005

You said:
"I have seen some applications for windows platform which used the right-alignment of labels.....(i.e. adobe products)"

Sure. Nothing wrong with not following Microsoft's guidelines when it's done on purpose. The holistic app design and consistency within the app itself are the most important things, of course. Unfortunately, we also see many applications that look funky and unprofessional because the overall design doesn't seem to follow any conventions.

You said:
"In my optinion the right-alignment of labels is mostly better. But in some situations it's difficult to scan the content. I have read it's depend on the experience of the user and the quantity of content."

So you're deviating from the platform guidelines on purpose and that's cool - consistency is the big thing. I like the right-alignment pattern better as well, and each pattern has it's pros and cons. Personally, I do use the left-align pattern in Windows design, but that's me.

Here's an eyetracking study on label alignment in Web forms: http://www.uxmatters.com/MT/archives/000107.php

Of course, Web usage studies don't always translate to desktop design, because the nature of users in Web apps is often quite different than in desktop apps, but in this case it's probably the same for both.

Cheers again,
Sylvania

2 Apr 2007 - 2:35pm
cfmdesigns
2004

Frankly, I don't think it makes a lick of difference. I suspect that any "improvement" in usability from one layout or the other is under the margin of error threshhold.

I think most of the "reasons" for using one over the other are just rationalizations, after-the-fact explanations for sticking with something the designer prefers (or even that the designer just stuck in without much real thought; gasp, that does happen!). I think that Windows has the opposite order from Mac as much to be different (helps stave off look-and-feel lawsuits) as anything. And don't I recall that one of the standards used to be stacked buttons on the right rather than a row on the bottom?

As another spin on the question, what about the three-button cases, like OK/Cancel/Apply in the Windows properties sheets? I think they stick Cancel in the middle to separate the other two and avoid accidental clicks, but the order seems contrary to arguments about back/forward actions or "most important on the right".

I would follow these guidelines:

* If the app is being created specifically for one platform, use the order that is standard for that platform.

* If the app is cross-platform, use the platform standard for each OS on that OS; don't force the standard from one OS onto users of the other in the name of "easier" programming.

* If the app is for the web, use whichever one you like, or make your own if that makes sense. (But don't be different just to be different!)

* Be consistent throughout your app, whichever you choose. (And of course, be clear and be usable.)

-- Jim Drew
Seattle, WA

Syndicate content Get the feed