Why Users Fill Out Forms Faster With Top Aligned Labels | Hacker News Reader

Why Users Fill Out Forms Faster With Top Aligned Labels

uxmovement.com

182 pointsUXMovement63 comments

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.

Unfortunately, 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=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...

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

He also discusses using inline labels on his blog: http://www.lukew.com/ff/entry.asp?687

About 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 )

What you are asking for is for the research to tell you how to think and to validate the idea for you. That's somebody else's work, not yours. So you are wanting them to think for you, instead of thinking about the idea on your own. That's not critical thinking.

Critical thinking involves using your own mind to think about an idea without research. Not many people can do this. Ideas are presented all the time. You either agree or disagree. If you are curious for evidence, then you do the research yourself. But don't agree or disagree on the basis that no research is presented, or on the basis that lots of research is presented. Either way is not critical thinking.

Comments that detract value or are off-topic are deleted. You can still disagree and add value, but unfortunately your motive so far has only been to detract value, which is professionally disappointing.

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

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.

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

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.

It's common here because it's important. This article was not reporting on a study with facts, they are proffering advice that they do not follow. I don't care why they didn't follow it, if you had time to make pretty graphics you have time to tweak and test the CSS on your site. Nor is this breaking news that the public needs to know at 3:48pm on Wednesday rather than 6pm on Friday.

Sometimes they are actually written well enough or are so misleading that you don't even notice these things. I went to this article looking for affirmation of my own opinion (I happen to agree with the headline) and thanks to confirmation bias did not notice the comment form, and might have even bookmarked it or sent it along. Thankfully someone saved me a future embarrassment by pointing out that it's worthless as evidence, which is a large part of why I read the HN comments...

Dieterrams, thank you. What you said is exactly right. The reason the comment form is the way it is is because I could not find the right css code to change it, as the site is a WP theme buried in code.

However, this is completely irrelevant to the idea in the article and does not take any merit off of it whatsoever. If you cannot judge an idea for the idea itself, what chance do you have at learning anything from anything you read?

"For instance, the iPhone puts the labels inline with the form element."

The 'placeholder' text is a new attribute of HTML5. It allows you to specify the 'inline text'. It's suppored in modern browsers.

Reference: http://diveintohtml5.org/forms.html

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.

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

At 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).

What 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)

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

I love one-click whenever I'm after something.

The worst approach ever was on a forum I stumbled upon. I read a thread I felt I could contribute to, but I had to subscribe. You know, the we-have-sent-you-a-confirmation-mail thing. After having confirmed - which is an hassle in itself - I discovered that my membership had to be approved! Should I have bookmarked the thread to post afterward? They serious?

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.

This is tricking people. At least, I feel tricked whenever I'm made believing I just have to provide an email and a password. I usually leave the site unless it is compelling. Being able to know beforehand every field I'll have to fill is paramount.

Thanks for the feedback. Would your feel "compelling" if the website provides you some kind of information for additional information? For example credit or voucher in an ecommerce website. And the additional info is totally optional, meaning you could still use every function of the website without filling in those information.

Yes. I don't think I'm alone in feeling more comfortable when I know what you are looking to get from me. Moreover, whatever works to lessen the cognitive load whenever I fill forms is welcome (for instance; optional fields, choice-based answers over free form ones when appropriate (albeit _optional_ comments are welcome too), delayed filling, etc.).

Problem is, we have to subscribe to a heap of websites, and so having to provide much information every time gets old, even when such questions are legitimate. I think websites should strive to balance between what they need (information) and what the user is looking for (a service). At registration time, I don't know how much value you will provide me, and still you want me to take the hassle to register. So to speak, you should sell me the need to provide you information. For instance, I liked when I visited Ebay the first time and it allowed me to watch items _without having to register at all_. Ebay proved itself useful before asking me to register (of course, later I was _eager_ to). Ryanair offers to remember your form, _without you having to register_. OTOH, I hate whenever I'm asked to register to an e-commerce website just to order one item, while I'm unlikely to visit that site again.

Have a nice day.

Thanks for the extensive feedback (sorry didn't see it earlier), it's really helpful in thinking about how to design the form :)

> 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

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

I feel you on the multiple page thing. It increases abandonment like crazy. Here's our first hand experience:

We used to have a 5-stage ad campaign creation process in our SaaS self-service ad manager. Once we started measuring cart abandonment rates, we noticed that users dropped off after the first 2 steps. It gets even worse if you require users to sign-in first

The solution: 1. We replaced it with a 1-page process 2. This is the crucial bit. We allowed users to create their ads BEFORE signing up.

By seeing a live preview of their ads, we engage them early and dramatically improve conversion rates.

The morale of the story is that keep the steps short (even if the form is long) and provide instant gratification.

Here's a link to the form on our demo site : http://demo.trafficspaces.com/advertise/cart/new/?adspid=153...

We have a similar experience with our self-service advertising system: http://www.adperium.com/start

What we did to increase the conversion rate:

1. Use one long form instead of a "wizard" containing multiple steps. Advanced options are hidden by default to keep the form manageable

2. Show the checkout buttons on the same page, so users see the available payment options right away

3. Remove the sign-up step. We simply send the users a secure URL to the email address they provide in the checkout process

4. Use an informative landing page (http://www.adperium.com/advertise) including a demo link, instead of linking directly to the campaign creation page

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--]

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.

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.

any evidence for these claims?

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.

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

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

If the whole form were horizontal, I'd see how that makes sense.

But the entire form is vertical.

With labels on the left, your eye has to scan down the form to the next field, over to the label, then back to the field. With labels above, it just has to scan straight down the form.

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.

A good UI solution would be to colour rows alternately so that the association is clear.

Possibly, but it would create additional mental friction for users. Colors generally tend to have meaning in interfaces. "Are all of the blue ones related?"

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.

that one ?

http://www.slideshare.net/lukew/web-form-design-best-practic...

Here's a very interesting article from CX Partners (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.

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

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.

The oldest study I remember about labels is http://www.uxmatters.com/mt/archives/2006/07/label-placement...

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.

Thank you!

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.

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)

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

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

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

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

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.

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

http://imgur.com/n1KoJ

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?)

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.

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

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

> twice as less

Nice.

Also easier to CSSize

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

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.

Reply on news.ycombinator.com