In Search of Well-Designed Web Forms

header man apple keyboardNothing 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.

One thought on “In Search of Well-Designed Web Forms

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s