Did you know that you can increase your conversion rate by 120% by simply reducing the number of fields in a form from 11 to 4, with the optimal number of fields for a landing page being at 3? You can also increase conversions in a multi-field form by spreading it over multiple pages, with a 13.85% conversion rate, compared to 4.53% conversion rate for a single page form. Even a seemingly meaningless change, such as switching the text on the submit button from “Continue” to “Next” can almost double conversions from 24.6% to 43.6%. In this article, we’re going to take a look at how certain details can help increase the UX of your input forms using strategic web design.
There are several label options to choose from, each with their pros and cons. To start, you have the above the field placement, which has been validated by Google’s own research into UX. It adapts easily to all screen sizes, making it perfect for responsive designs. You then have the left-justified label, which is placed before the field. This placement is great for longer forms, but it is not suited for smartphone screens.
Animation can also be used here, when placing the label inside the field. In this case, once a user clicks on the label, the label moves above the field. This option saves space, and works well with more complex forms. You can also go with a label that simply disappears instead of being animated, but this option is not optimal from a UX/marketing perspective. Disappearing labels complicate the process, especially in large forms, because a user might forget what information belongs in the selected field. In smaller or single-entry forms, this option is adequate.
Form best practices
There are several best practices that affect the form overall. To start, you want to group your fields and labels visually using spacing and padding. For example, you do not want to have equal padding between one label and two fields. Instead, a label should be closer to the field it demarcates, and further from a separated field.
Research has also shown that autofocusing the first field of a form will encourage conversions. This can be done by emphasizing the first field with a thicker border, a different background color, or an accent border color. When it comes to the label font, you never want to use all-capitalized letters, because they are harder to read.
Filling the form
By adding auto-fill to your form, you can decrease the amount of time it takes to fill out a form by 30%. You can use customer data if the customer is already registered, and there is some information which can be accessed for new users, such as previously recorded auto-fill data or their location and area code.
You also have the option of adding a masked input, which automatically formats the input information. This is great for dates, phone numbers, time and other related fields. And, of course, you want to implement form validation, which will very clearly distinguish any field that contains an error.
We’d also like to touch a bit on dropdown menus. These menus work well for fields that have more than two or three predefined options, but for shorter lists, you are better off with radio buttons. This ensures that the user is not slowed down while filling the form, as any marketing agency will tell you.