How to Optimize Form Design

Posted on Oct 1, 2018 - By Martina Bretous

Filling out forms is usually not an exciting experience and users often try to avoid form until they have no other choice but to fill them out. With this aversion to forms, it’s up to designers to make the experience quick and enjoyable for users. Forms serve several purposes, from provisioning user accounts and generating leads to eCommerce. The designs for these different types of forms can vary depending on the conversion goal you want to meet. However, there are some standard tips on optimizing forms to improve the user experience.

Before you try any of these tips out, remember that all forms designs are subject to testing. A/B testing is an essential part of designing a website, as it gives you insight into your users and their needs. With this in mind, try out these form design tips and don’t be afraid to make your own variations to better suit the needs of your site.

Attract Users

One of the most important aspects of a form is its clarity. Nothing deters a user faster than an unclear and confusing form. You want to ensure that your copy, fields, labels and calls-to-action are always clear and accessible to users. The type of form you are designing will also dictate where it should be placed on the page. If your users are already highly motivated, having the form above the fold could be the way to go. However, some users may require additional information to be motivated to fill out the form. For example, a user in need of a service will most likely fill out a form right away in order to receive that service. However, if your site is only offering information, you may first need to convince the user that the information you will provide is valuable.

In addition, remember to consider mobile users who are increasingly accessing websites through portable devices like smartphones and tablets. With less space to work with, you want to ensure you are efficiently using the space you do have. If a form requires multiple scrolls, it may overwhelm the user, so a multi-step form should be tested first. Additionally, form fields should allow users to fully see what they are typing as well as the context, such as the label for the field, to avoid users getting lost during the process.

Simplify the Process

When it comes to forms, sometimes less is more, especially on mobile. Because forms are often seen as burdensome and boring, it’s important to facilitate the process and motivate users to continue until the end. This means implementing a few design techniques that will simplify filing out the form, including:

  • Removing extraneous fields – Forms with a many fields can be intimidating to users and increase the page’s bounce rate. So when creating forms, figure out what’s absolutely necessary and remove whatever isn’t an essential part of your flow. For instance, if your form is for lead generation and encourages users to subscribe to your service, you probably don’t need much more than a name, address and perhaps a phone number. Prioritize the information you want to capture and that holds the most value to your specific flow.
  • Using conditional logic – Part of the reason forms can be long and strenuous is because they may contain information for all users, instead of personalizing the form based on a user’s specific needs. By using conditional logic in the beginning of the form, you ensure that users only get form fields pertaining to them and therefore, increase the chances they will remain on the page.
  • Auto formatting – This tool is a great way to prevent friction while using a form as it automates users’ responses based on the category. Receiving an error message for including spaces while inputting credit card information, for example, can cause anxiety and confusion in users. To avoid this, web developers can include a code that auto formats some fields, letting users input information in various ways.
  • Correct markup Some common entries in a form include phone number, email and credit cards. To facilitate the process, it’s important that the keypad adapts based on the field the user selects. For instance, if asked to enter a phone number, the user should automatically be presented a number pad to expedite the process. The same goes for emails and dates. This requires implementing the proper HTML markup in the appropriate fields to ensure users complete forms seamlessly.

Deciding Between Design Techniques

As mentioned before, designing a form is all about testing. Many wonder if they should pick one design technique over another and what the advantages for each technique may be. The following list outlines some common form design optimization methods and where they’re best applied:

  • Labels to the side, above the form field, or inline – Research has shown that inline labels and those placed directly above the form field generate a higher conversion rate than labels placed to the side. This is mostly due to the eye movement that occurs during when scrolling through a form, as it is much easier to follow the information on a form when the label is placed inside or on top of the text. When the text is on the side, users are required to move their eyes back and forth to stay on course, which can become confusing. Finally, while inline text acts as a space saver, users can forget the purpose of the field as soon as they start typing because of the distance created by this format.
  • Dropdown menu, checkbox or radio box – Each of these options offer their own advantages and drawbacks. The rule of thumb is to use one of the options listed above based on the type of question and the number of options available. When only one option can be chosen and you have a range of choices, it’s best to use radio buttons. On the other hand, dropdown menus are ideal when there are more than six options, and checkboxes are best when more than one option can be selected.
  • Progress indicators – When it comes to informing users on their progress when completing a form, it’s important to find the right balance. If the progress indicator is slow moving, it may discourage the user from continuing. On the other hand, a quickly-moving progress bar may motivate a user to complete the task. With this in mind, consider the length of the form before implementing a progress indicator. If you do decide to add a progress measure to your form, make sure the indicator is determinate and continues to increase throughout the entire process.

The strategies mentioned above are not strict guidelines, but should instead be used as recommendations for testing. Ultimately, your form should be simple, straightforward, and tailored to your audience and site flow.