Best practices in web form design are becoming increasingly important.  Proficient web users develop a very clear sense of the optimal web form experience.  This Tech Tip contains five practices to ensure your web forms follow the best practices for usability and accuracy.

usability-formatting_1

Top Aligned Field Labels

If you have a public-facing web form, it is a good idea to top align your labels above the corresponding input fields.  This format scores much higher in comprehension and ease of completion rates.

Top-Align Form Field Labels

Align Your Submit Button

The best place for your form’s Submit button is exactly where the next input control would go.  Especially if you have a single-column input form, make sure that the submit button is aligned like all of your other elements.

Align the Submit Button with Other Input Elements

Mouse Over Help Icons

If you have difficult or unclear form elements you should consider adding a mouse over help icon.  Just the presence of help images on web forms have been shown to increase usability scores because of the reassurance that help is available if needed.  This article shows you how to provide sample input or a brief explanation in a mouse over tool tip.

mouse-over-help-button1

Add a Mouse Over Help Icon

Set up default values

Default values can be set for dropdowns, listboxes, radio buttons and all other types of fields on a web form. Therefore, instead of an empty “Please Make Your Selection” choice, it is best to set the most frequently selected option to be the default value. This avoids the need for input and also possible mistakes for the majority of your users.  Also, a dropdown field with incorrect information is more likely to be changed than an empty dropdown.

Setting up Default Values

Set Error Field Labels to Match the Error Message

When input errors occur it is important that the end user implicitly understands what went wrong and where.  Setting your field labels to change color whenever there’s an error is a good way to visually highlight the error.  In other words, both the error message and the field label will be your default error color.

error-label-comparison1_1

Change the Color of Error Field Labels