The more we use the Internet for purchasing, online banking, and checking into our social networks, the more likely we will be asked to complete a clumsy or frustrating web form. We know forms must be designed for a wide variety of people, and yet this is one of the leading stumbling blocks designers run into. How can a single form satisfy every user interaction? What can be done to minimize errors and form abandonment?
The key to designing a form that your customers will use is to build it so they can use it. Form builders tend to neglect special needs users, despite the easy availability of guidelines for accessible forms. International users are also challenged by forms not providing adequate space for complex addresses or country codes in phone numbers or worse a�� not indicating if they sell or respond internationally until the visitor fills out the address section. Those who wish to retain their privacy and prevent unwanted spam and phone calls are also likely to find many existing online forms not meeting their needs or wishes.
But you can excel at designing and laying out forms so that they will be easy and a pleasure to complete. The benefits of doing so cana��t be overestimated in terms of happy customers, efficient order processing, and referrals from satisfied site users. To help, leta��s go through some of the most common types of forms found on the web, and look at 20 tactics that will help you succeed at creating stellar examples that will increase form completion.
Common Types of Web Forms
1. Contact Forms a�� Most of us have filled out a contact form. They are familiar and our expectation is that it will ask for our name, provide a way to ask a question or leave a comment, and a means of following up after the form is submitted. We also expect the information we enter to be secure and not made available to anyone other than the company or person wea��re contacting. Simple, right? Yet common design mistakes can drastically affect usability.
One common user complaint concerns contact forms requiring personal information fields to be completed or the form itself will not function. Typically the most undesirable field asks for a phone number. Demanding a phone number from someone asking a simple question or leaving a comment is invasive and changes the type of form from a basic contact to a sales lead form. Another mistake is asking for demographic information on a contact form. If you require an address from someone asking a quick question, chances are good the form will be abandoned. Gathering user demographic information via contact forms is an invasion of privacy. Other required fields that make little sense are a FAX number or salutation (Mr., Mrs., and Ms.) field.
2. Registration Forms a�� Ecommerce shopping carts commonly use registration forms to create a user account for product sales and tracking. The goal of a registration form depends on the type of website and its purpose. For example, some ecommerce sites permit customers to browse and add to their cart before being asked to register and make a commitment. However, others are more interested in knowing who has come to their site and placed items in their cart, so they require registration first. One advantage to this method is that the company can follow up and offer help with the sale or ask why the visitor didna��t complete the purchase. Customers dona��t always like this, of course. Imagine if every time you went window shopping you were later chased down to learn why you didna��t buy anything.
3. Reservations a�� Hotels, motels, camping sites, and RV resorts are types of websites that use reservation forms or longer applications. A small campground can get by with a smaller form and asking fewer questions, such as hookup and vehicle type, number of nights, and basic personal information. Some make initial contact with a quick form and follow up with an email or phone call to take more information and a credit card number.
Hotels, cruise lines, and airlines require far more information from their users. Their reservation forms are often long and tricky to use. Ia��ve tested several over the years and found that the logic isna��t always practical. For example, many ask for the number of adults and children in the group, but provide no age information, making the user wonder who is an adult or a child? Another problem is that families sometimes travel together, but booking hotel and airline reservations for multiple family units is almost impossible, especially if they hope to share expenses. Overall, many reservation forms are obviously not tested well during design and development, and nearly all require information that users may not want to give over the Internet.
4. Sales Lead Forms a�� Probably the most invasive and unpopular, these forms are found on websites that offer insurance quotes, sell real estate, and certain ecommerce sites (e.g., ebooks). The sales lead form is most often placed on the homepage and in the sidebar of inside pages or advertising landing pages. Everywhere you visit on the website youa��re confronted with another sales lead request. Sales lead forms tend to probe for information. They can require a phone number, cell phone, and email address for contact; full address, full name, and checkboxes for making choices for getting information. As such, they are highly useful marketing tools, but also a minefield for user problems.
20 Rules Of Thumb For Form Perfection
Usability and user experience heuristics for forms design are extensive. Most decisions should be made based on the goal for the form and its targeted users. Excluding anyone may lead to low conversions. Your goal is to create a pleasant, quick, understandable experience. Remember that forms are filled out by humans. We experience the web emotionally and with behaviors depending on a variety of factors such as culture, age, and health.
The list below is intended to help with your forma��s user interface, motivation, momentum, peace of mind, and ease of use.
1. Add user instructions a�� This may be a simple sentence at the start of a form, tooltips, or guidance located next to fields that may be confusing.
2. Show examples a�� The manner in which you wish visitors to enter phone and credit card numbers doesna��t have to be a mystery. Provide an example either inside the field itself, to the right, or underneath the field.
3. Explain the need a�� It may be helpful to provide feedback while the form is being filled with data by the user. For example, when asking for a phone number, explain why it is needed or required. When asking for a social security number or member account, assure that this information is strictly confidential.
4. Warn if specific data needed a�� For forms that require specific data such as income, social security number, account numbers, drivera��s license, etc., be sure to present this warning at the very start. Help your user gather everything they need to fill out your form before they begin.
6. Consolidate error information a�� Rather than show an error message after each erroneous entry, wait until they submit the form and then outline each area that needs to be reviewed and corrected. Above all, dona��t make them fill out all the information on the form again a�� just the data thata��s in error.
7. Provide information on errors a�� Be very clear about where errors are and how to fix them. This is a common mistake by designers. The form may highlight an error with an asterisk or red exclamation point, but not offer any clue how to fix the error.
8. Avoid repeat data entry a�� Avoid asking for the same information on several pages of a long form. Repetitive information should be carried over in the functionality.
9. Prevent memory overload a�� Dona��t expect everyone to remember what they just entered. Some forms may need a pause to show the data entered so far for review before continuing.
10. Test layout options a�� Some form layouts are faster to fill out than others. Therea��s debate over which is faster a�� vertical alignment with field names placed above the field or left and right justified with the field name and field separated. Test your choices.
11. Group data logically a�� Typically a name and address lead off the form, and then contact information, followed by choices and areas for feedback and tasks.
12. Offer a choice for return contact a�� Many people are not comfortable with the phone but are more than happy to do business via email. In the reverse, some people fear spam, so requiring an email address from them could mean form abandonment.
13. Include phone call options a�� If you require a phone number, offer a choice on when to return the call. Ask for a time zone and specific time of day. Offer to call at home or work. Allow a choice of home phone or cell phone but dona��t require both.
14. Provide status messages a�� For forms with multiple pages, provide a status message such as a�?Your order is being processeda�? or a�?Please waita��.a�?
15. Include a review a�� Always offer an opportunity to review all information before the final submit action.
16. Allow printing a�� Let users print the final page before submitting the form.
17. Remind about follow-up a�� If the form will be followed up with an email to the user, place this reminder in the form instructions.
18. Engage your users a�� Offer a coupon if they complete a quick web survey form. Use natural language and easy-to-understand terms. For subscription forms, link to archives of past newsletters.
19. Try a�?gradual engagementa�? practices a�� Rather than expecting site visitors to give out information before they get any benefit (such as a video demo), let them see what they get first.
20. Show steps prior to start a�� For longer forms, show the steps to the process from the start of the form. Tell users how long the form may take. Let them gather the appropriate information. As they go through the form, indicate how much farther they have to go. You may need to offer words of encouragement along the way.
Web Form Design: Filling In The Blanks a�� a book by Luke Wroblewski (Amazon)
Editor’s Note: This article first appeared in 2012 in the print edition of Search Marketing Standard magazine.
Image: A�Contact Form — Original Billboard Image from Shutterstock