hhotels in antigua
arartichokes in olive oil

Where fields are ‘corrected’ because part of the form entry has scrolled off to the left. One of the inclinations is to retype the ‘missing’ piece with these consequences. The general rule of thumb is good but beware of user supplied formats that may exceed your expected length.

I’ve done quite a few hundred hours testing (a lot with forms) and I’ve rarely seen people notice the focus set to the first form. However, when I have had it set, it hasn’t interfered so it doesn’t do any *harm* and probably a *little* benefit for some advanced users.

One comment on breathing room – even input fields with expected value lengths should be slightly larger – try to imagine either one or more keyboard slips, formatting additions (e.g. +()- in phone numbers) or spaces and increase accordingly. I’ve seen a lot of people mangle fields due to the size being spot on, but with no room for error whatsoever.

In any case, after I wrote this post I restyled my comments form, and included an “input:focus” style in my stylesheet. You probably noticed it in action when you filled out the comments form earlier. It’s definitely something that I’m going to start incorporating as standard practice in all of my designs though.

On a somewhat related note, what do you think of having the cursor automatically appear in the first form field when the page loads? I’ve seen varying viewpoints about the topic, but I’m curious what you think of it from the usability standpoint.

Like I wrote, I think they can be particularly handy when you have a longer form and you want to break it up into smaller units to make it more organized for the user. You don’t have to use a fieldset for every form you have, and even if you do use one, you don’t necessarily have to style it. For example, this comment form is wrapped in a fieldset, but you wouldn’t know it unless you looked in the code.

Regarding labels, those are definitely something worth considering and using more often. I’ve only begun to use them recently myself, but if you’re into making your code as semantic as possible, they are definitely the way to go.

Regarding the “breathing room” you mentioned – I think adding the small touches such as padding help us move away from forms as they used to look (boring, unstyled, etc.) towards the point where forms truly look like they belong on a website.

As I looked through some of the design galleries that I linked to, I was glad to see that so many designers were giving forms serious consideration. I know they can often go overlooked, despite the knowledge that how they are designed and laid out does have some big usability implications.

Caroline Jarrett,
“Forms that work: Designing web forms for usability” – foreword by Steve Krug.