I just thought I’d post about a few things that you should be doing with your forms and also a few things I just like to do.
Use Labels
I still don’t understand why there are a load of people who don’t use labels within their forms. They’re more semantic that using strong tags like alot of people seem to do. They’re also more user friendly. Also they’re useful for styling your forms.
The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.
And here’s how you’d use it in your code:
<label for="username">Username</label>
<input type="text" name="username" id="username" />Which gives you:
Now, when a user clicks on the label it will focus on the form item specified by the for attribute. Hooray.
User the Pointer Cursor
Here’s the CSS:
label, button, input.button
{
cursor: pointer;
}Easy. It does require you to add a class to submit and reset buttons, but hey it’s a small sacrifice.
Focus on the First Field
Having to click on the first form field I want to fill in is a pain in the ass. Don’t make me do it. Here’s a quick jQuery function to do it for you:
$(document).ready(function() {
$('input[type=text]:first').focus();
});No Confusing Buttons
If you have a submit button and a reset button, or anything similiar, make sure people can tell the difference. I don’t want to fill in your huge form and then find I’ve accidentally clicked the reset button instead of the submit button.
An example is shown below:
Submit buttons on the left and sub actions on the right, see:
Always put the Submit Form button on the left and on the Clear Form button on the right. Never, ever put the Submit Form button on the right and the Clear form button on the left.
See?
I’ll post more when as they come to me, in my bizarre usability dreams. Feel free to post your own tips. Or to tell me that I know nothing at all about anything.
More Reading
- HighRankings Forum: Collected Web Site Usability Tips
- Usability Features - The Label Element
- What Makes a Web Form Usable or Unusable
- 7 Steps to Useable Forms
- Sensible Forms: A Form Usability Checklist
- QA Checklist: Form Usability
4 Responses to “More Usable Forms”
Great tips! I do take slight issue with always having the submit button on the left and reset/cancel on the right… This is an interface standard which varies by the OS. On Macs, the OK button is always on the right, while on Windows it is always on the left. I tend to place it on the right side because I’m a Mac user, and also because the right side just makes more sense to me (for the same reason pagination has “previous” on the left and “next” on the right).
A small nitpick, and perhaps it’s best to follow the standards of the majority platform or even do some detection. Honestly I think that as long as the submit button is given a distinguishing style to make it “pop” out at the user, usability is enhanced no matter which side the button is placed on.
I’ll be honest, I just showed one on the left and one on the right to show how you could make them more distinguishable.
I use both a windows machine and a mac machine but I usually place both on the left and make the main action button more dominant than the sub actions.
There was an article somewhere about usability that explained why the main action should go on the left hand side but I can’t recall where I read it at the moment. If I can find it I’ll post it up.
Nice tips, I have been preaching about the label element for far too long: http://jlaine.net/2006/3/14/usability-tip-2-use-the-label-tag
There’s a recent book by Luke Wroblewski (http://www.rosenfeldmedia.com/books/webforms/) that I highly recommend regarding form usability. It’s got a lot of research put into advice on everything forms-related, e.g. about the button placement you talk about above.
Just a note about submit and reset. Reset is an annoyance on the web; there’s no need for it as we use the back button more often if we make a mistake. It’s just a hang up from old school programming that felt all GUI controls should be brought online. There’s no real thought. So that solves the right and left problem - just don’t have a reset. See more at: http://www.useit.com/alertbox/20000416.html