Forms on a webpage are an excellent way to gather information and data from users. However, the usability of the form is greatly impacted by the layout and design. A well formatted design can increase usability and increase traffic, whereas a poorly designed form can push users away and have the opposite intended effect. Below are a few tips to increase the usability of your forms on any webpage:
Each input field should have a clear label assigned to it, so each user knows what information is needed and why they are entering it in. It's also a good idea to include a bold outline for the field the user is entering in, so it's easier to see where they are in the form. Part of clear labeling is mentioning which fields are required. By letting the users know which fields are required before submitting the form, the most important information can be inputted and the less important information can be skipped without any complications. It's also been proven to be beneficial to add labels to the top of the field, instead of next to them. This can reduce the amount of "looking around" a user is required to do when filling out a form. Finally, it's a helpful feature to allow the user to click on the field label and be redirected to the empty field automatically. As some users may not have the dexterity to accurately click into the field, clicking a general area to select the field is super helpful.
It's important to use positive language as opposed to negative or harsh statements when a form is being filled out. For example, when a required field is not filled out, the error message should read something along the lines of "Please fill out this field before continuing", as opposed to a negative "You forgot to enter this info" or just a plain "This field is required". This may seem like a minor detail, however it can go a long way in retaining users and helping them fill out the correct fields, without feeling like they're being blamed for incorrectly entering in the information.
When creating a form, it's essential to style the form so it is pleasing to the eye and easy to read. This includes padding, margins, font sizes, and colors. The submission button can be styled to stick out from the rest of the form, and a hover effect will allow for better user feedback before clicking "Submit". The form box itself can also be designed to stick out from the rest of the webpage by including a box shadow. This makes it easy on the eyes to differentiate between the background and the form. Another helpful tip is to only use one column when creating the form. This makes it so the user can fill out the form in less time, and reduce eye strain looking left and right between fields. Below is an example of some of these practices in action!
For more best practices, visit Smashing Magazine's blog or Hubspot's article on efficient form design.
Questions? Email: dak2114349@maricopa.edu