Form layout UX study

[ralph.m]

Thought this was an interesting study, though there seem to be lots of similar ones:

Label Placement in Forms :: UXmatters

Interesting that people seem to like drop down list boxes in forms. But this last recommendation surprised me a bit:

Label placement for drop-down list boxes—To ensure users are immediately aware of what you’re asking for, instead of using a separate label, make the default value for a drop-down list box the label. This will work for very long lists of items, because a user already has the purpose of the input field in mind before the default value disappears.

Do others agree with that, or is a label important? How is accessibility affected by not having a label?

[xhtmlcoder]

It's probably best having both or at least a LABEL because if like me you have short-term memory faults. You'd probably forget what the dropdown said on an unfamiliar form and have to find your way back to the correct point or accidentally select the wrong item.

[Stevie D]

Do others agree with that, or is a label important? How is accessibility affected by not having a label?

I usually have a label outside the drop-down and then have the first entry as something like '-- Please select --'. That way the label is always there even after people have chosen their option, there is no option chosen by default, and it is obvious that they need to take action on that form element.

[ralph.m]

I usually have a label outside the drop-down and then have the first entry as something like '-- Please select --'. That way the label is always there even after people have chosen their option, there is no option chosen by default, and it is obvious that they need to take action on that form element.

Yes, that's normally what I do too. I was surprised to read the article suggesting not to have a label.

[zbing]

I've attended a workshop on the subject "Label placement in forms" and after about 3 long hours the conclusion was that it is much more important that the label text is well written (concise and helpful) rather than where you place the labels.

One example was a form that was tested in denmark, i think, where it was found that the best placement for the labels was below the fields, as this is the most common placement in paper forms.

So, culture plays an immense role here...

[ralph.m]

it was found that the best placement for the labels was below the fields, as this is the most common placement in paper forms.

Huh, is it? That's an interesting finding. I guess as long as the label is properly associated with the input then screen readers should be ok.

But the article I originally linked to was suggesting that there need not be a label at all on a select list, which is what was surprising me most. Sounds like everyone so far favors a label.

[deathshadow60]

Given that dropdown lists in 99% of the cases where people use them on websites JUST PISS ME OFF, and usually result in my screaming at the display "OH FOR {expletive omitted} SAKE, JUST LET ME TYPE THE BLASTED THING IN"

So far as the use of SELECT's go (interesting they don't call it by it's PROPER NAME)... not so much.

But I do agree that the LABEL over the INPUT is usually better from a usability standpoint, but only on short forms. They're research doesn't look to have tested longer forms -- as a rule of thumb (pulling an observation out of my backside) I've found that if a form 'looks too tall' people are less likely to fill it out -- so while if you have the whopping four inputs and one select of their study, that will work well... but you have twenty inputs putting the label over will make it "too tall" and scare people away.

Though that's my own observations -- no data to back that up, it's just my gut reaction. Sometimes you gotta go with your gut.

Tracking studies like these are also flawed to an extent as they use "heat tracking"/"eye tracking" -- where is the user spending the most time looking; but as always omit how much time it takes for the user to fill out the form -- which they DO have by the number of 'steps' and the size of the circles... If you'll notice, there may have been more movement around the display on the right aligned single line versions, but it appears to have taken two less steps and has a lot less giant circles.

Something to watch for when such "studies" are used to promote a viewpoint; often they omit or fail to mention relevant data that might contradict their conclusions -- which is why stuff like this is not science. In science, you don't start from a conclusion then make the data fit it. Amongst those who've studied marketing and propaganda, the term is "card stacking".

[adh32]

Interesting topic.

Having read some of those articles that assert that the labels should be in a certain place, I think that they are too prescriptive and selective. As deathshadow pointed out, they tend to skip over issues of context (form size, space, and page layout). They don't appear to have asked people, either: otherwise, the answer might well be less clear cut. OK, so I've never done professional A/B testing or focus groups, but when I designed my own form, I did a straw poll of people who I know and got different answers. A lot of people went with my preference of label placement to the left of each input, which didn't surprise me (although I admit to bias): most of the world reads from left to right, after all; so to my mind, it just seems easier to follow than a narrow column of elements.

Regarding your reason for posting, ralph.m, I too am a bit surprised by that idea. I want a label with a select as much as with any other input. I suppose that it would be moderately OK if the purpose is clear, but would screen reader users find it annoying?

[Stomme poes]

I've read many many studies of both eyetracking and just users filling out forms. (And finally did a few of my own!!! Exciting!!)

Do others agree with that, or is a label important? How is accessibility affected by not having a label?

I always have a label, with one exception: a single question like a date or a card number which has been artificially separated into multiple inputs (and then lately I've still had a label for screen reader/text browser users, just hidden with CSS since the main label is obvious).

Without a label, you *could* get away with a select dropdown if the default option made sense... but that is relying on context a LOT. And if you use StevieD's proposal without a label, "Please Select" means nothing. So the user has to scroll around through all the options to figure out what to choose.

I want a label with a select as much as with any other input. I suppose that it would be moderately OK if the purpose is clear, but would screen reader users find it annoying?

It would need to be really, really clear. If the user (screen reader or not) has to flip through the options before knowing what exactly's being asked, then yes, lack of label should be pretty annoying.
I ran into a form on some web designer's page, where Javascript filled in the inputs with the "label text". Which meant I got 4 empty, unlabeled inputs. Which was totally insane/retarded/nuts. But you know, the design looked good and you can bet if the guy had asked a variety of people which LOOKED BETTER the majority prolly would have chosen the version without labels, because it DOES look cleaner. Just not easier to use. Esp even after allowing Javascript, you filled them in, and then, whoops, what was that one supposed to have again? Have to remove the entry and refresh the page to see the "label" again? WTF srlsy.

I usually have a label outside the drop-down and then have the first entry as something like '-- Please select --'. That way the label is always there even after people have chosen their option, there is no option chosen by default, and it is obvious that they need to take action on that form element.

The forcing of action *sounds* good, and in fact we were using it on a form field people were simply not filling out (a select drop-down for "worth of vehicle", which had 0 as default), but we ended up using Javascript to hide the worth question (as it was ONLY applicable if you answered yes to the question above it, the all-risk insurance) and the fact that it "popped out" (appeared) was enough to make people take notice. People without JS just saw the questions always (they do have a bit of extra style though).
Sometimes people go through forms much too quickly... already the bit of testing I've done myself, people don't read the labels, or skim them just enough to figure out what to put in. My testers didn't look closer until they got error messages, and they reported the messages were clear and they understood immediately why their first answers were a problem.

Having a common default set on a dropdown is good in many cases though: when we ask country (again because the back-ender is in love with selects for some reason), we select "Netherlands" while listing freaking everything, because 99.999% of the customers are Dutch, while a small few are Belgian or Luxembourgian (sp?) or something.

One example was a form that was tested in denmark, i think, where it was found that the best placement for the labels was below the fields, as this is the most common placement in paper forms.

It was Austria. Yes, it seems because paper forms were set up that way, but we have to be careful converting from print to web. Convention sometimes comes over well, and sometimes doesn't.
In the Netherlands there isn't much that's standard, so because of eyetracking studies I've started putting labels right on top, not next to.

I guess as long as the label is properly associated with the input then screen readers should be ok.

It's usually pretty ok. And some readers will even try to associate "nearby text" even when not in a label or without the for attribute, though they can easily get this wrong so don't do it : )
But then we're relying on CSS (moreso than with other form configurations I mean) so text browsers might be a concern. I generally dislike a form that doesn't make any sense in Lynx, but I suppose it depends on your intended audience and how much you care about source-order.

Given that dropdown lists in 99% of the cases where people use them on websites JUST PISS ME OFF, and usually result in my screaming at the display "OH FOR {expletive omitted} SAKE, JUST LET ME TYPE THE BLASTED THING IN"

Since I keyboard through forms, I type the first letter a LOT. Which usually works.
You'd hate our forms: most of our questions should have been either text inputs or radio buttons (lots of yes/no questions) but the backender found selects better (I think he doesn't like server-side validation, which is not a good idea).

But I do agree that the LABEL over the INPUT is usually better from a usability standpoint, but only on short forms. They're research doesn't look to have tested longer forms -- as a rule of thumb (pulling an observation out of my backside) I've found that if a form 'looks too tall' people are less likely to fill it out -- so while if you have the whopping four inputs and one select of their study, that will work well... but you have twenty inputs putting the label over will make it "too tall" and scare people away.

My bosses seem to think that too. Though I used to have labels to the left (left aligned) and this did not work better. Some people's eyes track the space in between horrible, though dots are suggested by some for tracking.
Apparently for forms like shopping carts where people are pretty familiar with what they are asked, they don't care if it's one long form or not, they fill it in. The other options are AJAX filling in more as the user goes (I'm not a fan of that really), and multiple "string the user along" form pages, which can be ok if the user is clearly shown what step they're on and how much further they have to go (many shopping carts do this).

Though a word of warning, related to what Crusty mentioned: eyetracking studies MUST be accompanied with mouse-click or tab tracking: too many quick eye-tracking studies will say something like:
Users were faster to associate labels with inputs *this* way

Faster isn't better necessarily. You need the associated behaviour: the user correctly, and without much squinting and misunderstanding, filled out the right information in the correct field without confusion.

In eyetracking, they say "users must look somewhere before they click there" which is true. But they also look in places where they don't click, don't have any intention of clicking... so you need to correlate their actual behaviour of clicking and not just "where did their eyes go". Did they eyes go all over the place because they user is confused? searching? just checking things out? People don't usually know, because these eye movements are bazillionths of a second and people don't remember everything they've seen (immediately discarded before the person is actually conscious of what they saw... lots of interesting MRI studies there).

And apparently, the studies who show selects are slower (they are, and they also have the danger of users trying to scroll the page while that select is still focussed on, which changes the value!), they often also make the information correct the first time.

Though Postel's law should apply here: if you choose text inputs for things like dates and credit card numbers, let the form allow a broad range of characters, and let the back end format and clean up and validate all at once. Also, for things like dates, if you use text inputs you can help by suggesting the format IN THE LABEL:

Birthdate (dd/mm/yyyy): ______________________

and then let the back end accept slashes, dashes, and nothing (someone's going to do 03021997, you know it).

Selects mitigate confusion with dates since you get one set of numbers that only goes to 31, a set of (written-out) month names, and a set of years.

They don't appear to have asked people, either: otherwise, the answer might well be less clear cut.

You can ask people what they think, but you can't accept what they tell you as truth like you can their actions alone:
Asking why can give you random, unrelated results and bad information. (I seriously wonder if left-handed people would have chosen the left socks?? What about people who read right-to-left? What causes this association with stuff on the right???)

First, you must take what people DO... having them talk while they do it IS valuable... they're telling you why or what they think while they go through the pages, and this is good. Asking afterwards is less good.

A lot of people went with my preference of label placement to the left of each input, which didn't surprise me (although I admit to bias): most of the world reads from left to right, after all; so to my mind, it just seems easier to follow than a narrow column of elements.

They may be stating what they think looks nicest. But the best thing to do is make two versions of the form, and have several people fill them out.

If the only difference between the two is, one is maybe a hair slower for people to fill out, choose the one you personally like or think is designed prettier. But if one slows people down significantly (noticeably), or causes misinformation to be filled in, then you know one is better than the other.

With just eyetracking, people have somewhat more trouble with labels on the left: you either have them left-aligned, meaning there may be significant space between the end of the label and the beginning of the input (zebra striping, underlining or using connecting dots can help a lot), or if you do right-aligned, you get the jagged left edge, which makes eyeballs roll around a bit as the user goes from the end of the last input to the label of the next.

Though like I said there seem to be a lot of studies worrying about how fast or easily an eyeball moves and then fixates somewhere... lots of moving eyeballs doesn't necessarily mean the user if confused (though they may be re-checking) and if they can fill in the form properly and correctly without taking a huge amount of extra time or getting mildly confused then the eyeball studies mean little.

I have an Eyetracking Usability Study from Nielsen/Pernice that did several large e-commerce company's forms... sometimes the label placement slowed the eyeballs down, and sometimes the label placement (or the form setup) caused incorrect information to get filled in.
Want to see a cool video? From this post by Baymard Institute on Smashing Magazine I found the video for the Perfume form.
Form Field Usability: Avoid Multi-Column Layouts - Baymard Institute <-- this is awesome!!
(I suspect the "Or" was ignored because it looks like an image, and the user may have assumed it was decorative. In the couple of tests I did yesterday, people seemed to almost be in a race to fill out the form as fast as possible, and they missed more than the half of what was there. They didn't read labels unless I asked them to read them out loud.)

As one of the commenters @ smashing said, "Are these people stupid? If so, should they be breeding??" but the answer is simply that no matter what the IQ of the user, people DON'T read forms (or anything else), they skim. And they do stupid things.


We remember this one? We thought it was funneh:

(sorry for hotlinking)
(no image? boy pushing futilely at door clearly marked PULL... sign outside says "school for gifted")

There's a name for stupid doors: Norman doors. Lawlz.

[Stomme poes]

Tracking studies like these are also flawed to an extent as they use "heat tracking"/"eye tracking" -- where is the user spending the most time looking; but as always omit how much time it takes for the user to fill out the form -- which they DO have by the number of 'steps' and the size of the circles... If you'll notice, there may have been more movement around the display on the right aligned single line versions, but it appears to have taken two less steps and has a lot less giant circles.

Something to watch for when such "studies" are used to promote a viewpoint; often they omit or fail to mention relevant data that might contradict their conclusions -- which is why stuff like this is not science. In science, you don't start from a conclusion then make the data fit it. Amongst those who've studied marketing and propaganda, the term is "card stacking".

Yes.

I wouldn't want to rely on studies who did just eyetracking. My Nielsen book listed the ways in which eyetracking studies often went arry... didn't take much to screw them up.

[deathshadow60]

You can ask people what they think, but you can't accept what they tell you as truth like you can their actions alone:
Asking why can give you random, unrelated results and bad information.

"observing a phenomenon can change it's result"??? Where have I heard that before...

So the stupid kitty is Schrödinger's cat?

[adh32]

They may be stating what they think looks nicest. But the best thing to do is make two versions of the form, and have several people fill them out.

They didn't have anything to see at that time. I canvassed opinion with a general question.

Loved the Larsen reference. A genius cartoonist.

[Stomme poes]

"observing a phenomenon can change it's result"??? Where have I heard that before...

So the stupid kitty is Schrödinger's cat?

That was Heisenberg, not Schödinger : )