17 elementos-chave para um formulário de página de destino de alta conversão [comprovado]

Quanto os formulários da página de destino podem afetar seus resultados?

Vejamos a Expedia: em 2010, a Expedia descobriu que um campo de formulário opcional intitulado "Empresa" custava US$ 12 milhões por ano.

O que?!

Sim.

Os visitantes que clicaram no botão “Reservar agora” estavam preenchendo um campo opcional “Empresa” com o nome do banco e, em seguida, adicionando o endereço do banco em vez do endereço residencial, levando a centenas de transações com falha.

Depois que eles removeram o campo de formulário extra, as vendas dispararam da noite para o dia.

Caramba.

Quando se trata de formulários de página de destino, pequenos acidentes contribuem para conversões massivas o tempo todo.

Essa é uma das razões pelas quais os formulários da página de destino são um dos elementos mais estudados em todo o marketing.

Boas notícias: após anos de design de página de destino e otimização de conversão, reduzimos o formulário de página de destino perfeito para 17 elementos baseados em dados. Neste artigo, vamos detalhar como otimizar cada um (com exemplos).

Acerte-os e você terá ouro de conversão.

Se você errar, você pode acabar perdendo conversões como a Expedia.

Primeiro, antes de passarmos para as práticas recomendadas e exemplos, vamos esclarecer qualquer confusão sobre se todas as páginas de destino precisam ou não de formulários.

Resposta curta: sim e não.

Deixe-me explicar…

Existem dois tipos de páginas de destino: páginas de captura de leads e páginas de clique.

As páginas de captura de leads (páginas de geração de leads) incluem formulários diretamente na página de destino. Afinal, sem um formulário, como você capturará as informações do lead para que as vendas possam acompanhar?

Por exemplo, a página de destino de automação de marketing da Blueshift apresenta um formulário de lead solicitando informações de contato. Depois que os clientes em potencial enviarem suas informações de contato, a equipe de vendas da Blueshift entrará em contato com o lead para agendar uma demonstração. Simples.

As páginas de clique, por outro lado, não incluem formulários na página de destino. Em vez disso, quando você clica em um botão de call-to-action (CTA), ele abre (ou clica em) uma página de conversão onde os clientes em potencial podem concluir sua meta de conversão imediatamente (ou seja, nenhuma informação de lead é necessária).

Por exemplo, o Norton usa uma página de destino de clique para aquecer os clientes em potencial antes de vender seu software antivírus. Como os clientes em potencial podem comprar diretamente do site (sem necessidade de equipe de vendas), eles não precisam de um formulário de lead.

Então, quando se trata de formulários em páginas de destino, tecnicamente, apenas as páginas de captura de leads incluem formulários.

No entanto, mesmo que uma página de clique não inclua um formulário na página de destino, há uma grande probabilidade de que ela clique em uma página que inclua, como uma página de criação de conta, página de registro ou página de checkout.

Por exemplo, até a página de cliques do Norton inclui um formulário de pagamento eventualmente:

Dica: nem todas as landing pages incluem formulários, mas em algum momento, todo caminho para a conversão passa por um formulário. Você não pode evitá-los. E, no mínimo, todo site precisa de um formulário de contato. Então ouça!

Sem mais delongas, vamos explorar os 17 elementos de um design de formulário de página de destino de alta conversão (em nenhuma ordem específica):

1. Layout do formulário
2. Técnica Breadcrumb (multi-passos)
3. Indicadores de progresso
4. número de campos
5. Rótulos de campo
6. Texto do espaço reservado
7. Acionadores de clique
8. Microcópia
9. Chamada para ação (CTA)
10. Formulário pop-up vs. incorporação
11. Preenchimento automático
12. Formatação automática
13. Prova social
14. Obrigatório vs. opcional
15. Compatível com dispositivos móveis
16. Lógica condicional
17. Botões de opção x menus suspensos

Quando se trata de formulários, você tem três opções de layout: coluna única, coluna dupla ou híbrida.

Um formulário de coluna única é um formulário linear com campos de formulário organizados em uma linha reta de cima para baixo. Por exemplo, este formulário de lead da Hellosign apresenta um layout de coluna única:

Um formulário de coluna dupla, por outro lado, apresenta duas colunas de campos de formulário organizados em linhas de cima para baixo. Por exemplo, este formulário de lead do Hubspot apresenta um layout de coluna dupla:

E por último, um formulário híbrido é um formulário com colunas simples e colunas duplas. Por exemplo, este formulário do Oscar apresenta um layout híbrido:

Durante anos, os formulários de coluna única foram considerados o melhor layout de formulário para conversões mais altas.

Por exemplo, Peep da CXL afirmou no passado que os formulários de coluna única têm um desempenho melhor do que os formulários de coluna dupla. Ben Labay (designer de UX e diretor de marketing da Speero) chegou a publicar um estudo que declarava formas lineares mais rápidas e, portanto, melhores.

Mas nem todos concordam.

Por exemplo, a Hubspot testou o formulário de coluna única e descobriu que seu formulário de coluna dupla superou em 57% o formulário de coluna única.

Por quê? Mais campos de formulário.

O formulário do Hubspot tem 13 campos de formulário; um layout de coluna única parecia assustador. É provável que a forma mais curta de coluna dupla tenha convertido mais alto.

Dica: Quando se trata de layout de formulário, considere o número de campos de formulário antes de escolher uma opção.

Se você tiver oito ou menos campos de formulário, um formulário de coluna única pode funcionar melhor. Existe uma tonelada de evidências que provam que formulários mais curtos e de coluna única são mais fáceis e rápidos de preencher, pois não interrompem o impulso vertical de cima para baixo.

Se você tiver mais de 10 campos de formulário, como o Hubspot, um formulário de coluna dupla provavelmente terá um desempenho melhor. Nesse caso, o formulário de coluna dupla faz com que o comprimento do formulário pareça mais curto e menos sobrecarregado.

Para obter o melhor dos dois mundos, experimente uma forma híbrida: use algumas linhas de coluna dupla para encurtar a forma, mas algumas linhas de coluna única para manter o ritmo.

E se você realmente deseja aumentar as conversões de formulários, considere um formulário de coluna única dividido em várias etapas. Isso nos leva ao nosso próximo ponto…

Um formulário de várias etapas (AKA The Breadcrumb Technique) divide formulários longos em várias etapas, cada etapa com no máximo 3-4 campos de formulário (de preferência em uma única coluna).

Mas isso não é tudo.

Os formulários de várias etapas usam a psicologia comportamental para microconverter clientes potenciais de um estágio para o próximo, fazendo perguntas fáceis primeiro, deixando as perguntas intimidantes para o final.

Huh?

A psicologia comportamental nos diz que as pessoas gostam de terminar as coisas que começaram. A magia da Técnica Breadcrumb é fazer com que eles comecem fazendo perguntas de softball primeiro.

Por exemplo, nosso próprio formulário de lead usa um formulário de várias etapas dividido em quatro etapas. Mas em vez de pedir primeiro um endereço de e-mail e número de telefone (altamente intimidante), pedimos por último. Na verdade, os três primeiros passos fazem perguntas não ameaçadoras:

Resultados? Mais conversões.

Vamos ver os dados...

Convertemos o formulário de um cliente nosso em duas etapas (e pedimos nome, telefone, e-mail por último). Com isso conseguimos:

• Uma redução de CPA de US$ 800+ para US$ 35
• Um aumento do volume de conversão de 6 para 135/mês
• Um aumento na taxa de conversão de 1% para quase 20%

Aqui está o formulário:

E aqui estão os resultados:

Fizemos o mesmo com outro cliente e obtivemos um aumento de 74% nas conversões e uma queda de 51% no CPA.

Mas não somos os únicos a usar formulários de várias etapas. As melhores páginas de destino de geração de leads e SaaS também usam formulários de várias etapas.

Por exemplo, o rastreamento de veículos Lytx usa um formulário de várias etapas em sua página de destino:

E o ADP usa um formulário de várias etapas em sua página de destino:

Conclusão: As únicas instâncias em que os formulários de várias etapas não converteram mais do que os formulários de uma única etapa foram para ofertas de baixo valor e baixa solicitação, como guias, whitepapers ou e-books. Para todas as outras páginas de destino de geração de leads padrão (ou seja, solicite uma demonstração ou consulta gratuita), os formulários de várias etapas convertem mais do que os formulários de uma única etapa.

Se você optar por formulários de várias etapas, não se esqueça dos indicadores de progresso (especialmente para formulários mais longos).

Indicadores de progresso (ou barras de progresso), como o nome sugere, usam marcadores visuais para indicar aos visitantes onde eles estão no formulário e quanto tempo eles têm até a conclusão.

Por exemplo, o ADP indica o progresso numerando cada etapa de seu formulário e destacando a etapa atual em azul:

Dois outros tipos de barras de progresso incluem porcentagem concluída e etapas rotuladas (sem números):

Porcentagem concluída

Passos restantes (sem números)

Dica: Quando se trata de indicadores de progresso, use-os generosamente. Estudos mostraram que visualizar um caminho claro para a conclusão pode aumentar as conversões de formulário e reduzir o abandono do carrinho. Por último, não se esqueça de alternar facilmente entre as etapas.

A pergunta de um milhão de dólares: quantos campos de formulário devo incluir nos meus formulários da página de destino?

De acordo com o Hubspot, o formulário típico de geração de leads consiste em cinco campos de formulário:

E de acordo com o Hubspot novamente , quanto maior o formulário, menores as conversões:

Parece lógico, certo?

Não tão rápido.

Sim, é verdade que campos de formulário mais curtos geralmente levam a conversões mais altas, mas nem sempre.

Por exemplo, em um famoso experimento de Michael Aagaard (ex-Unbounce), ele descobriu que remover três campos de formulário (de 9 para 6) na verdade reduzia as conversões em 14%.

O que aconteceu? Michael concluiu que os três campos que ele eliminou eram, na verdade, os três campos com os quais os prospects mais se engajavam. Então, ele os adicionou de volta e atualizou a cópia para limitar o atrito e experimentou um aumento nas conversões em 19% em relação ao original.

Em outro exemplo, a CXL descobriu que apenas pedindo um e-mail, as conversões eram 13,56% menores do que quando também pediam nome, estado e experiência de direção:

Quando se trata de geração de leads, se tudo o que você faz é eliminar campos de formulário, o que resta para seus clientes em potencial?

Ou nada além de perguntas intimidantes como nome, número de telefone e e-mail. Nesse caso, apenas o medo pode fazer com que você perca conversões.

Ou não há perguntas suficientes para fazer com que os clientes em potencial sintam que você responderá às perguntas deles corretamente.

Além disso, formulários mais curtos podem aumentar as conversões ao reduzir os campos do formulário, mas ao mesmo tempo diminuir a qualidade do lead. Não bom.

Dica: Todos concordam que você deve eliminar campos de formulário desnecessários (ou seja, perguntas para as quais você não precisa de respostas). Se você deve ou não adicionar mais campos ou eliminar campos, depende do contexto.

• Motivação: Leads mais quentes e mais próximos da compra têm uma maior propensão a preencher formulários mais longos porque têm uma alta motivação para comprar (ou seja, nada vai atrapalhar). Por exemplo, se eu quiser uma estimativa de empréstimo hipotecário, preencherei 20 campos do formulário para recebê-la. Não tanto para um ebook grátis.
• Meta de conversão: uma assinatura de e-mail ou registro de webinar sob demanda requer muito menos campos do que um formulário de geração de leads. Dois objetivos diferentes, dois tamanhos de formulários diferentes. Não há necessidade de várias etapas para um simples opt-in por e-mail.
• Qualidade do lead: se a qualidade do lead for mais importante do que o volume do lead, adicione mais campos de formulário e colete mais informações. Mas se a qualidade do lead não importa mais do que o volume do lead (ou seja, você está coletando dados próprios para criar um público de anúncio personalizado), menos campos de formulário para a vitória.
• Estrutura: Se você está fazendo uma solicitação séria, como agendar uma demonstração ou se encontrar com um representante de vendas, um formulário de várias etapas é como um código de trapaça. Você pode fazer mais perguntas simplesmente dividindo-as em etapas menores.

Por último, entramos em contato com Oli Gardner, CEO e fundador da Unbounce, para obter seu feedback sobre o tamanho do formulário. Aqui está o que ele disse:

“Comecei com a mesma mentalidade que a maioria das pessoas tem, que menos campos de formulário têm melhor desempenho.

Do ponto de vista da conversão, isso ainda é verdade. Mas você ficaria surpreso ao ver como a adição de mais alguns campos pode afetar os resultados.

Às vezes, o comprimento do formulário não faz muita diferença e, se você estiver interessado em qualidade em vez de quantidade, o atrito extra pode ser uma coisa boa.

Mas escolha esses campos com cuidado, ou o atrito criará dados falsos.

Por exemplo, vi um formulário que oferecia um relatório sobre uma nova tecnologia de pagamento com chip e pin. O formulário incluía um campo de botão de opção ao lado da chamada para ação que perguntava se eu era um empregador ou candidato a emprego, nenhum dos quais tinha qualquer relevância para a oferta - e era um campo obrigatório!

Perguntas desnecessárias farão algumas pessoas fugirem, e o resto simplesmente clicará aleatoriamente para ignorar a pergunta, poluindo os dados e tornando-os inúteis.”

As etiquetas dos campos referem-se à microcópia acima, ao lado, ou dentro do campo do formulário que indica o nome de cada campo do formulário respectivo.

Por exemplo, no formulário abaixo, os dois rótulos de campo lêem “E-mail” e “Senha” (colocados no topo dos campos do formulário):

Quando se trata de posicionamento de rótulos, você tem três opções principais:

• No topo (alinhado à esquerda)
• Em linha (alinhado à esquerda)
• À esquerda do campo (alinhado à direita)

Vamos rever cada um.

No topo (alinhado à esquerda)

A etiqueta é colocada acima da caixa de campo do formulário e empurrada para a esquerda.

Por exemplo, o formulário de criação de conta SEMRush que acabamos de mostrar (acima) coloca os rótulos do formulário no topo dos campos, alinhados à esquerda.

Quando se trata de conversões, a pesquisa mostra que os rótulos alinhados à esquerda na parte superior do campo do formulário convertem mais. Por quê? Porque são os mais fáceis e rápidos de preencher.

Por exemplo, usando o software de rastreamento ocular, você pode ver que os rótulos alinhados à esquerda na parte superior do campo do formulário mantêm os olhos do visitante focados nos campos e rótulos do formulário com carga cognitiva limitada:

Inline ou “infield” (alinhado à esquerda)

A etiqueta é colocada dentro da caixa de campo do formulário e empurrada para a esquerda.

Por exemplo, o formulário Bob HR abaixo coloca rótulos de campo dentro da caixa de campo:

Os rótulos de campo embutidos funcionam bem para formulários curtos como este, especialmente se você estiver solicitando apenas informações básicas, como nome ou número de telefone.

Mas para formulários mais longos com campos de formulário mais complexos, os formulários embutidos criam um pesadelo para a experiência do usuário, especialmente em dispositivos móveis.

Por quê?

Depois de clicar em uma caixa, o rótulo desaparece. Se você esquecer o que o rótulo disse, a única maneira de descobrir novamente é excluir toda a sua entrada e começar de novo. Caramba.

À esquerda do campo (alinhado à direita)

A etiqueta é colocada à esquerda da caixa de campo (fora dela).

Embora não sejam tão eficientes quanto os rótulos colocados no topo dos campos do formulário (porque os visitantes precisam mover os olhos da esquerda para a direita, para cima e para baixo), os rótulos colocados à esquerda dos campos do formulário também exigiam carga cognitiva limitada.

Dica: coloque rótulos de campo no topo dos campos do formulário (alinhados à esquerda) para obter melhores resultados. E se você quiser o melhor dos dois mundos, experimente os rótulos de formulário embutidos que se movem para o topo do campo do formulário quando alguém começa a digitar, assim:

Não importa qual opção você escolher, preste atenção ao seguinte:

• Use rótulos de texto simples: rótulos em negrito podem parecer atraentes, mas são mais difíceis de ler
• Espaço em branco: certifique-se de que seus campos de formulário e rótulos tenham espaço em branco adequado entre eles
• Alinhamento de texto: para reduzir a carga cognitiva, alinhe o texto à direita ao colocar rótulos de campo à esquerda dos campos e alinhe o texto à esquerda ao colocar rótulos de campo na parte superior ou em linha
• Proximidade: faça o que fizer, mantenha os rótulos próximos aos campos do formulário

O texto do espaço reservado é uma dica, descrição ou exemplo colocado no campo do formulário (geralmente em cinza claro) que desaparece quando alguém começa a digitar. O texto do espaço reservado é como um rótulo embutido, só que em vez de um nome de rótulo, é um exemplo de um envio real.

Por exemplo, Oscar usa texto de espaço reservado em cada um de seus campos de formulário de captura de lead:

Estudo após estudo confirma que o uso de texto de espaço reservado embutido cria uma experiência de usuário ruim e reduz as conversões de formulário.

Por quê? É um fardo desnecessário, na verdade.

• Como os rótulos embutidos, o texto do espaço reservado desaparece quando você começa a digitar, forçando os visitantes a excluir sua entrada se esquecerem o texto da dica do espaço reservado
• Se aparecer uma mensagem de erro, os visitantes não sabem como corrigir o problema
• Os espaços reservados embutidos tornam os campos vazios menos visíveis. O software de rastreamento ocular mostrou que os olhos das pessoas são atraídos por caixas vazias, não cheias
• O baixo contraste de cores dificulta a leitura, especialmente para deficientes visuais

O que fazer em vez disso?

Se você sentir a necessidade de fornecer instruções para cada formulário (o que pode fazer todo o sentido), coloque as instruções abaixo dos rótulos dos campos, mas acima do campo do formulário. Por exemplo:

Um acionador de clique é um pequeno pedaço de cópia atraente colocado sob ou ao redor de um CTA de formulário ou botão de envio projetado para eliminar dúvidas e levar os visitantes a uma conversão.

Por exemplo, esta página de destino da Lusha usa sua classificação por estrelas e um número total de comentários, juntamente com "Não é necessário cartão de crédito", para lembrar aos visitantes por que eles devem clicar no botão "Iniciar gratuitamente".

Ou este exemplo mais antigo da ContentVerve viu um aumento de 87% nas assinaturas de newsletters por e-mail, adicionando alguns pontos relacionados a benefícios ao formulário de inscrição:

Dica: use acionadores de clique para antecipar e lidar com as objeções do seu cliente potencial sobre o que está do outro lado do seu formulário.

Microcópia é um termo amplo que se refere aos pequenos trechos de cópia em seu formulário usados ​​para instruir ou informar os visitantes.

Tecnicamente, acionadores de clique, rótulos de campo e espaços reservados são exemplos de microcópia de formulário, mas, neste caso, estamos falando especificamente de microcópia que ajuda a reduzir o atrito, dizendo aos visitantes por que você precisa de determinadas informações ou como vai use-o.

Embora pequena na presença, a microcópia pode ter um enorme impacto nas conversões de formulário.

Por exemplo, abaixo está um exemplo de uma microcópia de formulário que informa aos visitantes por que eles precisam de um número de telefone para concluir sua compra de comércio eletrônico (já que muitos podem achar essas informações desnecessárias e abandonar):

Outro tipo comum de microcópia consiste em mensagens de erro como a abaixo:

A microcópia converte? Pode apostar.

Por exemplo, como o custo é o principal motivo pelo qual as pessoas abandonam os carrinhos, o Yoast adicionou a frase “não haverá custos adicionais” ao formulário de checkout e aumentou as conversões em 11,30%.

Ou este exemplo de um ex-designer de UX da Hubspot que descobriu que as transações não estavam sendo concluídas porque as pessoas estavam digitando os endereços errados. Ao adicionar uma linha de microcópia, ele aumentou significativamente as conversões de formulário (e reduziu os custos de suporte ao cliente).

Conclusão: os visitantes nem sempre sabem por que você precisa de informações, como usará as informações ou a importância de inserir as informações corretas, a menos que você diga a eles. Introduza a microcópia como parte da interface do formulário para se proteger contra perspectivas confusas ou apreensivas.

Nenhum formulário está completo sem um CTA atraente e atraente que motiva a ação.

Quando se trata de criar botões de call-to-action, duas coisas importam sobre todo o resto: cópia e contraste.

Primeiro, CTAs genéricos como enviar, enviar, iniciar, pagar ou ativar são o que chamamos de “botões de esforço”; eles fazem os visitantes sentirem que algo trabalhoso está por vir. Evite a todo custo.

Em vez disso, opte por botões baseados em valor, como receber, obter, desfrutar, visualizar ou descobrir, todos os quais fazem os visitantes sentirem que uma recompensa (não um esforço) espera do outro lado do formulário.

Por exemplo, Jarvis oferece um CTA claro, atraente e orientado para a ação que você não pode deixar de clicar:

Interessado em mais? Temos 61 ideias adicionais para botões baseados em valor.

E segundo, aumentar as conversões de formulário tem menos a ver com a cor do botão e mais com o contraste de cor do botão e do plano de fundo.

Por exemplo, neste estudo de caso de nosso cliente, Darwin Homes, o teste A/B da cor do botão CTA ajudou a reduzir o CPA em 45% e aumentar sua taxa de conversão em 22%.

Dica: adicione um benefício claro à cópia do CTA do botão de formulário (e evite CTAs genéricos) e certifique-se de que seu botão chame a atenção contrastando-o com o plano de fundo.

Lembra quando falamos sobre formulários de várias etapas e como eles microconvertem os visitantes de um estágio para o outro, facilitando o início do formulário?

O mesmo se aplica ao seu botão de formulário.

Em vez de incorporar um formulário em sua página de destino, experimente colocar um botão de CTA em seu lugar e, em seguida, abrir o formulário em uma caixa de luz pop-up ou enviar tráfego para uma página de conversão uma vez clicada.

Em um estudo da Aweber, eles descobriram que colocar seu formulário atrás de um botão pop-up em vez de incorporá-lo na página de destino aumentou as conversões em 1.375%.

Em um estudo da Hubspot, eles descobriram que substituir seu formulário por um botão de CTA que levava a uma página de inscrição dedicada aumentava as taxas de conversão em 0,4% (de 2,4% para 2,8%). Isso pode não parecer muito, mas ao longo de milhares de visitas, isso equivale a centenas de conversões a mais.

Por exemplo, tanto o Intercom quanto o AllHands (abaixo) colocam o formulário da página de destino atrás de um botão pop-up:

Dica : Como sempre, teste tudo. Mas esconder um formulário intimidador atrás de um botão tornará mais fácil para os visitantes dar o primeiro passo. E uma vez que damos o primeiro passo, temos uma maior propensão para dar o próximo passo.

Formulários de preenchimento automático referem-se a formulários que usam os dados do navegador de seus visitantes para preencher automaticamente (ou preencher automaticamente) campos como nome, número de telefone, informações de cartão de crédito e endereço, em vez de forçar os visitantes a preenchê-los por conta própria.

De acordo com o Google, o preenchimento automático pode tornar o preenchimento de seus formulários até 30% mais rápido, aumentando assim as conversões ao longo do caminho.

Dica: Ninguém gosta de preencher um formulário da web, especialmente em dispositivos móveis. Use o preenchimento automático para reduzir o atrito e aumentar as conversões.

Você já preencheu um formulário apenas para descobrir que esqueceu de colocar parênteses ao redor do seu código de área ou que adicionou muitos espaços entre os números de cartão de crédito - então teve que começar de novo?

Mesmo.

Para tornar seus formulários mais fáceis de preencher (e para reduzir a carga cognitiva e limitar os erros de formato), não faça seus clientes potenciais adivinharem se eles precisam ou não adicionar um traço, parênteses, vírgula, barra ou nenhum: formate automaticamente seus campos para que não não importa como os visitantes digitem as informações, o formato se corrige sozinho.

Por exemplo, este campo de formulário formata automaticamente o valor em dólar à medida que você adiciona mais números:

Melhor ainda, você pode usar um recurso chamado “mascaramento de texto” que não apenas formata automaticamente os valores corretamente, mas também fornece espaços reservados em linha que informam quanto mais você precisa inserir.

Dica: Use a formatação automática para datas, números de telefone, números de cartão de crédito ou qualquer outro valor numérico (por exemplo, preço, renda) que possa exigir formatação específica. Não apenas reduzirá os erros de formatação e aumentará as conversões, mas também garantirá que os dados de envio do formulário tenham a mesma aparência.

A prova social refere-se a avaliações de terceiros, depoimentos, classificações por estrelas ou qualquer outro selo confiável que indique que outras pessoas tiveram sucesso com seus produtos ou serviços.

Por que a prova social é importante? 66% dos clientes dizem que a presença de prova social aumentou sua probabilidade de comprar.

Por que a prova social funciona tão bem? Porque quando as pessoas têm dúvidas sobre o compromisso ou incerteza sobre a escolha, elas buscam inspiração em pessoas que já fizeram a mesma escolha. E na maioria das vezes, eles escolhem o que os outros escolhem.

Se você pensou que só precisava de prova social em sua página de destino real, pense novamente.

Coloque provas sociais como avaliações por estrelas, depoimentos ou logotipos de clientes próximos ou ao redor de seus formulários para lembrar as pessoas de que estão tomando a decisão certa.

Especialmente para páginas de clique (ou seja, páginas de destino que clicam para uma página de conversão, como uma página de checkout ou uma página de criação de conta), coloque a prova social ao lado do seu formulário também.

Por exemplo, Jarvis coloca a contagem de clientes e os logotipos do cliente ao lado do formulário de criação de conta:

O InvisionApp também apresenta prova social ao lado de seu formulário, desta vez na forma de depoimento de um de seus clientes (Uber):

Dica: apimente a prova social ao redor ou perto do seu formulário para lembrar aos visitantes por que eles devem continuar.

Se um campo de formulário não for obrigatório, pergunte a si mesmo se você realmente precisa dele ou não, para começar. Caso contrário, elimine completamente os campos desnecessários.

No entanto, se você considerar o campo opcional necessário e precisar justapô-lo dos campos obrigatórios, siga estas práticas recomendadas:

• Rotule os campos obrigatórios com um asterisco vermelho: Precisa ser um asterisco vermelho? Não. Mas um asterisco vermelho é o padrão para campos obrigatórios, e seus usuários esperam isso.
• Colocar asteriscos à esquerda dos rótulos: Ao colocar asteriscos antes dos rótulos, fica mais fácil para os visitantes digitalizarem o lado esquerdo do formulário, de cima para baixo, para os campos obrigatórios.
• Considere um rótulo “obrigatório”: Se você quiser adicionar um rótulo “obrigatório” além do asterisco, é melhor colocar o texto fora do campo (ou seja, no topo do campo do formulário) em vez de embutido.
• Rotular campos opcionais também: rotular campos opcionais também pode ajudar a reduzir a carga cognitiva, pois os visitantes não precisarão inferir a opcionalidade; em vez disso, o formulário irá informá-los explicitamente. Não é necessário, mas um belo bônus.
• Evite não rotular os campos obrigatórios: em alguns casos, você pode achar desnecessário rotular os campos obrigatórios. Não faça isso. Sempre rotule os campos obrigatórios.

Dica: não há nada de sexy nos rótulos de campo obrigatórios – e é exatamente por isso que você não deve ser fofo com eles. De acordo com a Lei de Jakob, como os visitantes do seu site passam a maior parte do tempo em outros sites, eles esperam que seu site siga os mesmos princípios básicos de experiência do usuário que todos os outros. Qualquer desvio e você joga uma chave em seu modelo mental.

Isso não é preciso dizer, mas como mais de 50% do tráfego da Internet agora acontece a partir de um dispositivo móvel, se seu formulário não for otimizado para uma tela menor (responsiva a dispositivos móveis), você provavelmente está perdendo conversões.

Como é um formulário otimizado para dispositivos móveis? Que tal quatro toques e um deslize para reservar um hotel?

Quando se trata de otimizar formulários para dispositivos móveis, aplicam-se as mesmas regras que acabamos de descrever neste artigo, mas seu impacto é mais ampliado.

Por exemplo, as pessoas têm pouca paciência para rótulos de campo mal colocados em uma área de trabalho, mas eles vão te dar uma pausa porque é fácil descobrir e navegar em uma tela maior.

No entanto, quando se trata de um dispositivo móvel, as pessoas têm muito menos tolerância ao atrito de usabilidade, já que um polegar estranho e um formato minúsculo já proporcionam uma experiência desagradável.

Ao projetar seus formulários para dispositivos móveis, aplique as mesmas práticas recomendadas que já descrevemos neste artigo, juntamente com o seguinte:

• Texto maior
• Botão de CTA maior
• Mais espaço em branco entre os campos e ao redor dos botões (para facilitar o toque)
• Sem menus suspensos, opte por botões de opção (os menus suspensos demoram mais para serem preenchidos no celular)
• Opte por um formulário incorporado ou uma página de formulário separada em um pop-up

Dica: layouts de coluna única, várias etapas, barras de progresso, preenchimento automático, rótulos de campo… tudo se aplica também ao celular, apenas em uma tela menor.

A lógica condicional permite que você personalize dinamicamente sua experiência de formulário com base nas respostas de seus visitantes.

Embora todos comecem o formulário com a mesma pergunta, dependendo de como respondem, eles podem terminar em dois pontos muito diferentes.

A lógica condicional aumenta as conversões encurtando os formulários, reduzindo o número de opções por pergunta (ou seja, eliminando etapas desnecessárias) e criando uma experiência de formulário mais personalizada.

Conclusão: um formulário básico de geração de leads não se beneficiará da lógica condicional, pois não exigirá informações personalizadas suficientes. Mas para formulários mais longos, formulários de inscrição ou formulários de qualificação de leads, a lógica condicional pode transformar um pesadelo de um formulário em uma experiência agradável.

Quanto menos seus visitantes precisarem trabalhar para preencher seu formulário, maior a probabilidade de que mais deles o preencham. Período.

De acordo com a CXL, depois de executar um teste para ver se os botões de opção ou listas suspensas eram mais fáceis de preencher, eles descobriram que os entrevistados preenchiam os botões de opção 2,5 segundos mais rápido do que as listas suspensas.

Assim como os botões de opção, as caixas de seleção também são mais fáceis de preencher.

Qual é a diferença? Os botões de opção são para quando várias opções são mutuamente exclusivas (ou seja, você só pode selecionar uma opção), as caixas de seleção são para quando você pode selecionar mais de uma opção.

Costumávamos usar menus suspensos em nosso formulário de várias etapas também, depois os trocamos por caixas de seleção. Agora, não apenas ficou mais fácil e rápido preencher nosso formulário (especialmente no celular), mas também conseguimos mais conversões.

Dica: Na maioria dos casos, opte por botões de opção ou caixas de seleção em vez de menus suspensos. No entanto, exercite o bom senso. Se você tiver dezenas de opções, como, digamos, selecionar um estado ou país, não faz sentido incluir mais de 50 botões de opção (isso não reduz a carga cognitiva de ninguém). Em vez disso, opte por um menu suspenso.

Apesar das inúmeras evidências que suportam os elementos mencionados acima de um formulário de página de destino de alta conversão, você ainda deve testá-los por si mesmo.

Para facilitar a vida, ajuda a formar análises também.

Isso mesmo, análises reais que podem medir o comportamento do usuário à medida que percorrem seu formulário de várias etapas.

Algumas de nossas ferramentas favoritas de análise de formulários:

• MouseFlow
• Zuko
• Hotjar
• MonsterInsights (plug-in WP)

Crie seu modelo de formulário de página de destino usando as práticas recomendadas descritas neste artigo. Em seguida, confie em sua análise de formulários para expor quaisquer vazamentos. Em seguida, teste diferentes patches. Voilá.

E faça o que fizer, mantenha esses campos opcionais fora do seu formulário, a menos que você realmente precise deles (olhando para você, Expedia).