Why Users Fill Out Forms Faster with Top Aligned Labels

by 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.

Why Users Fill Out Forms Faster with Top Aligned Labels

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.


Why Users Fill Out Forms Faster with Top Aligned Labels Why Users Fill Out Forms Faster with Top Aligned Labels

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

216 Responses to “Why Users Fill Out Forms Faster with Top Aligned Labels”

  1. TechuilaSMO

    Sep 2nd, 2010

    I agree with Jones, it would be cool to see some A/B test data. It’s hard for me to guess which way layout would lead to faster fill-ins but I think it will hinge on the form-fillers’ experience with forms.

    Another factor: the side aligned labels are closer together, which would make it quicker for form fillers who click on each text box. (pro form fillers use the TAB button).

    Also, a lot of form fields are universal and people may just skip reading them out of habit.

  2. Sean

    Sep 2nd, 2010

    [citation needed]

    By the way, I find it interesting that the labels for the reply form for this blog are on the right. ;-)

  3. PradeepVizz

    Sep 2nd, 2010

    Good logical post. On the other side, label inside the UI control would also save the space

  4. Josh L

    Sep 2nd, 2010

    Wow, I can’t believe I never really thought about this before. Great writeup.

    Even in this era of the web where “the fold” doesn’t mean much anymore, the golden rule that never fails during my A/B testing is that the exact same form with one extra field always results in less conversions. For example, a simple three-field form that asks for name, email, and comments will convert better than the exact same form where the name field is split into first and last name fields.

    I interpret this phenomenon as meaning that the longer a form looks at first glance, the less likely the user is to fill it out. After all, no one is going to fill out two fields then leave because there are a whole two fields to go – these users are lost before they ever start to fill out the form.

    So with that in mind, I would recommend using left (or right) aligned labels for short forms, such as this very comment form that I’m filling out now (which does have the labels right aligned), or even the example form in this article. Any time you are presenting a user with a form that they aren’t likely to fill out (again, like this one – every blog visitor is served this form, but only a small few will use it), you’ll want it to look as small as possible.

    On the other hand, longer forms such as a finance or job application should definitely use the top aligned labels. In these cases, the user is not likely to be put off by the length of the form – they already know they are going to spent 5-10 minutes filling it out, if not longer.

    Just my two cents. I like that your article recommends taking this into consideration rather than applying it blindly to all forms. never seen this site before, but you can bet I’ll be subscribing. :)

    Cheers.

  5. Ian Everdell

    Sep 2nd, 2010

    Caroline mentioned Matteo Penzo’s study – the original article Matteo wrote about the study is here: http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

    He also comments on some recommendations made by Luke Wroblewski about both the label placement and also the label formatting (bolding the labels when they are positioned above the input field helps them stand out from the background). Luke’s recommendations are here: http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

    I agree with many of the comments here – it’s very dependent on the individual situation. Length, frequency of use, familiarity of fields, incentive for filling the form out… it all contributes.

    Besides, a good designer will be testing their designs, right?

    Cheers,
    Ian

  6. Chris

    Sep 2nd, 2010

    It’s also useful to note that this pattern also puts you in a better situation for localization for other languages.

  7. Jay

    Sep 2nd, 2010

    The main thing is to try to keep the submit button above “the fold”. Much like an add to cart button, users will look for the button to complete a form and if a form looks too long, they won’t bother. Especially the older generation.
    In fact, if you will look at almost all paper forms, the entry fields are ABOVE the text labels. This is what the older generation is used to. Tealeaf studies were done on a web shopping cart at a company I used to work for and we found that many people had a hard time completing a credit card form because they didn’t know where to put the numbers. It was quite interesting.

  8. aceman

    Sep 3rd, 2010

    A very good article going more into detail is here:
    Web forms design guidelines: an eyetracking study

  9. Clare Barnett

    Sep 3rd, 2010

    It’s good to see some fresh discussions on label alignment. I’d have to pick out a couple of points though.
    1. users often scroll – in my experience of user testing, this isn’t the case. You’d be surprised at the amount of users who still do not scroll down screens past the fold.
    2. top aligned labels make dramatic differences in completion times. It’s not a dramatic time difference, it’s very little time difference.

    Overall, it is true that top aligned labels make some forms quicker to complete, especially in relation to registration forms where users are asked simple quesitons that they do not hesitate to answer i.e. name, date of birth, address.

    It really depends on the purpose of the form. Do you want a user to consider their answers, if so, you might want to slow down their response, and then top aligned labels are not what you want to use.

    When deciding what alignment to use, you need to consider the purpose of the form, the audience of the form (is it international or local – consider language) and real estate of the page you have to play with. Above all, ensure forms are designed with consistency.

  10. Colin Bowern

    Sep 3rd, 2010

    How do you reconcile this in a more complex line-of-business application? Say you have, for example, an entity with 100+ properties to manage. Are there any compelling examples that aren’t left aligned?

    • zzzzBov

      Sep 6th, 2010

      use a multi-section form (fieldsets) with each section laid out in a consistent manner. then after the styling is complete, add some javascript to make each section appear only when the previous section is complete. Give the user a progress bar to show them how far along they are. That way you give them information in bite-sized chunks, in a consistent format, without forcing them to scroll (which breaks focus).

  11. Steve Krug

    Sep 3rd, 2010

    People just *love* this topic. But I have to side with my friend Caroline Jarrett (who I think of as *the* Web forms expert) who tweeted that (paraphrasing) focusing on where labels are, and not on what they ask, is the wrong focus.

    Also, length of forms is not-inconsequential, and probably has much more impact than whether the whole process takes a few seconds longer and has a slightly higher cognitive load.

    If you ever get the chance to hear Caroline speak on the subject, go!

    • anthony

      Sep 3rd, 2010

      I think form length is a factor when the length of the form doesn’t match the size of the task at hand. For example, if this comment box had five fields more, then there probably would be a lot fewer comments because the size of the task (leaving a comment) does not merit such a long form.

      But if I were engaged in a larger task, like applying for college, then a long form would not be such a problem.

  12. cha0s

    Sep 3rd, 2010

    I love how the comment form at the bottom of this page does not have top-aligned labels!

  13. Chris

    Sep 3rd, 2010

    Do you have any numbers to back this up? For example, users filling out a form on your site and the numbers that complete vs not with the two different forms?

    We work with web applications where we try to get as much information on the screen without the user scrolling.

    Chris….

  14. Bill

    Sep 3rd, 2010

    We are designing our web app using in-field (placeholder) labels. This jQuery plugin is a good example of this type of input field. http://fuelyourcoding.com/scripts/infield/ here is another http://www.perfectline.co.uk/blog/change-input-field-placeholder-with-jquery.

    So far user testing has been very positive. We have spent a considerable amount of time testing our user’s preferred methods for entering in data for both simple as well as complex calendar events. This ranges from the touch typists, that want to enter all data via the keyboard and the point and click folks that don’t want to touch the keyboard anymore than absolutely necessary.

    We are delighted that everyone has been positive about the in-field labels.

  15. ahsan

    Sep 6th, 2010

    I also really think that this concept is good that left or right aligned labels will be slightly difficult to read

  16. Almekhlafi

    Sep 7th, 2010

    Thankyou very much this good idea

  17. Lil Wayne

    Sep 7th, 2010

    The datas are shared in a beautiful fashion with the visitors.

  18. Henrik in Perth

    Sep 7th, 2010

    This is a very interesting concept. Hands-up – I’ve never really thought about it before.

    Guess I’ll be trying this approach on my next web design.

  19. Chris Richter

    Sep 7th, 2010

    I understand the “we read left to right” argument, but it still seems like vertical alignment’s value increases proportionate to the form length.

    On three fields, it is hard to get lost. This comments form, be it left/right/top, doesn’t make a difference for me.

    For mortgage/banking/finance/job, etc. forms, it does.

  20. ekl

    Sep 7th, 2010

    Probably should left align “action” at the end or give more affordance to the main action

  21. Holger

    Sep 8th, 2010

    Interesting and informative article and discussion …
    about one year ago I wrote an article regarding this topic,
    perhaps it might be interesting for the one or other :

    The form of forms … We need them, but also hate them

    http://ux4dotcom.blogspot.com/2009/06/form-of-forms-we-need-them-but-also.html

  22. Keep up the good work, I like your writing.

  23. Jamie

    Sep 9th, 2010

    Such common sense when you see it written down, yet I’ve never thought it about it like that!

    Great article, sometimes the obvious needs to be stated!

  24. B.Shah

    Sep 9th, 2010

    Great article.

    Although it’s very common, i have never thought about it like this.

    Thanks.

  25. Rajender

    Sep 10th, 2010

    I will inplement this in my site http://www.gogocinema.com
    I realy like this theory.

  26. Fjord

    Sep 11th, 2010

    Or here’s a thought, you could continue to use left/right aligned and inform visitors to just use the tab button to move to the next entry field.

  27. MagnetMan

    Sep 12th, 2010

    That’s right! Second version of form is not comfortable for users.

  28. Stijn

    Sep 13th, 2010

    Will you guys be implementing this in your own comments form?

  29. evan

    Sep 13th, 2010

    Good post, one definitely to be taken into account. Thanks for posting.

  30. gef05

    Sep 13th, 2010

    Very surprised to read this. As a slow reader I find top-aligned labels a massive hurdle to scanning (a) what is being asked, and (b) how I responded.

    For me, this is reminder that there is no one right approach, and that we should always start with the basics – context, purpose, etc.

  31. njmehta

    Sep 13th, 2010

    This is an awesome thinking. I too have realized that when filling up forms. It’s hard, if the form is in 2 columns.

  32. Music

    Sep 13th, 2010

    I think this site’s structure is developed pretty good.

  33. Young Jeezy

    Sep 14th, 2010

    I typically don’t comment on web sites but you have some good readable material.

  34. ateeq ahmad

    Sep 14th, 2010

    Wow!
    This is such a great insight. I would not have thought of this eye movement that takes so much effort. Great graphic to explain this all, by the way!

    • RonD

      Nov 14th, 2010

      Logical people, will fill out any of the forms, having already considered the commitment. The form is simply a final hurdle, and WILL be filled out by EVERY seriously interested person.

      Point: By the time someone reaches the form, they will have made the crucial decision. The form design will have little end-effect as long as it can be easily navigated, hence tabbed-through.. (I hate having to mouse-click to each box on some websites, especially when using a non-Explorer browser)

      That said, I do like the form layout that is depicted here. But, I would NOT be deterred by the other..
      JMHO

      • Mark O'Leary

        Nov 18th, 2010

        Cant fully agree RonD. People are highly influenced by usability and up to the point at which the submit button is pressed they can still choose to not submit.

        I think your argument holds for technical users and those who know exactly what they want but most people on the web do not fit easily into this category.

        Mark

    • Gideon B

      Feb 21st, 2011

      Is there any empirical evidence to back this up? I have a very hard time believing this article…

      If this is a real effect, it is very interesting but it should have *nothing* to do with saccades or fixations. Those happen far too quickly (20-200ms) to show up on a study of form submission (5,000-60,000 ms depending on the size of the form).

  35. Tom

    Sep 16th, 2010

    Great article, I’ve noticed this kind of thing subcounsciously but never really took it into account in website designs. that needs to change.

  36. Bob Dye

    Sep 16th, 2010

    I can understand why left-aligned labels would slow people down, but it’s not as obvious to me for right-aligned labels.

    It seems that, in that case, the labels are just as close to the input field as with top-aligned labels.

  37. Chris M

    Sep 17th, 2010

    Incredibly interesting, thanks for sharing! :)

  38. Justin

    Sep 17th, 2010

    I’m not so sure it’s that simple, sadly.

    When I’ve tested forms, I’ve found that the top-aligned labels work more efficiently when the labels are familiar to the user. When the labels were less familiar the users seemed to prefer the horizontally-aligned labels.

    My take on this was that when the user had to read, rather than scan or recognise the label their eye was expecting to move horizontally along the screen as they read.

    You’re right to say consider their use – when the form is full of the usual suspects it does help, but I’d be more wary in applying it to all situations.

  39. Maria White

    Sep 17th, 2010

    yea nice Work :D

  40. Sjors

    Sep 21st, 2010

    If the form contents many fields putting the labels on top of the forms can double the form length from one to two pages, in that case it might be worth it to just keep them on the left

  41. Mike

    Sep 21st, 2010

    I am sympathetic to your argument but you start your article with ‘proven to be faster and easier’. I would be very interested in seeing the empirical work on this and the details of the study. How was it proven? That would be an interesting article. Your logic is pretty sound but some of the other comments have punched some holes. Citing a study would help illustrate where intuition and logic are the right way to go and where our intuition leads us astray.

    • Marcus Tucker

      Nov 9th, 2010

      I concur – it certainly sounds plausible but the claim needs more substance / empirical evidence to back it up…

    • Tony

      Feb 21st, 2011

      I was thinking the same thing. I’d love to see some studies on this. Would have been easy to drop a link in at the top.

  42. stuntmen

    Sep 22nd, 2010

    Fantastic thing,belief inside putting this specific contemplation! “That’s openly one amazing column. Gratitude for any worthy information and insights you have so provided here. Keep it up!”

  43. njmehta

    Sep 23rd, 2010

    interesting points on form fields alignment

  44. njmehta

    Sep 26th, 2010

    The way you align your labels with your form fields can affect how easy it is for users to fill out the form.

  45. Pat Thomas

    Sep 27th, 2010

    Great information. I’ve put together many forms for clients and never thought of the label layout before, but I have a note on my wall now and will share you post with my clients on future form work.
    Thanks

  46. [...] things can mean a lot, even in website design.  According to this post at UX Movement, top aligned labels on form fields need half as many eye movements as those aligned to the left. [...]

  47. Raina Petesic

    Sep 30th, 2010

    You should, can you PM me and inform me couple of a lot more thinks about this, I’m really enthusiast of your respective blog..
    .will get solved properly asap.”

  48. Marc

    Sep 30th, 2010

    Something I never consciously thought about til reading this. Thanks for bring something so simple, yet important, to my attention.

    I appreciate the insight.

  49. Kumaresan

    Oct 1st, 2010

    Some times, this may give users a feel of filling lengthy form! which will be less in other case.

  50. Theraisa K

    Oct 1st, 2010

    I never knew what a big difference perception could make in alignment of the form fields. Thanks for the insight. I will definitely be re-aligning my own forms to come across as simpler and quicker.

  51. Elizabeth

    Oct 2nd, 2010

    I am certainly going to change this on my website redesign.

    The other thing that makes it easier to read is lower case. Too
    Many Upper Case Letters Make One’s Eyeball Go Up And Down – And It Becomes Tiring And Annoying To Read.

  52. Michael Stevens

    Oct 4th, 2010

    I wonder how accurate this is based on the length of the form though. Example, on a checkout page the longer the form the more likely the customer is to bounce or get scared off, so condensing the form into left alignment seems like a good response there, however on shorter forms where there are usually no more then four or five fields I would completely agree with this top aligned format, any thoughts on that?

  53. Jestep

    Oct 4th, 2010

    We did some testing on this and the best we got with the top aligned forms was something like a -40% conversion rate over side-by-side.

    While I don’t argue with the speed that it may take to fill out a form, I do have to seriously question whether this increased efficiency results in increased conversions. Traditionally, this is something that can be counted on to some degree, but is certainly wasn’t the situation for us in this case. I would definitely love to see others’ A-B testing on these 2 form layout schemas.

  54. Jonathan

    Oct 8th, 2010

    Very interesting. Never thought about it. Thanks for sharing.

  55. Rein Baarsma

    Oct 12th, 2010

    You should consider changing your “Leave a reply” form ;)

    Great post. It starts me thinking if there is really no more disadvantages to this, but I can’t really come up with something solid yet. I love a good post that starts me thinking ;)

  56. Rich Carpenter

    Oct 15th, 2010

    Good points made. Field separation is key here, though. If the fields are too close together, the user can become easily confused as to which label goes with which field once they get into the middle of the set.

    Good post.

  57. Zoe @ Bridesmaids Direct

    Oct 18th, 2010

    An interesting observation. The main thing is to keep the number of questions on the form to the absolute minimum as it’s form length that is the biggest turn off.

  58. Tom

    Oct 20th, 2010

    Why does your comment system have the field names on the right of the input box then?

  59. James

    Oct 22nd, 2010

    very interesting study, I truly hate all the forms, but it seems to be working this way as described

  60. Adam Farson

    Oct 22nd, 2010

    This totally makes sense. I never thought of that before. Just to think of all the seconds I’ve wasted filling out silly forms with the left or right aligned text. Great post. I’ll be using this in my next forms project.

  61. Del

    Oct 26th, 2010

    Hmm these comment labels are aligned to the right…

    Left aligned labels have made it to date due to the fixation of vertical scroll. On the other hand labels at the top do make it easier to layout.

  62. Die Webagentur

    Nov 1st, 2010

    Great graphic, thanks. Don’t even need to read it :-)

  63. laer sprog

    Nov 3rd, 2010

    Straight to the point and written well, ty for the info

  64. HSekhon

    Nov 4th, 2010

    Very interesting indeed. I guess this explains it all for us DIY kind of developers with little experience with UX design. This fixes my dilemma, “how to get better conversions”, with the rego form being one of the fences to bring the customer over. Thanks for sharing!

  65. Web design studio

    Nov 6th, 2010

    Sounds good, however, I would be interested to see some data to back this up. And not just speed, but actual conversion data to show that one form converts better than the other. This would be a true measure and support your statements. Great opportunity for google website optimizer and some A/B testing.

  66. Dan Huddart

    Nov 8th, 2010

    Great insight but has this been proven yet? This would be a relatively simple A/B test

    • anthony

      Nov 8th, 2010

      This has been proven already. A simple google search will bring up the research or you can browse back to the earlier comments where people have linked to the research. And if you’re still not convinced, do your own research.

  67. Elliott the web design guy

    Nov 9th, 2010

    Such a simple but effective tip, I used to have a form on my website that had about 20 input field, I soon realised it was to much as each submission was only 25% complete so another tip would be to keep your form simple or use a step process that leads you to another form each only having 3/4 questions per form.

  68. Dan Stephenson

    Nov 9th, 2010

    Great example.. Yet you chose to put the examples side by side instead of inline… i wonder if people are too habitualised to this method by now

  69. Dave

    Nov 9th, 2010

    Another reason is that when viewing forms on mobile devices (iPhone from experience, but likely others as well), when you click on a form field, it zooms to the box, with the left edge of the box moving to the left edge of the screen, so any label to the left is not visible without having to scroll across every time you move to a new field. Incredibly annoying!

  70. Rodrigo

    Nov 12th, 2010

    Very good example. Something simple but very useful when it comes to user experience.

Leave a Comment