Web Design Tips for User Friendly Online Forms

Most websites have one or more forms that visitors can fill out to contact the business; sign up for emails, newsletters, or magazines; purchase products and services; register to use the site, and more. While a reality of online business, forms can also be a bit tricky. Forms that visitors find unnecessary, too long, too complicated, too intrusive, or just plain annoying will quickly be rejected. It is possible to strike a middle ground where visitors willingly complete forms and companies get the information they need. The key is to develop the right web design for forms. Here are a few tips on creating user-friendly forms that will improve rather than detract from the productiveness of your website.

Reduce the number of form fields.

One of the simplest steps to better web design for your forms is to reduce the number of fields that people have to fill out in order to complete the form. In fact, one study showed that reducing a form from 11 fields to 4 resulted in 160 percent more form completions. Choose the fields you eliminate strategically. For example, you may not need a company name for someone signing up for a webinar, but you will need their email address. Think about the information you have to have from the visitor in order to accomplish your goals for the form. Then eliminate everything else.

SEE ALSO: Mobile Web Design Must Haves

Combine form fields where possible within your web design.

For the information you do need to obtain, use your web design to minimize the number of form fields required to get that information. Use a single field for a phone number instead of three separate fields, or ask for the visitor’s full name in one box instead of using one box for their first name and one for their last name. This type of efficient web design can make a form easier to complete, without impacting the information you capture. It may also shave a few seconds off the time it takes visitors to fill out the form. This allows them to complete it without getting overwhelmed.

Use your web design to create single columns for your form fields.

Speeding up the form completion process is also possible within your web design by using single columns for your form fields instead of placing multiple fields on each line. While this type of web design makes the form look longer, it also makes it look less confusing to complete. It also requires fewer time-consuming eye movements to read. In one study, people completed single-column forms more than 15 seconds faster than they completed forms with multiple fields per line. When it comes to online visitors, speed can make the difference between keeping them engaged with your brand and losing them to the competitor.

Use your web design to limit the typing the user has to do to complete the form.

Online visitors tend to be in a hurry. If they are using mobile devices, they are also likely to become easily annoyed by the need to write lots of text on a small screen. Avoid this frustration (and the tendency website visitors have to abandon sites that create it) by limiting the amount of typing the user has to do to complete the form. One valuable tool in this endeavor is to prefill as many of the form fields as possible. For example, if you are asking a repeat customer to check out, prefilling the form fields with the information you have for them can make it much simpler for them to complete the checkout process. In addition, provide drop-down menus when possible (i.e. for choosing states, shipping options, etc.) This helps visitors eliminate typing by giving them a single button to click.

Notify users of errors as they occur.

Users can feel frustrated if they go through the effort of filling out a form only to submit it and find out that there are errors. Worst of all are forms that immediately reset when a problem is found upon submission of the form. Avoid these problems by implementing in-line validation within your web design to alert users to mistakes as they occur. This tool checks the information the visitor is putting into each field and alerts them to problems immediately. For example, if a credit card number is too long, or a password does not have the required combination of letters and characters, the in-line validation can alert the user to the problem before they move on to the next field. This system makes it simple for users to detect and correct mistakes in real-time.

Ask the easy stuff first.

The way in which your form fields are arranged within your web design can also impact your form’s overall completion rate. Asking for sensitive information (like payment information) upfront is likely to lose you customers. Instead, request simple information, like the customer’s name, first, and ask for more sensitive information, like payment information or budget, toward the bottom. The further the customer gets in completing the form, the more committed and comfortable they become, and the more likely they will be to provide the more difficult information when it is requested.

Use your web design to provide field focus.

Finally, the web design of your online forms should help users to focus on the field they are filling out in order to avoid distractions as they work. This strategy is especially important in mobile web design, which must simplify the experience for mobile device users who are working with a much smaller screen. However, field focus can also be useful on desktop computers or laptops because it shortens the number of time users need to find the correct field and fill it in. Field focus can take a number of forms.

With mobile web design, it might look like placing the entire field within the range of the mobile device screen so that the one field is all the user sees at that moment. Alternatively, highlighting the field that the user is currently working in can encourage the user to focus on that field instead of the others on the form. In the end, the web design for your online forms needs to encourage speed, simplicity, and ease for your website visitors, while allowing you to capture the information you need. If you need help striking this balance, consider hiring a professional web design company like WEBii. We can develop a web design that meets your needs and your customers’ needs in an appealing and effective way.