Forms, kids, and a library lady

I was in the library just the other day. My daughter and her class are planning a field trip to the library in a week or so, and I had to make a library card for her. I filled in the form and handed it to the lady behind the counter. She turned to her computer and started entering information in what looked like a fairly well designed application, clean interface, neatly laid out forms.

She came to the birthdate field and something odd (at least to me) happened. She attempted to click on a field label, then paused for a second waiting for something to happen, but nothing happened. She said, “There used to be this handy calendar coming up before”. She might have clicked on the label once again, just to make sure that nothing is happening. I did not pay that much attention. A couple of seconds later she clicked on the field below the label and reached for the keyboard. It looked like she was getting ready to start typing in the birthdate, but right at that moment, to her surprise, the almost-lost calendar popped up. “Oh, here it is”, the lady said in relief, probably thinking of how painful it would be to type in the birthdate. She promptly filled in the birthdate and moved on.

What is the moral of the story? It is twofold.

First of all. Follow the standards.

It makes total sense to click on the field to bring up the calendar. But it also makes sense to click on the label to do the same. So much sense in fact, that this functionality is baked into W3C standards. In this standard the label is linked with the related field:

<label for="birthdate-field">Birthdate</label>
<input id="birthdate-field" type="text" />

It is a simple thing, and it just works. This is especially important for radio buttons and checkboxes.

And the second moral of the story is even more obvious: don’t forget to test with real users.