Insight February 19, 2019

Best Practices for Form Design that Converts


Form design might not sound sexy. It certainly isn’t the first thing clients focus on when they hire an agency to design a new webpage. Often, when people create a new website or lead generation page, their main concerns are writing copy that converts or designing a look and feel that attracts their target market.

Still, form design is a huge piece of the conversion optimization puzzle. Think about how often you have started to fill out your information on a website but abandoned the process because it was too time-consuming or required you to share information that you didn’t feel was necessary. If your form design appears too complicated, users will abandon the interaction.

The first thing users do when they see a form is scan the input fields to see how long it will take to complete the process and what information they are expected to share. You want to create a form design that is easy-to-use and convinces users that the time they invest in completing the interaction will be worth it. So, how do achieve this? We have a few ideas.

Form Design Guidelines that Put User Experience (UX) First

Less is more. We get it – data is king and one of the best places to collect it is on your own website. But while more information gathering is helpful for you, it can kill your conversion rate. Every field you ask users to complete takes time and effort. What’s more, there is an inverse relationship between the amount of effort your form requires and the likelihood that users will complete it.

If users abandon the form, you can’t capture any of their information. So, one of the key things to remember with form design is to get rid of nonessential fields. Once you have their contact information, you can always follow up with a request for more data.

Stick to one column. You want the process of completing your form to be as intuitive as possible. Otherwise, you are wasting your user’s time. A single-column form design helps minimize issues with misinterpretation. According to a study by Baymard Institute, multi-column forms can cause all sorts of issues, such as: skipping fields, inputting the wrong information, and slowing down the process as users try to understand what they are being asked to do next.

Give them an easy win. Good form design arranges fields from easiest to hardest. By putting the easiest fields first, you give users the sense that completing the form will be quick – so that when they reach the more involved questions they will already be invested in completing the form.

Let users know what you need. You can help people fill out your form faster by doing two things: mark your “optional” fields and use inline form validation. Ideally, the number of optional fields in your form design should be zero because you should only be gathering the information you need. But if you decide to include optional fields, you should mark them clearly in your form design. This allows users to skip that step and breeze through to the next question. Inline validation shows users when their form is incomplete or incorrect, so they can quickly resolve it and move on to the next step.

Bonus: Design for fat fingers. Translating your form design to mobile comes with its own set of problems – one being button size. Whether or not you suffer from fat fingers or fumble thumbs, you’ve likely encountered a CTA button that you just couldn’t click. Some people resort to enlarging their screen to make sure they click the right thing. Problem solved, right? Not really.

According to a study by Bizrate Insights, one-third of consumers felt that having to constantly enlarge their screen to click a link or button was the most frustrating issue with mobile UX. While annoying when you’re browsing the web, clicking the wrong link isn’t the end of the world. But if you’re in the middle of filling out your information and accidentally click away, it can erase all your progress.

So, when you design for mobile, it’s important to remember to size your buttons appropriately. An MIT Touch Lab study found that finger pads are typically between 10–14mm and fingertips are 8–10mm – so 10mm x 10mm would be a good minimum touch target size.

While these are some useful best practices to follow, form design is highly-contextual. There may be times where you need to break the rules, but this list is a good place to start.

Looking for help with your next web project?