Best optimization practices of landing pages

We have already said in other articles, in a landing page for lead generation, the call-to-action (the call to action, the button) is our “sacred cow”. When the conversion goal is to fill out a form (and send it, which serves our sacred button), since the first mockup of the landing page should be focused on getting the user to fulfill the fields-voluntarily, olvídemonos of Dark Patterns– and is interested in our value proposition.

In a strategy of Conversion optimization For a Lead generation landing page, the form will be a fundamental part of the analysis and testing phase. In addition to value propositions, photos, videos, layout… In this post we want to talk about something we like a lot and gives us many headaches: Form optimization.

First, we will identify the fundamental components that we must analyze in a form:

Factors for optimizing forms in landing page

1-Position of the form

Since the first mockup of a landing page, this is a fundamental decision: where do we place the form? Two basic options: above the fold or below the fold. A landing page has a “Story telling“, a script that tells us something in the right order to convince. And at some point, following the Monroe’s motivated sequence, we have to offer the user the possibility to show interest and fill in the form. It depends on how it is the script of our page and also how we have defined our Buyer person.

If we expect our user to have an impulsive attitude probably us to place the form “Above the fold“, right next to a powerful proposition of value. If, on the contrary, you are an analytical user (probably because our offer requires a deeper analysis), it may be beneficial to place A form at the bottom of the page, having shown all our weapons.

Another option, suitable for another type of buyer, is to launch the form in a Lightbox powered by a call to action. That is, split the conversion into 2 micro-conversions: The first is to click on a button that shows the form and the second is to fill the form. Surely there is someone who puts the cry in the sky cursing that “extra click” that we add to the process, but there are times when the process of persuasion and convincing the user has different nuances. And, as a reinforcement of this argument, we can study the Zeigarnik effect, which proposes that the user is more inclined to finish a task if it is already started. We manage to make the conversion process less aggressive and this can be beneficial for certain goals.

2-Call to action

The button of the form, the call to the action, the definitive click, the success of the campaign… It is a very susceptible element to be tested. It’s amazing how the color, shape, functionality and message of this button can affect the conversion rate.

In this aspect we can talk about color psychology, UX (animations, size, form,…), neuromarketing, copywritting,… It would give us five items. We will simply mention, in basic form, important characteristics that we have to take into account in the design of the button of a form:

• Contrast
• Usability: Easy to click, visible and interactive (do you do something when you pass the mouse over?)
• Clarity: Do you know what this button does?

3-Number of fields. Length of the form.

You start in online marketing, you design the first Landing pages For SEM campaigns, you apply your usability skills and the first thing you do is fight to reduce the number of fields on the form. You convince yourself that, the fewer fields you had the form, the higher the conversion rate would be. Maybe. But we could also say that if redujeramos the price of our product in half, sell more. And that’s where the discussion goes to the next level.

It has happened to us many times in Digital Menta . Remove fields from a form, increase the conversion rate but lower the quality of the leads. Then The advertiser’s sales team loses time with Invalid, confused or simply uninteresting contacts. And in addition, the sales process is made longer. The Advertiser has more conversions but has lowered his ROI. So, in cases like this, the optimization of the form would go through adjusting the number of fields that would allow the balance between the conversion rate, the quality of the leads and the investment.

However, when the form is long by necessity (a record with personal data, shipping data, payment data…), an option to optimize it is to design a Multi-step form. We divide the registration process in different steps to create a certain dynamism and to capture micro conversions. Let’s remember the Zeigarnik effect. A simplified example:

1. • A user starts the registration process on our platform. In theFirst step He gives us his name and his email.

1. • In the second step gives us your personal data (only compulsory): date of birth and country of residence.
   • In the third step, Leaves.
   • After a certain time (1 day, 1 week,… Depends on the “insistent” that we want to be), we send you a mail suggesting to finish your registration process. Only 50% of the process remains!

4-Usability in the forms

This point not only applies to the optimization of forms in landing pages, but to any form: User login, ecommerce checkout,…

You could write entire encyclopedias about usability in online forms. We would like to dedicate a post exclusively to this topic, so let’s leave it in a summary.

Designing and developing an online form has a lot in common with designing, for example, a washing machine. If I do not need some instructions to understand how it works, I do not have to guess if I’m doing well, the boot button is not hidden, is readable… Ergonomics applied to web design, precious.

Here are some good practices in form design:

1. • Make the Real-Time field validation. The frustration that creates an error message when submitting a form causes unwanted bounce rates.

1. • Validates inline fields. Do not show errors far from each field. Is the e-mail invalid? Tell them next to the email field, not next to the Send button.

1. • Offers “Default” Options. For example, when you ask “where you met”, leave a preselected option. So the user can skip that field if it matches his response. Or, if it’s a booking form, make itThe start date is today By default.
   • Be very careful with the tags associated with the fields! Sometimes, to save space, we remove the “label” and leave only one placeholder in the field. If we lose sight of this placeholder, if the browser does not show it… The user does not know what to put in that field.

1. • On mobiles, this label theme is much more critical. Care!

1. • Mobile forms design is a world apart. A very advisable practice is to try to take advantage of the Native Phone Resources: calendar, numeric keypad,…

Here are some examples of forms that make you want to fill out: