Elements of Good Web Forms

Nothing gets me frustrated faster than forms at websites. So few of them are clear. Field labels are vague, the number of required fields/level of detail you need to provide can be crazy, and you are never quite sure if your input went anywhere.

So, I thought I would share these best practices from the folks at Nielsen Norman Group. More than their opinion as usability experts, these guidelines are backed up with research.

Short forms are best.

Eliminate unnecessary fields. That sounds so obvious, but every time I ask a client about the fields in the form I learn that half or more are not used for any purpose.

Remove fields which collect information that can be (a) derived in some other way, (b) collected more conveniently at a later date, or (c) simply omitted. Fewer fields to complete increases the changes that a user will complete and submit the form.

Visually group labels and fields.

Labels should be immediately above the field for mobile and shorter desktop forms or next to the field for extremely long desktop forms. If your form asks about two different topics, visually section it into two separate groups of fields.

Use a single column layout.

Multiple columns interrupt the vertical momentum of moving down the form and increase the risk that fields will be missed. Stick to a single column with a separate row for each field. Logically related fields such as City, State, and Zip Code can be presented on the same row.

Present fields in the expected order.

City comes before state. Expiration dates come after credit card numbers. There are conventions to providing information. Help your users by sticking to them.

Avoid placeholder text.

Use labels rather than placeholder text in fields.

Match fields to the type and size of the input.

Text fields should be about the same size as the expected input since it’s extremely error prone when users can’t see their full entry. If a field requires a specific format or type of input, provide exact instructions.

Call it “submit.”

Don’t use a clear button. Label your submit button “submit.” The risk of accidental deletion outweighs the unlikely need to ‘start over’ on a web form.

Make errors clear.

Errors should be clear: outline the field AND use red text AND use a heavier font, to ensure users can tell that they need to fix something.