September 27, 2002, 11:51 AM ET
Making forms more usable (?)
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?
