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.

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

  1. canvas art

    Nov 12th, 2010

    I agree, thanks for posting this..

  2. BlueBoden

    Nov 15th, 2010

    Please note, you should use the top aligned labels, because they are better. Not because some platforms, due to their individual limits, render them better.

    I vote for top aligned labels, and will actually aim to implement them on my own sites. But i would never chose a design approach, just to make it easier for mobile users.

    We finally start to have some reliable standards, supported by browsers, then some wannabe browser hits the street, and we are back at where we started. Let the developers of those devices, clean in front of their own house!

  3. Black Rhino Solutions

    Dec 3rd, 2010

    Great observation! In this day and age simpler is better.

  4. The Source Publishing

    Dec 20th, 2010

    Thanks for the insight, always looking for ways to make the user experience a better one. Where did you get your research information for the article?

  5. Murali

    Dec 22nd, 2010

    Hi Nice Work,

    Can you give me the URL of any website using this pattern ?

  6. Pascal

    Dec 26th, 2010

    Where is your evidence for these claims? Because I don’t think your argumentation is sound. Reading a label is not a one-spot task, you read them left to right (or right to left in some languages). This means with top aligned labels your eyes have to flick left again after reading the label. With fields on the same line this is not the case, after reading the label yor eyes are right at the insertion point.

    I’m not saying your wrong, just that your argumentation is far from obviously being right. Without providing any evidence this article is just speculation.

    • Sean

      Nov 9th, 2011

      I agree that evidence should be provided, but I disagree with your counter-argument.

      You don’t read letter by letter, or even word by word, you read in small groupings depending on length. e.g. reading these sentences you probable fixate 4-5 times per line. Form labels are usually short enough to read with a fixed eye, there should be no left-to-right tracking to read, and therefore your eye is not bouncing left-to-right and back again to the field. The label and field can easily be seen and read as a single object. Try it yourself with the examples above. You eye should fix on the label centrally and not need to move to recognize where the input field is.

    • Carl

      Jul 29th, 2014

      I had the same concern as I read the presentation.

      I would like to see research measuring saccades with an eye tracker.

      We are having the same label position discussion in our shop. I like the top aligned labels when the field length is greater than the length of the label. But there arises a conflict. Fields generally should give users a sense of how much data is expected, and how much is possible. A field requiring a one or two digit entry beneath a long label just feels odd to me. For one thing, the label features a colon pointing off into “outer space.”

      In one of our projects, the developer made all of a stack of input fields the same length. That included one field for 1 or two digit numbers. That field also featured a spinner control roughly 300 pixels from the cursor (left) position.

  7. Assurance

    Jan 6th, 2011

    I think vertically aligned form elements are easier on the eyes, indeed. Good remark!

    • Hello Hello

      Feb 10th, 2011

      +1 on this. Top aligned labels only work on small forms with low context. If you have forms bigger than 3 fields or with fields depending on each other, I think left-aligned is the way to go.

  8. Luke

    Jan 12th, 2011

    Just had this discussion with a client the other day. Great article. While there are always pros and cons for left, right, top and even top bold labels, I believe the context makes it much easier to decide. Speed with accuracy is never a bad thing,right?

    http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

  9. dog beds

    Feb 13th, 2011

    I liked this article. However like many have said you have either establish yourself as the foremost expert on this subject or backup what you are saying with studies. I make tons of forms and if what you are saying is true then I want to be sure.

    Can anyone post links to studies in this?

  10. Joe Hamilton

    Feb 14th, 2011

    Great post! I will use this in all my sites from now on.

  11. Chase Adams

    Feb 18th, 2011

    What about forms where the labels are inside the input boxes?

    For once, it may make sense to think ‘inside the box’. :)

    • Eric Bieller

      May 3rd, 2011

      I actually think those are the worst. I often find myself focused in a text box having no clue what the label was since it has disappeared onFocus!

    • COballin

      May 19th, 2011

      I’ve never worked with labels inside the input fields but I have included copy that helps the user truly know what to enter and how to enter it.

      When input fields do contain copy I always make sure that if a user clicks into the input field and then clicks out without entering data, then the field returns to its default state with the “help copy” present. It’s an easy thing to over look and ESPECIALLY if you get crazy and put labels or important information inside those input fields.

      • Andrei

        Jul 21st, 2011

        Eric does have an interesting point. Perhaps the label inside the text field could align itself to the right and fade out when the user enters a value? That way, you’d see both your input and the label.

    • Mike

      Sep 22nd, 2011

      Generally speaking, labels inside input fields are bad practice and hopelessly unusable.

      Eric Bieller mentioned the most common problem with them in his comment above, but for those who employ tricks like moving the label above the field on focus, well that kind of defeats the purpose. You’re not only now adding a moving label (confusing) but you’re also just making the label appear where it should have been in the first place :-)

      I’ve seen a lot of variations in an attempt to utilise labels inside the fields, but exactly all of them are nowhere near as usable as a simple top aligned label.

      Keep it simple. Ask yourself – is it enhancing or degrading the user experience?

  12. Kate

    Feb 21st, 2011

    Very interesting, I can see how this would work better.
    Do you mind if I copy and paste this to my blog? Of course, you would get all the credit along with links to your site.

    Please let me know.

    I have just begin to follow you on Twitter because I appreciate your “geekiness”! It is an awesome title – Geeky. I learn the most from those like you who spend time, more time, and still MORE time learning everything you can! So….. thank you!
    just
    Kate

  13. Mary

    Mar 27th, 2011

    I never have understood the attraction to left alignment of labels when it often introduces big gaps of white space. It breaks the notion of saccades – that eye movement of 36 characters then pause. The eye pauses abruptly due to one label being long and the other labels being short introducing large gaps. I have always advocated right aligned labels or top, but you know there are those die hard “if’s left, it’s always left because that is the way we have always done it”. Right, wrong – obstinacy is wrong. And yes I did some testing on smart phones recently and left aligned labels do NOT work when a user zooms in, and 90% of the users I tested zoomed in only to find they could not find the label. Okay they were a diverse user set from 30 to 50 of professionals.

    • seo agencies

      Aug 15th, 2011

      we use left aligned on our site to cut down on the size of the form. Top aligned, the form would take up the whole screen. But I think I’ll a/b test the http://seoagencies.com landing page to see if it improves the conversions.

  14. Clean Design

    Apr 28th, 2011

    Top-aligned labels are the way to go especially if you want to translate the website into other languages. The same text in another language might be shorter or longer and some languages are right-to-left instead of left-to-right. Top-aligned solves both problems. Plus, it becomes possible to add descriptions below each text box in case the user really needs to know what they are filling in.

    • Robin

      Oct 21st, 2011

      Wouldn’t have thought of internationalization here, good point.

  15. ux ninja

    May 5th, 2011

    So if you used top aligned labels…is there a rule to stacking them? Can/should you have form fields going 2 or 3 across or should you just have 1 input field per line?

  16. Greg Wilson

    May 12th, 2011

    That’s true that top aligned labels are better than left or right ones. They really make filling out forms quicker and easier. And there is no doubt that when users find filling out forms difficult or complicated they simply decide to abandon it. Designers should be careful what forms to choose.

  17. VHF

    Jun 3rd, 2011

    I already new to put my forms into a single column, but I never considered the labels. Very useful …

  18. craig

    Jun 12th, 2011

    Hi – Luke Wroblewski (www.lukew.com) has been talking about this for a few years – he even has the eye tracking data to back this up.

    The ‘top align/right align/left align’ issues are all covered on articles on his site.

  19. steve B

    Jun 14th, 2011

    Nice Article. Never thought about visual fixations in designing a form. Makes sense

  20. Greg

    Jul 15th, 2011

    That’s how we do it – completely by accident though!

    Although we seem to align radio buttons horizontally AND vertically depending on what the answers are….for instance

    Rate it:
    * 1 * 2 * 3 * 4 * 5

    Chose a theme
    * Standard
    * Custom

  21. Web Design

    Jul 20th, 2011

    Very good points and taking this into consideration with future web and form designs.

  22. Michael de Jong

    Jul 21st, 2011

    Only drawback of top aligned labels is that they can be interpreted by users as bottom aligned labels. There should always be enough space between the input field above and the label beneath to prevent this.

  23. Manuel

    Jul 30th, 2011

    What’s the scientific basis to prove the difference in the number of fixations the user has to do in both types of forms?

    It makes sense for a left-aligned label to require more effort since there’s a visual gap between the actual label and the field, but what about right-aligned ones? The user has to traverse the title of the label, to read it, at which point his eyes will be right at the beginning of the field. Even if we go by the notion that users skim through text of the web, they still read the beginning and the end of words to understand them.

    Furthermore, user do read in lines. Isn’t it actually more effort to read a label, then having to move the eyes back to the beginning of the form? I’m skeptical as to whether top aligned design is really only a single fixation instead of two.

  24. joshbro90

    Jul 31st, 2011

    Very simple change to make, something i had never considered, also just as relevant to Forms as part of desktop applications

  25. Vince Delmonte

    Sep 15th, 2011

    I couldn’t agree more. I’ve filled out so many forms where I start thinking, “who the heck designed this?”. Great stuff. I’m glad somebody stepped up and said something about this!

  26. Jason

    Oct 4th, 2011

    First of all isn’t this just a summary of the article Luke W wrote back in 2007? Second of all it’s complete nonsense. The difference in how quickly a user can fill out a form comes from cognitive processing not visual fixations and saccadic eye movements. If you are designing web forms and your primary goal is for users to fill them out as quickly as possible, your form fields should be right aligned.

    • Chris

      Oct 25th, 2011

      Agreed.

      Even if we accept the article’s premise, top-aligned labels make it vastly harder for a user to scan the labels. With left-aligned labels everything in the left ‘column’ is a title. With top-aligned forms a column will contain;

      The labels
      Different form elements (text entry, drop down menu, etc.)

      More time required to hunt out helpful labels = less speed in form completion.

  27. portique bois

    Nov 27th, 2011

    Top-aligned labels are the way to go especially if you want to translate the website into other languages. The same text in another language might be shorter or longer and some languages are right-to-left instead of left-to-right. Top-aligned solves both problems. Plus, it becomes possible to add descriptions below each text box in case the user really needs to know what they are filling in.

  28. karl

    Dec 6th, 2011

    I never thought of it this way. Very profound. I’ll be thinking of this every time I create a form. Thanks for sharing!

  29. CMS Buffet

    Dec 7th, 2011

    Looks convincing. We switched one of our forms. Let’s wait and see…

  30. Sommier à lattes

    Dec 21st, 2011

    I already new to put my forms into a single column, but I never considered the labels. Very useful …

  31. Er1c

    Dec 29th, 2011

    I find it very funny that the comment area does not use the format you provide.

    As a developer since 1995 specializing in mobile and international sites I can tell you that vertically aligned forms work on all mobile phones, and they are the only one that always work on all mobile phones.

    Translation is also reverent since sometimes translation greatly increases or decreases that amount of space a phrase takes up horizontally.

    I recently had to translate a website into Simplified Chinese and it had a bunch of radio buttons in table columns … it was a nightmare and required complete reformatting.

  32. Vince Delmonte

    Dec 31st, 2011

    Excellent analysis–I had never seen labels broken down into number of visual fixations before. Great stuff!

  33. Lit d appoint

    Apr 4th, 2012

    I find it very funny that the comment area does not use the format you provide.
    As a developer since 1995 specializing in mobile and international sites I can tell you that vertically aligned forms work on all mobile phones, and they are the only one that always work on all mobile phones.
    Translation is also reverent since sometimes translation greatly increases or decreases that amount of space a phrase takes up horizontally.
    I recently had to translate a website into Simplified Chinese and it had a bunch of radio buttons in table columns … it was a nightmare and required complete reformatting.

  34. Tondeuse barbe

    Apr 5th, 2012

    First of all isn’t this just a summary of the article Luke W wrote back in 2007? Second of all it’s complete nonsense. The difference in how quickly a user can fill out a form comes from cognitive processing not visual fixations and saccadic eye movements. If you are designing web forms and your primary goal is for users to fill them out as quickly as possible, your form fields should be right aligned.

    • David Bowen

      Jun 6th, 2012

      Well, since you say it’s nonsense, it must be true. Except it’s not. Read Luke’s book. He lays out the evidence that top alignment is superior very clearly.

  35. Brian Hildman

    Dec 5th, 2012

    I actually think Walmart.com was doing some interesting work with form fields. They put the labels on the left side, but it was all encapsulated in the form field nicely and minimized scrolling. Scrolling is a bit more problematic with form fields since it can make editing/ or reviewing difficult.

  36. peter

    Nov 8th, 2013

    Thanks for the Good Article :)

  37. victor lupan

    Nov 15th, 2013

    top aligned labels would not take so much space if you use labels within input text field, that will save space without the need in reducing labels font size

  38. Madpixl

    Dec 10th, 2013

    I wish more heads down designers would promote vertical UIs designed for portrait display for just this reason. Data entry forms could take advantage of single column, top labels with less scrolling.

    I’m sure there are plenty of businesses out there who have adapted, but it definitely could benefit a larger audience.

  39. Dalinda aka

    Feb 19th, 2014

    I think vertically aligned form elements are easier on the eyes, indeed. Good remark!

  40. Adam

    Apr 3rd, 2014

    Thanks for the insight, always looking for ways to make the user experience a better one. Where did you get your research information for the article?

Leave a Comment