Optimizing Your Web Forms for Maximum Usability
2 minutes to readBest 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.
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 unclear form elements you should consider adding a mouse over help icon. Just the presence of help images on web forms has been shown to increase usability scores because of the reassurance that help is available if needed. The following article shows you how to provide sample input or a brief explanation in a mouse-over tooltip.
Rollover Hints – 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.
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.
