It’s a beautiful Sunday afternoon, and you’re having a nice walk in the park. A stranger approaches you, and he asks if you want a $10 gift card. Already skeptical, he pulls out a lengthy form and states that all you need to do is provide your date of birth, phone number, email, and fill out a survey in order to get the gift card. It’s crazy! Although a free gift card is tempting, he hasn’t done anything to make you trust him with sensitive information and, frankly, it isn’t worth the effort to fill out a lengthy form. You’re not going to risk providing all of that personal information for a mere $10. You wouldn’t do this in person, so why would you do it online? Although it seems crazy, I see companies do the same thing on their websites all the time. Often, forms are the first point of conversation with your customers, so you need to make sure they leave a great first impression on your prospects and you earn their trust before asking for sensitive information.
[Forms are one of the most important elements of functional web design. Our Basics of Web Design guide can help put this point in perspective.]
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. If the nature of your business requires you to have a lot of fields in the form, you can test splitting up the form into multiple steps, so that there aren’t too many fields on one page. 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. Also, you should 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. In addition, you can 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. 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.
Another part of your forms that you need to take a close look at are your field labels. 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 on your forms. Your call to action should be clear and distinguished from the rest of the form. Thus, you should remove all distractions. Your call to action should look like a button or, at the very least, it should be obvious that it is clickable. You should also include text on the button that clearly indicates what happens when users click it, like "Pay Securely" or "Apply Now." Additionally, if you have a secondary call to action, the primary call to action should be larger and a different color than the secondary option. 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. 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. 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. You should also ensure that they 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. 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 too, prevent build-up of multiple errors, and display them in a clean format. 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!