Optimizing Forms: Make Them a Great Conversation

1. The first thing to keep in mind when designing forms is to ensure that they are not visually overwhelming. You should only ask your users for the information that is absolutely necessary because you want to make sure there aren’t too many fields in the form. If you need extra information for marketing, you should try to find it out in a different way, especially if this is the prospect’s first point of contact with your business.
2. You can also test splitting up the form into multiple steps, so that there aren’t too many fields on one page, if the nature of your business requires you to have a lot of form fields. Another advantage to the multi-step approach is that user information can be saved in sections as prospects fill out the form even if they don’t complete it.
3. You should also group related information within the form together. By grouping related information together, visitors can make sense of the information being asked of them, it allows for scanning, and it makes the form less overwhelming.
4. Use whitespace to your advantage. Whitespace can reduce clutter and be used for grouping and increasing readability. Furthermore, you should leave personal details for later. You shouldn’t ask for things like birthdays, payment details, and phone numbers right out of the gate.
5. Finally, you should always test multiple form structures to see what works best. Depending on your business, one-step or multi-step could be better.

Field labels are another part of your forms that you need to view closely. They should be clear and unambiguous. Also, you should clearly indicate if all the fields are required. If some of the fields are optional, you should mark the optional fields or indicate the required fields with an asterisk. If the data you are asking for is complex or sensitive, you should include help text.

There are a few ways you can consider displaying the help text. It can always be visible next to your fields, it can be revealed when clicking an "i" next to a field, or it can be displayed dynamically. However, you should avoid in-field labels for a few reasons. In-field labels strain users' short-term memory, keep users from checking their work once they complete the form, annoy those who navigate with the keyboard because text disappears, and occasionally, users have to manually delete the placeholder text. For those reasons, you should stay away from using in-field labels.

You also want to ensure that you have a clear call to action (CTA) on your forms. Here are a few tips:

1. Your CTA should be clear and distinguished from the rest of the form. Thus, you should remove all distractions.
2. It should look like a button or, at the very least, it should be obvious that it is clickable.
3. You should also include text on the button that clearly indicates what happens when users click it, like "Pay Securely" or "Apply Now."
4. Additionally, if you have a secondary CTA, the primary CTA should be larger and a different color than the secondary.
5. Another way you can use call-to-action buttons is by greying out the button until all of the required fields are completed. If you are using a multi-step form, you can consider including a progress bar at the top of the form. The progress bar provides transparency to users on how long the form is, gives them a clear sense of direction, and also motivates users to complete the form.

When dealing with user errors in forms, you should do everything you can to prevent errors from happening in the first place:

1. You can use help text to tell users how forms should be filled out to prevent most errors. However, some errors are inevitable, and you should display your error messages in an optimal fashion.
2. Your error messages should be helpful, informative, and clear. They should be rendered in language that you would use when speaking with a person, so you should avoid using jargon or technical speak.
3. They should stand out against the form fields. It’s best that you display them in line with the fields. If you display them at the top of the page, it will require users to scroll up and down which may generate unnecessary frustration with the form.
4. Display them as the user fills out the form. It’s also usually best to display errors as users fill out the form. If you wait until form submission to display errors, this can be overwhelming, make the errors seem more serious than they actually are, and users may not know which fields the errors apply to. However, if you display the errors as users fill out the form, you can clearly mark which field the error applies to, prevent build-up of multiple errors, and display them in a clean format.
5. Positive reinforcement. You can also use positive reinforcement and display a checkmark next to the field when a user fills it out successfully. This will yield a more enjoyable experience than using negative reinforcement. When instituting field validation, it’s best to start with lenient rules and then make the rules stricter as you learn more from testing how your prospects fill out the form.

Another important part of your forms to optimize for is accessibility. Inaccessible sites lose tons of money, so you should ensure that your forms are accessible. Thus, you should make sure you use readable fonts and make sure your labels, help texts, and input boxes are large enough on all types of screens. Also, you should not replace help text with icons. Finally, you should avoid captchas. If you need to verify humanity, you can use email verification.

You may have noticed a trend with these tips for form optimization. It’s important to continuously test all parts of your forms to ensure you have the best form design for your business and target customers. This may seem like a lot for a seemingly small part of your business, but it’s necessary. If you understand the value in form optimization but need some help to ensure the work gets done, send us a note. We’re happy to help!