Make Web Forms Suck Less With Labels by Mark
February 10, 2009 in Sparks, Implementation with 10 Comments
I've been obsessing over forms a lot lately, mostly thanks to Luke W.'s book, Web Form Design, a great primer for any Web designer who has ever made a form online. Luke made it crystal clear in his book, right from the start—the first line of Chapter One, in fact. "Forms suck."
As an expert in form design, he's spot on. Forms do suck, and it's all your fault.
Starting Small
The interaction designer in us all is constantly looking for ways to improve how people use things—to make them work better. We've been filling out forms on the Web for years, and we all have the same gripe: it could be better.
Even with generous padding, these fields are too small.
But hardly anyone has improved the most underrated interaction of them all: selecting checkboxes and radio buttons.
Have you ever tried to click on a checkbox or radio button—and miss? I know I have, and it sucks. It all boils down to the click area of checkboxes and radio buttons.
As the smallest form element in our design arsenal, they're the necessary evils of the bunch. We need them, users understand them, but they're just so damned small!
Bigger is Better
Instead of relying on users to click on a teeny-tiny form field, make use of another HTML element—the label—and wrap it around checkboxes and radio buttons.
By wrapping your radio buttons and checkboxes with the label element, the click area on this single form was increased by a factor of 5x. (Image credit: Rosenfield Media)
You can learn a bit more about the label element at the W3 Schools website. Suffice to say, labels can be very useful, but they're often misused (or not used at all in favor of the span element). Here's how it's done:
<label for="newsletter"><input type="checkbox" name="newsletter" value="" />Include me in your next newsletter mailing.</label>
It's all about the click area.
As is the case with hyperlinks, with form fields, you have to consider the click area. The click area of a checkbox or radio button is miniscule compared to other form fields. This means these fields are harder to work with, requiring people to be more precise to use them. The thing is, people don't want to be precise. People want to be done with their form with as little effort as possible.
When using smaller input fields like checkboxes and radio buttons, wrap them with the label element. Not only does it mean you've got some great coding chops, but it makes the entire form experience for users that much better. The larger click area allows users to glide right through your form with ease (and less frustration).
And with that, your Web forms suck less. Stay tuned—we have plenty of tips and pointers for sucking less at just about everything!
Want more tips for labels and forms? I suggest looking into Luke W's book. Web Form Design is a great beginner's to intermediate's guide on every key aspect of Web form design. It's a great read that makes you think just a little bit more about how we interact with forms.
10 Comments
Steve says:
Great post. Might have to pick that book up.
Jeremy (ZURB) says:
This is a great example of the little details that build up to provide a great experience for people online. When you can click liberally around the checkbox and label, it just feels really good. You speed through the form and stay focused on the content of their interaction with your site.
When you can't, you start to frown a little. You click again more deliberately. Frustration creeps into the equation. It's the little things like this that leave a sour taste in your mouth. You end up not fond of that website, but you can't exactly say why.
RZ says:
Even before addressing the issue of using the label tag (which is a mighty good tip), I would first prefer that the tab order for form fields be consistent and consecutive between the various fields. THAT is much more frustrating than trying to click on a small radio button.
Mark says:
@RZ: You certainly raise a good point. Those key interactions with forms—and indeed any other "thing" people use—are essential to success and happiness. I know I certainly feel more content knowing that what I did was actually done in a great, easy to use, intuitive way.
It's crazy to consider just how (un)successful the iPod would have been without the click wheel, the mouse without the secondary click, shopping without carts, or digital cable without the ability to record and pause live television. Great ideas are often the smallest, but have the biggest impact.
LukeW says:
This not only applies to radio buttons and check boxes but any targets that have a small footprint. When looking at user-activated help for example, the rollover implementation also benefits from an increased target area:
http://www.flickr.com/photos/rosenfeldmedia/2366431361/in/set-72157604272550634/
steady85 says:
In order for this to work, the label must be for the ID attribute of the input - not the name attribute.
So the example code should be:
LuK says:
@steady85
Do you know why this is a problem (meaning the normal label for - input name relation...) in this constellation?
For me it would be ok because I always have an id on my inputs which is the same as its name...
just interested =)...
Erik Ostrom says:
In this situation - where you're nesting the input inside the label - you can actually omit the FOR attribute entirely. FOR is used to explicitly attach a label to an form control (and, as steady85 said, it should refer to the control's ID), but if it isn't present, the label will be associated with its own contents.
hedge fund conference positano says:
Whats Up i read a few of your other posts and wanted to know if you would be interested in exchanging blogroll links? Would you be interested in exchanging site roll Cu Soon
bottle rocket says:
Keep up teh good work. meself just added your RSS feed yours truly cant wait for your next posts.
Add your comment...