Comments on: Forms. Can’t live with them. Can’t live without them.

By: Bogdan Pop

Bogdan Pop — Mon, 21 Mar 2011 08:59:04 +0000

Hi Iza and thanks for the great comment. Nice links too. Please note that I've coded the forms in the second part of the tutorial: coding and validating web forms.

By: Iza Bartosiewicz

Iza Bartosiewicz — Mon, 21 Mar 2011 04:24:57 +0000

Hi Bogdan,
Your post has been up for a while, but there are a couple of points I would like to follow-up on. The first one concerns the ‘inline labels’. You’ve identified the usability issues, and Ben picked on the potential accessibility problems with this approach. I just wanted to add that anyone wishing to use this technique should check out Terrill Thompson’s page first: http://terrillthompson.blogspot.com/2011/01/testing-accessibility-of-pre-populated.html

The second point is about the accessibility of top-aligned labels raised by Ben. He is right, this form would create problems for the screen reader users IF a table was used for layout, the labels and the corresponding fields were sitting in separate rows, and the label markup was missing. However, we can’t be certain of this, because we don’t know anything about the markup of that form.

You’re absolutely right about the importance of making web forms user-friendly. Since some users are likely to have disabilities, it is also important to make them accessible. There is plenty of information about accessible forms out there, but here are a couple of trusty recommendations: Accessible forms by Roger Hudson at http://www.usability.com.au/resources/forms.cfm, and WebAIM’s article on creating accessible forms at http://webaim.org/techniques/forms/

cheers
Iza

By: Bogdan Pop

Bogdan Pop — Fri, 26 Mar 2010 19:48:06 +0000

Hi Caroline,

Many many thanks for your comment! It’s a great honor for me to see such great authors stumble on the articles I write and take the time to comment them.

I can’t wait to get some spare time to read your book (Forms that Work). Bought it a couple of weeks back but didn’t get to reading it.

Thanks again,
Bogdan Pop

By: Caroline Jarrett

Caroline Jarrett — Fri, 26 Mar 2010 18:20:26 +0000

Hi,

It’s great to see an article about label placement in forms that encourages people to think about the questions themselves, whether they need long or short labels, and the overall balance of the form. Great stuff!

As well as Mario’s piece, which is looking solely at time to read the label, you might be interested in my article that also looks at what the label says.

http://www.usabilitynews.com/news/article3507.asp

Overall: remember that people are much more likely to bail out of forms or give inaccurate answers because of what the questions are asking than because of where the labels are placed.

Best
Caroline Jarrett

By: Impressive web forms. From coding to validation!

Impressive web forms. From coding to validation! — Tue, 23 Mar 2010 17:38:17 +0000

[...] Today I'll tackle coding a good webform, styling it, client-side and server-side validating. The first part of the tutorial was extremely popular, and that's why I chose to merge parts two and three, which [...]

By: 9 months stats

9 months stats — Sat, 12 Dec 2009 08:10:24 +0000

[...] 2. Forms. Can’t live with them. Can’t live without them [...]

By: admin

admin — Tue, 10 Nov 2009 21:26:25 +0000

Hi Ben. Thanks for the comment and thanks for being the coolest reader I have seen here since I launched! Your comment is really comprehensive and I appreciate your effort!

Now to address your comments.
“Assuming you use dynamic text, cons #2 and #3 can be easily addressed with a bit of coding.”
I to agree with that too, and I think that a javascript solution would be sufficient. At least for this site, I recall that the percentage of browsers without javascript is under 2 or 3%.

“Your point about browser screen resolution being “pretty big” doesn’t sound right to me.”
This depends. For example, stats for this site show that 98% of resolutions are larger than 1024*768 which is awesome. However, I run different sites for different clients and I have sites that have resolutions up to this as large as 60%, which is not that awesome anymore.

“The cons for left-aligned labels can also be addressed. If it uses the “label” tag, clicking a form label should position the cursor in the relevant field.”
Hmmm. This cons is not about going through the form and using it (with mouse or keyboard) but as to how many eye fixations are required for the human brain to connect the label with its input field. Any implementation will not fix this eye fixations issue.

“As for top-aligned labels, once again a major problem here is accessibly. A screen reader reads from left to right, so in your example it will say “First name, Last name” and then tell the user that there are two fields afterwards. It won’t say >>First name, field, Last name, field< <."
This is interesting, and I must say that I haven’t thought about that at all. Thanks for pointing it out.

“Implementing >>subscribe to comments by email< < would be a useful addition to your blog"
Well, now that you said you want it, I have to do it. I’ll let you know when it will be up and running (hopefully soon). I planned it for some time, but never got the time to do it.

“IMO, your comment box is far too small.”
And once again a mistake from my part. The truth is I never expected such a through comment. I think I’ll add a modal window for a larger textarea.

Once again, thanks for sharing your thoughts Ben!

By: Ben

Ben — Tue, 10 Nov 2009 21:08:03 +0000

Interesting post.

I’ve never seen text within input fields that was anything other than dynamic. I didn’t even realise people would use static text! Assuming you use dynamic text, cons #2 and #3 can be easily addressed with a bit of coding. The label text does go away, and it does come back, when you click into the field and click out of the field. But it would only come back if you didn’t type anything. If you’re familiar with Javascript, this is fairly simple to put together.

On the other hand, one drawback of dynamic text within input fields is that it won’t work for users who disable Javascript, and the lack of a “label” tag will result in an inaccessible form.

Your point about browser screen resolution being “pretty big” doesn’t sound right to me. Sure, larger monitors are available than in the early days of computers. But don’t forget about mobile devices, such as the iPhone.

The cons for left-aligned labels can also be addressed. If it uses the “label” tag, clicking a form label should position the cursor in the relevant field. Unfortunately, few sites seem to implement this correctly, instead relying on plain text as a form guide. Again, this is inaccessible. As for increased horizontal space, this is down to the design of the form – even a very long label can be forced onto multiple lines. I prefer to put all form labels in a fairly narrow column on the left, and give the form fields plenty of breathing space. From your examples, I’d say that right-aligned labels seem like a fairly good option if you keep the labels within a certain width.

As for top-aligned labels, once again a major problem here is accessibly. A screen reader reads from left to right, so in your example it will say “First name, Last name” and then tell the user that there are two fields afterwards. It won’t say “First name, field, Last name, field”.

PS Implementing “subscribe to comments by email” would be a useful addition to your blog

PPS IMO, your comment box is far too small.