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:
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.
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?
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.
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
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)
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.
> 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.
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
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.
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.
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?
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:
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.
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...
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.
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.
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.
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?"
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.
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.
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)
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...
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.)
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.
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.
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.