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.
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.
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.*
Even with generous padding, these fields are too small.
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)