Via UXMatters, apparently, this is the best way to structure a form for usability:
It includes:
-
NOT using "bolded" labels
-
Using labels on top of the form fields
-
Rejecting the common idea of right aligned, left-of-field labels
and these are their conclusions:
Placing a label above an input field works better in most cases, because users aren’t forced to look separately at the label and the input field. Be careful to visually separate the label for the next input field from the previous input field.
and
Reading bold labels is a little bit more difficult for users, so it’s preferable to use plain text labels. However, when using bold labels, you might want to style the input fields not to have heavy borders.
This is one of those studies that really flies in the face of convention, and I'm a guy who tends to think of usability in terms of convention, i.e. the more conventional, the more usable. However, I am impressed with the study - the measured eyetracking with real users on real forms, tested the time between reading the labels and filling out the fields and really did a bang up job all around. Reading the full study and comments is worthwhile (even with that horrible purple background on the page).
What do you think? Do we have a revolution in form usability, or is this something that every website needs to test individually to measure results?
That study is forgetting a really big part about ease of form use....line spacing. I'll take labels to the left of forms in well spaced elements over labels above forms in poorly spaced (as their example was) forms.
I asked them, and I'll ask this group, too....wonder why they didn't use the same label names in their test? Maybe it's just the illustrations for the blog entry, but you'd think you'd want to keep that consistent when testing?
I'm getting a 404 for the study...
Is that link working for any of you now?
Their whole site appears to be down temporarily. Maybe they couldn't handle all the SEOmoz traffic :)
wow great stuff! I think I'll have to rethink everything now! keep it up!
LoL. They got Slashdotted from SEOMoz. Some sites might need a forewarning before posting about their findings.
I can't stand forms done the way this study suggests. Maybe too much time spent actually building forms, though.
Ultimately, I suppose you have to test (after you first decide if your simple, 3-field form is worth the effort). And in the end, no matter which way you choose, you can still end up with poor usability if you don't do it well.
Wrong image in this post, the labels should not be bolded.
Good article, I'll send it to my colleagues.
Thanks, Emil - got that fixed up.
This is something that every website needs to test individually to measure results. BUT at least they give you some solid info to use is in your baseline tests as key assumptions.
When it comes to forms, ads, or designs... test, test, and retest. Different markets, offers, and market segements often react differently to different messages and designs.
Wow. Initially I thought this seemed a bit of a useless study but when I clicked through and looked at the forms it did seem a lot easier to read some than others.
Whether it really matters for a simple form is another thing.
SearchStudent said it best - it needs to be tested.
After reading the post, I went back and looked a few of the forms that AWS has designed recently. When looking at some of the pages, I thought to myself, "it might shave off 200ms for the user's eye, but it also might make the page look less attractive."
There still needs to be a balance between design and usability, in my opinion.
I guess it's not really up to us to decide which one is more important. As always, you just have to throw it out there and let the stats speak for themselves.
Wow, looks like I am doing it all wrong. Need to rethink my forms.
Cool study. Great find Rand. Thanks.
Testing forms can be one of the most beneficial ways to increase conversion. Alas, it is also usually the most difficult since there is so much involved on the back-end to change field locations, sizes, labels and interface. We've actually started doing hosted platforms for form and checkout optimization with clients since it's faster and easier to go around IT to create and test new flows from scratch in a marketer controlled environment and interface with the clients database through an API than to perform tests in the clients native environment.
This makes sense. One way to make things easy for people is to employ behaviours and formats that are well developed. We've all grown up filling in forms offline that look a lot like this, so it is likely the reason it works well online too is that we are suckers for things that are familiar.