Tech Tip: Optimize Your Web Forms for Maximum Usability
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 week’s Tech Tip contains a variety of practices to ensure your web forms follow the best practices for usability and accuracy.
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.
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 unusual 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.
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 understand 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.
