
Why Users Fill Out Forms Faster With Top Aligned Labels - UXMovement
http://uxmovement.com/design-articles/faster-with-top-aligned-labels
======
twoshortwords
This article comes off as hand-wavy. The crux of the argument, that "[t]op
aligned labels have proven to be faster and easier to fill out than left or
right aligned labels", is unsupported. The author supplies no links to
research or other corroborating sources.

The graphic is a little misleading, too. Under "Top aligned labels", it says:
"less vertical space". I initially understood that to mean that the form
occupies less vertical space. It really means that the form leaves less
vertical space below it.

I'm confused why they didn't consider other types of labels, especially for
text boxes. For instance, the iPhone puts the labels inline with the form
element. And placeholder text frequently replaces labels, anyway. How does
that affect usage?

Interestingly, they don't follow their own advice. The comment form after the
article uses right-aligned labels.

~~~
dieterrams
> Interestingly, they don't follow their own advice. The comment form after
> the article uses right-aligned labels.

Apologies, but these sorts of observations/criticisms are fairly common on HN
(I remember someone saying "they don't follow their own advice" about the
Stanford web credibility guidelines), and I have to say I consider them
pointless. Observing hypocrisy and pseudo-hypocrisy is necessary if you're
making a decision that depends heavily on someone's character, like electing a
president, but it's almost always irrelevant when assessing the merit of what
someone says.

People often have good reasons for not implementing their own advice, too.
Maybe it was a higher priority for them to get the word out rather than make
sure everything public they do complies with it first. Sometimes it's a cost-
benefit problem: improving blog comment forms probably won't make much of a
difference to their bottom line, but improving a new user sign-up form very
well could. Comment forms are also fairly standard in what information they
expect and in what order, so again, probably not a huge payoff. In Stanford's
case, they already have the credibility that comes with being Stanford. Etc.

~~~
argsv
I the observation about the blog itself not using top-down alignment is not
pointless I think. It really makes you wonder whether the post was written to
increase a counter in a database or out of conviction that this is the way to
go. And if there is a good reason for not making the change, the author could
have been more respectful to the reader by offerring an explanation.

~~~
dieterrams
> It really makes you wonder whether the post was written to increase a
> counter in a database or out of conviction that this is the way to go.

Again, this just has no relevance to the claims on offer. You can evaluate
them for yourself without wondering what the author's motives are.

~~~
dieterrams
I keep getting downvoted. I'm not sure why. My guess is that criticizing
criticism of an article that a bunch of people find sketchy has made me a
target for their low opinion of the article or site itself. This seems
especially likely given that the only response to my original comment, which
has been increasingly upvoted while mine have been downvoted, chooses to see
the lack of top-aligned labels for the comments form as likely evidence that
the article was authored for base motivations, or that the author doesn't
really believe his own advice. This _despite_ the fact that I offered several
very plausible reasons why it would not count as such evidence. Here's another
one, just for the hell of it: laziness.

I have no idea if the site is as sketchy as people claim, because I've never
even heard of it before. But even if it is, I _still_ wouldn't think the
comment form comes anywhere close to giving unambiguous information about the
author's motives. There are so many highly plausible reasons for this that
you'd have to be _thoroughly unreasonable_ to assume that it's strong evidence
for any particular reason.

------
amirmc
A side note:

 _> You can also break the form up into multiple pages to make each part of
the form shorter_

I _dread_ the 'next' button on multi-page forms, especially when there's no
indication of how many pages there are or how long the questions will be.

~~~
tyng
If you really have lots of questions to ask the users, don't do it all in one
go.

Especially for customer acquisition, the first form should be as simple as
name, password, email address. The other information about the user can be
asked later on and provide some kind of (virtual) incentive for people to do
so. I know that LinkedIn uses this kind of system.

~~~
DJN
> If you really have lots of questions to ask the users, don't do it all in
> one go

This doesn't apply to all cases. It works well for sign-up forms but there are
cases in which it's better to focus on early user engagement at the expense of
a short form.

For example, in cases where the user is expected to create or design something
for use later, it makes sense to immerse them in the creation process even if
it means your form is longer than normal. The key thing, imho, is to keep the
number of pages down to 1 (or max 2) and give live feedback.

More details in my earlier comment:
<http://news.ycombinator.com/item?id=1655871>

~~~
tyng
Thanks for giving the example on your other comment - I really liked the live
feedback function which is just like giving instant reward to the user for
every step he/she takes in filling out the form

------
kentosi
I totally agree with the vertical alignment of labels, as it does actually
make user input faster. The problem (mentioned in the article) is when the
page becomes too long. Clients don't tend to like this.

One approach I normally use is to have the labels horizontally placed, but
right aligned so that they "stick" to the input field:

    
    
      [-----myLabelA][textboxA----]
      [---myLabelABC][textboxABC--]
    

as opposed to:

    
    
      [myLabelA-----][textboxA----]
      [myLabelABC---][textboxABC--]

------
btilly
Personally I don't care what makes users fill out forms faster. I care whether
the A/B test says that more users fill out the form.

That said, ideas like "top align the labels" make excellent fodder for A/B
tests, and I encourage people to test that on their sites.

------
ars
This is not correct, the eye is optimized for side to side motion, and does it
really really fast.

Up down motion takes longer.

Additionally the visual span is sufficient for someone to read the label, and
see the box at the same time.

Another issue is context switches. With top to bottom motion there are a lot
of context switches (to borrow a computing term), you switch from label, to
entry.

If they are in columns it's much faster - the left side is all labels, the
right is all entries. It's organized and faster.

~~~
antidaily
any evidence for these claims?

~~~
ars
This article <http://www.iovs.org/cgi/content/full/50/3/1158> implies that
vertical saccades are less accurate than horizontal saccades.

I could not find direct measurements of the vertical vs horizontal velocity in
the few minutes I searched, but you can try it for yourself.

Try rapidly flicking your eyes left-right, then try up-down. At least for me
left-right is much faster.

Edit:

<http://elmar-inc.com/Papers/Clinical/SaccadesInChildren.pdf> has a graph that
clearly shows that horizontal saccades are faster.

------
timcederman
Without actual data, this remains just a hypothesis. I find top aligned labels
clunky because it makes me less sure about the field/name association.

~~~
Hovertruck
I don't have it offhand, but Luke Wroblewski gave a great presentation about
this at An Event Apart San Francisco last year. He had done a lot of studies
on the matter and came to the same conclusion.

~~~
jacquesm
that one ?

[http://www.slideshare.net/lukew/web-form-design-best-
practic...](http://www.slideshare.net/lukew/web-form-design-best-practices)

------
weixiyen
This kind of BS is why I quit IXDA. Hypothesis with no convincing evidence
either way being passed around as fact.

------
revetkn
Does anyone have a link to some numbers supporting this? The article says "Top
aligned labels have proven to be faster and easier to fill out than left or
right aligned labels" without a citation.

~~~
seiji
The oldest study I remember about labels is
[http://www.uxmatters.com/mt/archives/2006/07/label-
placement...](http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-
forms.php)

~~~
jonny_noog
I just went to add the same link without realising it was already here, d'oh.
It was also the first material I remember reading on form label placement and
I found it to be a bit more enlightening (and better written) than the subject
post of this thread.

------
harrybr
I suspect most sites have many bigger issues than finessing label alignment
for reading speed. Shortening the form itself could shave off seconds - or
even tens of seconds when done right. Messing around with the label alignment
probably only shaves off milliseconds at best.

------
drcode
This post is conflating two issues. (1) It requires extra cognitive load to
figure out which label belongs to which controls (2) The extra eye movement
thing.

I bet the effect would be a lot less pronounced if the label/control entities
had a box with some subtle shading behind them to indicate a relationship. I
suspect that would wipe out most of the difference in effectiveness between
the two layouts (though some effect might remain- I'm not sure)

------
fauigerzigerk
I doubt the speed argument. Typing takes way longer than a few eye movements
anyway.

------
RyanMcGreal
Would the difficulty be ameliorated by right-justifying the form field labels
and moving them closer to the inputs?

------
rwaliany
Interesting, I tweeted about this last night. Luke Wroblewski had an amazing
slideshare on this topic, <http://slidesha.re/8A3pI>. It has other details
such as breaking up the page, alignment, spacing, etc...

------
presidentender
You can also put your horizontally-aligned labels closer to the fields to
which they correspond.

~~~
MetallicCloud
Exactly my thoughts. I always use horizontal alignment, but I right align the
labels so there's an even amount of space between the last letter and the
field.

------
derefr
How about labels _inside_ the fields (as placeholder texts)? I'd think that'd
be the quickest _and_ most accurate attachment of text to an input (even
though my aesthetic sensibility balks.)

------
DrewHintz
<http://imgur.com/n1KoJ>

------
raghus
1\. It would have been good to see some quantitative numbers to back up the
assertion which sounds plausible

2\. His own comment form at the bottom has side aligned labels (and no
comments so far - so maybe he's right?)

------
MichaelApproved
Should be titled "Why _I think_ users _might_ fill out forms faster with top
aligned labels" since the article gives no evidence to support the claims. A
simple a/b test would be enough.

------
jharsman
Having the labels above the input field can make localization easier since it
allows the label text to grow or shrink without affecting layout.

------
trurl123
If you use right alignment for labels, you can save space and your eyes will
not jump from left to right!

------
baddox
> _twice as less_

Nice.

------
baby
Also easier to CSSize

~~~
humblepie
Haha, exactly. Floating labels...forget it.

------
mkramlich
I also like to have as few visual elements on a page as I can get away with.
Keep it as simple as possible. Minimizes distraction, minimizes response
latency, minimizes page rendering time in client's browser, minimizes the
chance that something can "go wrong" with any given page, and minimizes work
on my side.

I am not a professional designer, so take with grain of salt.

