Making forms more usable (?)

Written by Adrian Holovaty on September 27, 2002

I've used labels on my form elements throughout Holovaty.com for some time now, as brought to my attention by Mark Pilgrim's Dive Into Accessibility series. In short, a form label is an explanatory piece of text next to a form field -- such as "Name:" or "Web site:" in this site's comment system, or the "Open external links in new window" option on this page. HTML provides a way for Web designers to specify which label goes with which form field. As a user-interface bonus, in newer browsers, clicking on a form element's label will automatically give focus to the form element. (For example, clicking on "Name:" in my comment system will put a blinking cursor in the associated field even though you didn't click in the field directly.)

I bring this up because I've made an experimental tweak in my CSS that might increase the usability of this site just a tad. I've put the following line in my style sheet:

label { cursor: pointer; }

That line of code will turn your mouse cursor into the familiar "pointer" whenever it's above a label, which results in the perception of a larger clickable area. That, in turn, results in a more effective user interface, according to Fitts' Law.

But this new feature remains experimental because it might backfire. Users might think the pointing hand designates a link and therefore might shy away from it or get confused when they click on it and the page doesn't change. I plan to do some informal usability testing, and I'm curious to hear comments on this matter.

A Google search reveals this technique has been done before, but I haven't seen many sites use it. Is it more harm than good?

Comments

Posted by Anil on September 28, 2002, at 2:27 a.m.:

Why not use the text insertion cursor, so it is clear that the active area is related to the field where they'll be entering text? I think the I-bar would eliminate the problem with being confused for a hyperlink, too.

Posted by Julie on September 28, 2002, at 3:27 a.m.:

Interesting idea, though as a user I think the form would be more, well, usable if the first field was highlighted with blinking cursor automatically -- so I don't have to do ANYTHING else. On your site in particular, where I've just clicked on "Comments" I would like that one action to give focus to the first form element so my action sequence is click-type .... not click-click-type. For me at least, it's no easier to aim and click on the label than to just click on the field itself.

Even if I wasn't planning to fill out the first field(s), I think it's easier/faster to tab through a couple blanks than it is to aim-and-click since I'm preparing to type anyway. Along that line of thought, as a second choice I'd want to be able to click anywhere on the form and have that activate the first field.

Posted by Adrian on September 29, 2002, at 3:59 a.m.:

Great ideas, guys. Thanks very much...

I've added some JavaScript that automatically gives focus to the first element in the comment posting field when you expand a comment. When you close the comment box, it gets rid of the focus. (Otherwise, the focus would remain in the comment field and some things, such as the mouse wheel, wouldn't work unless you clicked in the document to give it focus. If that makes any sense.)

I also added similar auto-focus to the search page and contact page.

As for the text-insertion cursor...That shows up regardless of whether text is a label -- e.g. when I just have my mouse over plain text -- so I think it wouldn't give users an obvious enough visual clue that the labels are clickable. Still looking for a good solution here...if there is one at all.

I did some very crude "usability testing," which basically consisted of me asking a few coworkers to click the "Open external links in new window" checkbox. Nobody noticed that the text was clickable as well as the checkbox; they just all went directly for the checkbox.

Hmmm.

So, from my limited "research," people don't notice it. But I think I'll leave it in for the time being. I think it's worth it for the "oh, I didn't know that" factor -- some users might stumble upon it by mistake, be pleasantly surprised, and learn to use it. But it's by no means a necessary navigational tool.

Posted by Adrian on September 29, 2002, at 4:53 p.m.:

I've detected a minor problem in automatically giving focus to the first comment field -- the browser scrolls down to the first form field, past all the comments already posted. That means I have to scroll up to read previous comments.

What's more important, having your cursor automatically show up in the form field for you, or being able to read the discussion from the beginning? I venture to say the latter.

I'll take it out -- unless anybody else has some suggestions on how to give focus to the comment form but keep the document from jumping down.

Posted by Dunstan on March 8, 2003, at 2:58 p.m.:

I add a span around my form labels so I can align all the input fields using css as if it were layed out using tables. The benefit of this is that the input fields wrap under the labels if the browser window narrows.

I also include a title attribute for each form label which tells people if the field is compulsory or not. On some sites I replace this message with a descriptive message about the form field (usually in admin sections of a site):

<span class="formlabel" title="This field is optional"><label for="name" accesskey="n"><span class="underline">N</span>ame:</label></span> <input type="text" size="30" id="name" name="name" />

The css to go with all this is:

.underline {

text-decoration: underline;

}

.formlabel {

cursor: help;

float: left;

width: 5.8em;

}

This way the user gets the ? symbol on their pointer so they take note of the message...

No complaints so far.

Example can be seen here:

http://test.maccaws.org/contact/

I'm sure someone can point out some downsides to this though :o)

Posted by Espero on May 10, 2003, at 6:59 p.m.:

Other Topic: Open External Links in New Window

Hello Adrian,

After an extensive search, I've found the JS used in your site for "Open External Links in New Window" a very good one. My question: How to include more than one website (your host_server) as "INternal links" to be opened in the same window (which might be useful for websites that belong to same group/network or websites with multiple domain aliases)

Any suggestions shall be great! Thanks

The following is the LinksInNewWindow portion of your MAIN.JS:

function linksInNewWindow(a) {

var b=a?"_blank":"_self";

var c=document.links;

for(var i=0;i<c.length;i++) {if(c[i].href.search("holovaty.com")==-1) c[i].target=b};

=== EOM ===

Comments have been turned off for this page.