Why Users Fill Out Forms Faster with Top Aligned Labels
by anthony on 09/01/10 at 3:48 pm
Imagine a user who is really excited about your product or service. They’re ready to sign up, so they go to your form page and start filling out their information. The way you align your labels with your form fields can affect how easy it is for users to fill out the form. Do you want to give users a quick, easy and painless experience or do you want to give them a hassle? If you want to make their experience quick, easy and painless, consider using top aligned labels for your form fields.
Top aligned labels are faster and easier to fill out than left or right aligned labels. This is because top aligned labels require half as many visual fixations than left or right aligned labels. Top aligned labels also allow users to move down the form in one visual direction, instead of two visual directions with left and right aligned labels. This makes filling out forms quicker and easier.
The only drawback with top aligned labels is that they can make the form long. However, on the web, where users scroll often, this doesn’t seem like a big problem. In fact, by reducing the font size of the labels and the whitespace between fields you can decrease the form length. You can also break the form up into multiple pages to make each part of the form shorter.
The difference is clear. Top aligned labels are easier on the eyes, and make long forms simple and easy to fill out. Even though they may make forms look longer, when the user actually uses the form they’ll notice a dramatic difference in the time and effort it takes to complete the form. If users are able to have a better experience with forms, then using top aligned labels is well worth it. The form experience is an important aspect to web design. Designers should carefully think about how they align form field labels because it can often make the difference between a user completing the form or abandoning it.
Related Articles:
How to Design Forms for Better Conversions | The Website of UX Designer Matthew Stephens
Sep 1st, 2010
[...] Why Users Fill Out Form Fields Faster With Top Aligned Labels | UXMovement.com. [...]
DJMoore
Sep 1st, 2010
Remember the 2000 election Florida ballot foo-raa?
That was essentially a problem with horizontally-aligned labels.
And at that, they weren’t even correctly aligned:
http://jerz.setonhill.edu/design/usability/use-ballot.htm
As that web site points out, although the Democratic candidate was the second option on the left hand side, the matching bubble was the third one down, because bubble #2 went to the Reform party, listed on the right hand side.
anthony
Sep 2nd, 2010
Thanks for the insight. I didn’t know that. 2000 was so long ago I can’t remember if I voted or not.
amirmc
Sep 1st, 2010
“Top aligned labels have proven to be faster and easier to fill out than left or right aligned labels”
Hi, thanks for the post. Could you point me to any links that demonstrate the above quote? I’d be interested to see how big the effect is between top-aligned and right-aligned.
Thanks!
AC
amirmc
Sep 1st, 2010
Came across this which might be useful
http://www.slideshare.net/lukew/web-form-design-best-practices
Bill Horsman
Sep 1st, 2010
I agree with this article, but
“In fact, by reducing the font size of the labels and the white space between fields you can decrease the form length.”
… is a bit obvious, no?
I like this site though. Good work.
JDoc
Sep 1st, 2010
“This is because top aligned labels require twice as less visual fix a tions than left or right aligned labels.”
This is terrible sentence structure. It weakens the argument and causes cognitive dissonance.
How about you try “half as many” rather than “twice as less”.
Healy Jones
Sep 1st, 2010
This is really interesting. Have you actually a/b tested it?
Looks like I’ve got some forms to redesign…
Joy
Sep 1st, 2010
Twice as less?
Alex
Sep 1st, 2010
Is there any empirical evidence for this or is it just your opinion?
How to Get Rid of Eczema – Excellent Tips For You to End Your Itching
Sep 1st, 2010
[...] Why Users Fill Out Forms Faster With Top Aligned Labels … [...]
Raphael
Sep 1st, 2010
Any empirical evidence for this claim?
Why Users Fill Out Forms Faster With Top Aligned Labels | UXMovement.com : Popular Links : eConsultant
Sep 1st, 2010
[...] Why Users Fill Out Forms Faster With Top Aligned Labels | UXMovement.com 1 September 2010 | Uncategorized | Trackback | del.icio.us | Stumble it! | View Count : 0 Next [...]
Ow
Sep 1st, 2010
What about the approach of an inline label/value pair (a la iOS)? Those seem to accomplish the best of both worlds. Easy label/value correlation and minimum vertical space. These also lend themselves to nice chunking if you have different sections in your form.
=== popurls.com === popular today
Sep 1st, 2010
=== popurls.com === popular today…
yeah! this story has entered the popular today section on popurls.com…
Duke Ionescu
Sep 1st, 2010
While there’s no question that usability wise top-aligned labels are better, the tradeoff is that the form doesn’t “look” as good. I suspect this is to blame, in big part, for the prevalence of the left-aligned label layout.
There’s also mobile to consider, where the rules are a little different – for example, there’s simply not enough real-estate to left-align labels (good), but to avoid scrolling you are limited to a fewer fields (bad). As you suggested, splitting the form into multiple pages is one solution.
As always, A/B testing is invaluable – try different versions and see which performs bestter. You can’t optimize what you don’t measure.
Joshua
Sep 1st, 2010
There’s something ironic about this posting and the way your comment form is setup, with the labels to the right of the input boxes.
Travis L
Sep 1st, 2010
I’ve read conflicting reports on this issue. Ones that actually include eyetracking data, rather than just guesses!
First, I read an ACM article saying the same thing as you have here. Only issue is that it was done with just 11 subjects, so it might not be the most valid.
I have read on Jakob Nielsen’s blog and elsewhere that the difference between the two is negligible. He backed it up with some studies they’ve done.
So I don’t think this issue is as clear cut as you make it out. Even so, it would be helpful if you cited some of the other research on the subject!
Albert
Sep 1st, 2010
The concept is sound. Do you have any supporting data for this? Reports? Studies? A/B tests? Proof?
At least make up some numbers so that we can feel that what you say is more than opinion.
(example rebuttle: Many languages read left->right)
Jar
Sep 1st, 2010
Good tip!
It’s kind of funny how your comment form is right aligned.
joh6nn
Sep 1st, 2010
“top aligned labels require twice as less visual fixations than left or right aligned labels.”
dude. “twice as less”? please never say that again. please. “half as many”. see how much nicer that is? “half as many”. seriously.
David Phillip Oster
Sep 1st, 2010
Another advantage of forms with Top Aligned Labels:
Localization
Forms designed this way are much easier to localize. Since the field labels are often longer in other languages, there’s plenty of white space for the label to expand into.
Nick Mathis
Sep 1st, 2010
Great advice. I am guessing using columns of fields would negate some or all of the benefits of top aligned labels.
Ironically your labels are right aligned for the comment form.
Adam Pieniazel
Sep 1st, 2010
Wondering if there’s a sweet spot here between actual quickness and appearance. Doesn’t matter if the forms are quicker to fill out with a top label if users are less likely to fill them out because they seem long.
anthony
Sep 2nd, 2010
Good question. I’ve wondered that myself. If they’re interested in what the site offers, but the form looks long I think they would still fill it out, but they would procrastinate. People procrastinate even online.
Steve
Sep 1st, 2010
… yet the comment form for this blog uses right aligned labels… 2 steps worse than top aligned
Simon Harris
Sep 1st, 2010
I presume the irony of this comment form had not escaped you
Brian
Sep 1st, 2010
I understand that with side-by-side forms, the eye-activity is significantly higher, and thus might help speed users along. I wonder, however if that directly correlates to the user’s ability navigate the _meaning_ of the form and its questions. Do you know of any studies done that have looked at the way a form is laid out compared to how quickly the user _understands_ what they are being asked, not just how quickly their eyes can traverse it?
I imagine that this may be quite variable across cultures and languages, but I have no first-hand data myself. Just curious.
Thanks for your post!
Brian
Sep 1st, 2010
[edit]Sorry, I meant _vertical_ forms are more quickly scanned (in the first sentence). The question stands, however.[/edit]
Gus Mueller
Sep 1st, 2010
“Top aligned labels have proven to be faster and easier to fill out than left or right aligned labels”.
I didn’t see a link- do you have a source for this? I’m curious what the study / experiment / whatever found, how much faster it is, etc.
Jessica Enders
Sep 1st, 2010
Hi
Interesting post which, although simplifying things, makes some great points. For example, another great reason to have labels above fields is that it allows for translation into other languages.
You might be interested in quantitative research that was done in 2006 regarding this topic and published in both UXmatters (http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php) and Luke Wroblewski’s book Web Form Design (http://www.rosenfeldmedia.com/books/webforms/).
I’ve also written on the topic at a little more length: http://formulate.com.au/articles/alignment/.
Cheers
Jessica
Anthony
Sep 1st, 2010
I agree with the thesis presented here, but I’d like to see some studies or statistics (or even heat maps!) that this is the case.
Jordan Reed
Sep 1st, 2010
Thanks for the article. I’ve been thinking about the best ways to design forms so this is helpful. It just makes sense too.
Garren
Sep 1st, 2010
“Top aligned labels have proven to be faster and easier to fill out than left or right aligned labels.”
What evidence do you have that backs up this statement? I deal with a few big enterprise web apps where I’m at and many attempt to mimic a desktop ui. These particular apps are data-driven more than content driven and more often than not the data elements are left-aligned. This is pretty typical of many “enterprise” web apps that I’ve dealt with.
Further, we’ve also toyed with left-justifying versus right justifying. I’m partial to left-aligned/left-justified, but a good number of users have voiced a preference for left-aligned/right-justified. Following this latter format also naturally results in less travel from label to control – roughly the same amount as your top-aligned example. Given that many cultures tend to read left-to-right anyway I’d be surprise to find that the top-aligned is more effective or preferred for anything other than smaller comment forms on a blog.
Why Users Fill Out Forms Faster With Top Aligned Labels | UXMovement.com » Web Design
Sep 1st, 2010
[...] Why Users Fill Out Forms Faster With Top Aligned Labels | UXMovement.com [...]
Raul Macias
Sep 1st, 2010
Very interesting. Have you measured this in any way?
Sam Watkins
Sep 1st, 2010
thanks, good points, I will try this style for forms in future.
rajesh
Sep 1st, 2010
Yes, it is easier to read and fill this way. But then, on a wide screen display you get a lot of space on the sides which then puts the designer to wonder if he should opt for a left-labeled field design.
When testing such a form design for our CRM software, some ppl with wide display screen sent feedback that the screen looks half empty! And those who accessed the prototype in their mobile devices did not complain anything!
Link dump for September 1st | The Queue Blog
Sep 1st, 2010
[...] Why Users Fill Out Forms Faster With Top Aligned Labels | UXMovement.com – put your form fields in a list, with labels on top and your users can fill them out faster. so this says. [...]
Greg
Sep 1st, 2010
Interesting, but your diagram example relies on left-aligned text labels to create a gap between the label and the control. Right-aligned text labels would largely eliminate this gap.
By “have proven” do you mean empirically proven with a reference?
Donny Kurnia
Sep 1st, 2010
Yet this blog using right align label for the comment form, maybe to scare away visitor from leaving a comment or slow them down
Santhosh
Sep 1st, 2010
Oops.. Never thought about these things. Thanks. Will try it.
Matt S
Sep 1st, 2010
“require twice as less”
Did you mean half as many?
Matt
Sep 1st, 2010
What about putting the label inside the box and setting it so that the label goes away once the user has entered any text?
anthony
Sep 2nd, 2010
The problem with that approach is that the label goes away. That may work well with login forms, where everyone knows that you have to input your username and password, but on longer and more complicated forms the labels should be displayed.
Joe Public
Sep 2nd, 2010
“twice as less”? Ouch.
R Sutaria
Sep 2nd, 2010
Interestingly, your comment form has right aligned labels
Matt
Sep 2nd, 2010
While I agree with the reasoning of this article, I would strongly encourage the use of citations to support claims that one method is bigger/faster/stronger over another.
Where are the references to support the claim that: “Top aligned labels have proven to be faster and easier to fill out than left or right aligned labels” ?
Optimised Onion
Sep 2nd, 2010
This is good stuff. agree. it makes complete sense. the natural movement of the eye would be downwards only, in the case of forms.
Pad
Sep 2nd, 2010
Great article.. But what about the fact of putting labels inside inputs which are, from my point of view, more efficient in terms of lisibility ??
Jannis Gundermann
Sep 2nd, 2010
Interesting article, how does this compare to labels inside/on top of the text field? (placeholder text to describe the field’s function)
That seems to reduce the vertical length considerably and it feels intuitive to simply click into the field/or onto the placeholder text to begin entering information.
Russell Bishop
Sep 2nd, 2010
Very informative article, your diagram turns your argument into a “why didn’t I think of that” moment.
I was just talking this over with my colleague, who suggested that using your thinking, labels being inside inputs would then make completing a form even faster?
I also wondered how using a 2 column layout for your form would change the outcome, even if you used top aligned labels.
Cheers for the read!
Maxim Pokrovskii
Sep 2nd, 2010
This is magic of series: black is negative color, links should be blue and underlined.
Rhubarb
Sep 2nd, 2010
Have you carried out any eye-tracking experiments on this? Fixations usually have the duration of some milliseconds. Compared with the actual typing this is next to nothing. I doubt that there is a measurable benefit.
links for 2010-09-02 « Peter’s Side Thoughts
Sep 2nd, 2010
[...] Why Users Fill Out Forms Faster With Top Aligned Labels | UXMovement.com (tags: usability design forms webdesign ui interface ux form) [...]
heh
Sep 2nd, 2010
Consider using top aligned labels for your commenting form fields.
Samuel Williams
Sep 2nd, 2010
Thanks for the well thought out article.
I recently decided that left aligned labels are very complex – they lead to complicated HTML, CSS, etc, and they also are not easy to read.
For those who are interested, this was the result:
http://www.drobo.co.nz/drobo/configure
The main form is at the bottom of the page. I was trying to achieve something clear and easy for people to follow. I think it is generally successful.
Red
Sep 2nd, 2010
Form looks good but I noticed that the Quantity and Totals columns are right aligned. When browsers are set wide onscreen it makes for a far movement of the eye. Also from a design standpoint, the item headers like “Enclosure” probably would do better without the underlining as it looks to be clickable but isn’t.
Giles
Sep 7th, 2010
The forms look great. Not so sure about the quantity information up the top – might be good to restrict the width (I am viewing on a 1200 wide monitor) and right align the item descriptions. Thanks for sharing
Mayur
Sep 9th, 2010
Another approach of right aligning form labels is the fastest one where labels are right aligned and text boxes are left aligned make user to fill form more quickly than ever.
http://www.tutkiun.com
Ben
Sep 2nd, 2010
I agree and would tend to prefer vertical both as a user and designer. Still, how much faster, 0.01 seconds? Would a typical user be cognitive of that extra effort? Not enough to make a blanket statement here – I think good designers can still choose left/right.
Nick de Voil
Sep 2nd, 2010
Very interesting and clearly described. Just to play devil’s advocate I would make 3 points. The first two are mentioned in Caroline Jarrett’s 2008 paper “Label Placement in Forms – What’s Best?”
1. If you make the form look long, it certainly can be a big deal – some people will not bother with it.
2. When people look at a form laid out in a grid, they often scan down the list of fields before doing anything, to see what they are going to be asked. It’s much harder to do this with vertically-aligned headings because of the dissonance between text labels and form controls.
3. Although I realise that people can read short words with only one eye movement, and so the diagram does look plausible, most text labels are longer than in the example. People in Western cultures are used to reading from left to right, and if their eyes are moving along a left-right axis in order to read the label anyway, doesn’t it feel more comfortable to continue that into the form field?
Luis Parker
Sep 3rd, 2010
Very well put Nick.
As is often the case, it all depends on the lenght, content-type and purpose of the form. I think Luke Wroblewski did a great job in his book classifying the different label-placement-options according to it’s use and context.
Ell
Sep 2nd, 2010
Yet the fields on this comment box are right aligned?
Red
Sep 2nd, 2010
Yup a very good practice what you preach observation.
Jon Brink
Sep 2nd, 2010
Great post. Not sure I agree with everything. But it was very well thought out.
omero
Sep 2nd, 2010
Hey, that’s a nice observation. I used to try designing the forms with top-aligned labels, that’s what I always used to do.
Thanks for taking the time to explain it clearly.
Brent
Sep 2nd, 2010
What are the 3 visual distractions counted in the diagram?
Bill
Sep 2nd, 2010
I don’t disagree, but I would like to see the studies. Is there a higher rate of completion/submission? How much higher? Difficult to take this to clients as more than mere opinion unless I have data to back it up. Thanks for sharing.
zymedia
Sep 2nd, 2010
good tips
Scott B
Sep 2nd, 2010
Great post!
Are top-aligned labels still a helpful when users fill out a form once, then periodically return to it to check certain info? For example, a profile page on a social networking site listing name, email address, phone number, etc. etc. Can users find the info they’re looking for just as easily with top aligned labels?
Jennifer R
Sep 2nd, 2010
It’s faster but I think the left aligned label looks more beautiful than the vertical aligned form
Jim Robert
Sep 2nd, 2010
… fortunately there are far more beautiful things on the web than forms
Vick Aita
Sep 2nd, 2010
I found this article to be very interesting and informative. I would like to discuss this topic with the UX people in my company, however I notice that there are no sources listed for your claim that “top aligned labels have proven to be faster and eas ier to fill out than left or right aligned labels.” If there is any research available on this topic I would be most interested to read it, and it would strengthen your argument.
Also, in the first paragraph you wrote “twice as less”, but “half as many” might be easier to read.
Thank you very much for your informative article.
Stijlbreuk
Sep 3rd, 2010
I thought I also read this in the book ‘Eyetracking Web Usability by Jakob Nielsen” Which is a great read.
Sheri
Sep 2nd, 2010
How about a study to back this up?
Jones
Sep 2nd, 2010
Do you have some test data to back this up?
I understand that it makes sense, but what seems logical doesn’t always prevail with users.
Top Align Form Labels For Fun and Profit | Yount Labs
Sep 2nd, 2010
[...] a fascinating article over on UX Movement on why it’s easier for users to fill out forms where the labels are aligned [...]
Joko Ruwhof
Sep 2nd, 2010
I agree with Nick. Most users find such forms messy.
It works nice with small forms though.
I prefer right aligned form labels with short label texts.
label text [ Input 1]
label text 123 [ Input 2]
Caroline Jarrett
Sep 2nd, 2010
Great to see some close attention for web forms.
@Nick de Voil: thanks for mentioning my 2008 paper, which is available from the ACM Digital Library. There’s a summary of the same points in this online article: http://www.usabilitynews.com/news/article3507.asp
@Jennifer R: you’re right, users do react strongly to the visual appearance of forms. My current advice is to use any sensible arrangement of the labels that looks harmonious to you, and then test it with your users.
Others have mentioned data. The main source for the advice that putting the labels above the forms is quicker is the research done by Mario Penzo, reported in UXmatters.com in 2006.
It’s a good piece but be careful with it: he was testing particularly simple forms, where the eye-movement around the form is an important element in the overall time to complete. If your forms are more complex, or your users are less confident about giving their personal data on the form, or there are any other complicating factors, then it could be that labels above the fields will work for you – or more likely, not.
best
Caroline Jarrett
Caroline Jarrett
Sep 2nd, 2010
Apologies: I wrote Mario Penzo, whereas of course the correct name is Matteo Penzo.
Mara Alexander
Sep 2nd, 2010
I agree with those who’d like to see the data / studies first. While your theory looks good on paper (nice graphical chart, too!), I’m just not buying it as more than one persons’ theory, not based on any actual fact to back it up.
Fill Out Forms Faster With Top Aligned Labels « Yusufarslan.net
Sep 2nd, 2010
[...] Fill Out Forms Faster With Top Aligned Labels “The way you align your labels with your form fields can affect how easy it is for users to fill out the form.” [...]
@trudesign
Sep 2nd, 2010
Great post, simple yet effective layout adjustment.