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

Select the Most Frequent Choice as Default

If you are using a dropdown field, listbox or radio buttons on a web form, you should consider setting the default option to the most frequent choice, not an empty “Please Make Your Selection” option.  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.

Set Default Choices to the Most Often Selected Option

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