9 ms·
Why Users Fill Out Forms Faster With Top Aligned Labels
- timcederman 16y agoWithout actual data, this remains just a hypothesis. I find top aligned labels clunky because it makes me less sure about the field/name association.
- xtacy 16y agoA good UI solution would be to colour rows alternately so that the association is clear.
- harpastum 16y agoPossibly, but it would create additional mental friction for users. Colors generally tend to have meaning in interfaces. "Are all of the blue ones related?"
- Hovertruck 16y agoI 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 16y agothat one ? http://www.slideshare.net/lukew/web-form-design-best-practices http://www.slideshare.net/lukew/web-form-design-best-practic...
- pbogdan 16y agoHere's a very interesting article from CX Partners (http://www.cxpartners.co.uk/cxinsights/web_forms_design_guidelines_an_eyetracking_study.htm http://www.cxpartners.co.uk/cxinsights/web_forms_design_guid...) which analyses different form layouts, labels placement etc. on few popular websites (Google, Yahoo, etc.) in which they used eye-tracking to find the flaws in the forms design and to identify common usage patterns which users follow.
- drcode 16y agoThis 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)
- amirmc 16y agoA 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.
- inerte 16y agoSometimes forms have to be long, because you need lots of information. A better approach would be to display some section tabs at the top of the form, saying how much you have filled already, or red/green (or icon) if any information is still needed. For example, when filling a car insurance form, a square saying "Profile (12/18)" and to the right of it another one saying "Car (07/20)", or whatever the breakdown needs to be.
- amirmc 16y agoAt the very least, if I'm told that there are 50 questions spread over 10 pages and that 10 will require free-text answers, I'll be more mentally prepared for the onslaught. I hate getting to page 'x' only to find out that I have to start writing essays (and there's no way to look ahead either). Most forms I come across are terrible and frequently lose my info. Only Wufoo and GoogleDocs have been tolerable (and actually quite friendly at times).
- d0m 16y agoWhat I hate more than that is to be asked my credit card on the fourth step when I didn't even know I needed to pay to download that product (To try a trial for example)
- duck 16y agoI know I read in several places that multiple page forms increase the abandonment rate and I think that is the number one reason for the one-click technology that Amazon uses.
- lelele 16y ago
- revetkn 16y agoDoes 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 16y agoThe oldest study I remember about labels is http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php http://www.uxmatters.com/mt/archives/2006/07/label-placement...
- jonny_noog 16y agoI 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.
- revetkn 16y agoThank you!
- deleted 16y ago[deleted]
- twoshortwords 16y agoThis 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.
- vitovito 16y agoUnfortunately, I've found articles on this site to be poorly articulated opinion pieces, written from broken premises and with incorrect information, rather than actual UX practice documentation. Comments that disagree and point out errors are routinely deleted; a response to the one comment of mine that has remained live included the line, "this is a blog, not a science lab." One of the differentiators of UX from art is that it can be tested, so I find the author's attitude professionally disappointing. LukeW's seminal book, "Web Form Design" has an entire chapter (19 pages!) about label placement. Some notes: This paper is cited as discussing a major eBay form design, explaining their methodology: http://scholar.google.com/scholar?cluster=10660557111773645779 http://scholar.google.com/scholar?cluster=106605571117736457... This article is cited as having done the eye-tracking research for label placement: http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php http://www.uxmatters.com/mt/archives/2006/07/label-placement... The chapter starts out with the note that "it depends" for your specific usage. A summary of the results are available on his blog: http://www.lukew.com/ff/entry.asp?504 http://www.lukew.com/ff/entry.asp?504 He also discusses using inline labels on his blog: http://www.lukew.com/ff/entry.asp?687 http://www.lukew.com/ff/entry.asp?687
- harrybr 16y agoAbout 30 seconds into reading the article, I came to roughly the same conclusions as you. No references to primary research. Poor. The sad thing is that many people accept what they read in blog posts that are widely retweeted. Critical thinking is such an important skill, I'm surprised how many people don't have it. ( http://en.wikipedia.org/wiki/Critical_thinking http://en.wikipedia.org/wiki/Critical_thinking )
- ars 16y agoThis 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 16y agoany evidence for these claims?
- ars 16y agoThis article http://www.iovs.org/cgi/content/full/50/3/1158 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 http://elmar-inc.com/Papers/Clinical/SaccadesInChildren.pdf has a graph that clearly shows that horizontal saccades are faster.
- Bluem00 16y agoThe time taken to fill the form is dominated by the time it takes a user to understand the field label and fill the input box. I think UX people use the term 'cognitive load' to describe the effort taken to understand. This paper presents research that shows that vertically aligned labels cause less cognitive load on users, resulting in faster form entry: http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php http://www.uxmatters.com/mt/archives/2006/07/label-placement...
- lelele 16y ago> This is not correct, the eye is optimized for side to side motion, and does it really really fast. > Up down motion takes longer. That's why upper labels win. You are able to scan the kind of data is required faster.
- presidentender 16y agoYou can also put your horizontally-aligned labels closer to the fields to which they correspond.
- MetallicCloud 16y agoExactly 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.
- weixiyen 16y agoThis kind of BS is why I quit IXDA. Hypothesis with no convincing evidence either way being passed around as fact.
- baby 16y agoAlso easier to CSSize
- humblepie 16y agoHaha, exactly. Floating labels...forget it.
- rwaliany 16y agoInteresting, I tweeted about this last night. Luke Wroblewski had an amazing slideshare on this topic, http://slidesha.re/8A3pI http://slidesha.re/8A3pI. It has other details such as breaking up the page, alignment, spacing, etc...
- baddox 16y ago> twice as less Nice.
- DrewHintz 16y agohttp://imgur.com/n1KoJ http://imgur.com/n1KoJ
- harrybr 16y agoI 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.
- btilly 16y agoPersonally 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.
- raghus 16y ago1. 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?)
- RyanMcGreal 16y agoWould the difficulty be ameliorated by right-justifying the form field labels and moving them closer to the inputs?
- mkramlich 16y agoI 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.
- trurl123 16y agoIf you use right alignment for labels, you can save space and your eyes will not jump from left to right!
- derefr 16y agoHow 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.)
- deleted 16y ago[deleted]
- kentosi 16y agoI 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--]
- MichaelApproved 16y agoShould 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 16y agoHaving the labels above the input field can make localization easier since it allows the label text to grow or shrink without affecting layout.
- fauigerzigerk 16y agoI doubt the speed argument. Typing takes way longer than a few eye movements anyway.