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.<p>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.<p>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?<p>Interestingly, they don't follow their own advice. The comment form after the article uses right-aligned labels.
A side note:<p><i>> You can also break the form up into multiple pages to make each part of the form shorter</i><p>I <i>dread</i> 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.
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.<p>One approach I normally use is to have the labels horizontally placed, but right aligned so that they "stick" to the input field:<p><pre><code> [-----myLabelA][textboxA----]
[---myLabelABC][textboxABC--]
</code></pre>
as opposed to:<p><pre><code> [myLabelA-----][textboxA----]
[myLabelABC---][textboxABC--]</code></pre>
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.<p>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.<p>Up down motion takes longer.<p>Additionally the visual span is sufficient for someone to read the label, and see the box at the same time.<p>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.<p>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.
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 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.<p>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, <a href="http://slidesha.re/8A3pI" rel="nofollow">http://slidesha.re/8A3pI</a>. It has other details such as breaking up the page, alignment, spacing, etc...
How about labels <i>inside</i> the fields (as placeholder texts)? I'd think that'd be the quickest <i>and</i> most accurate attachment of text to an input (even though my aesthetic sensibility balks.)
1. It would have been good to see some quantitative numbers to back up the assertion which sounds plausible<p>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>I think</i> users <i>might</i> 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.<p>I am not a professional designer, so take with grain of salt.