Você faz tudo o que pode para criar um site que levará os visitantes à conversão. Ao estudar as análises, você fica entusiasmado ao ver que a jornada do usuário que você criou é apoiada por seus visitantes, uma e outra vez. No entanto, há algo que os impede de serem convertidos.

Le formulário de contato é uma parte essencial da jornada de seus visitantes. Mesmo que você tenha quase tudo que um site pode oferecer, um formulário de contato pode arruinar a experiência se não for usado corretamente. Botões “quebrados”, campos confusos, muitos passos, interface desorganizada… até o posicionamento do formulário de contato pode atrapalhar a experiência do usuário.

Há muitas coisas que podem dar errado.

Regras do 5 para criar o formulário de contato perfeito

Um estudo de rastreamento ocular do Google publicado em 2014 mostrou que seguir as diretrizes de uso mais básicas para projetar formas irá melhorar significativamente a experiência do usuário. Especificamente, quando um formulário de contato atende a todas as regras, 78% dos usuários podem preenchê-los e enviá-los em uma única tentativa. Quando um formulário de contato viola essas regras, no entanto, apenas 42% conseguem fazê-lo em uma tentativa.

Curioso para saber quais são essas regras? Portanto, continue lendo.

Regra nº 1: Foco no alinhamento

Como você verá em outras regras aqui, as pessoas geralmente se preocupam com a duração formas de contato, o que muitas vezes leva a más escolhas de design. Veja a questão do alinhamento, por exemplo.

Você pode ver um formulário como este no site BrainTraffic e pensar: Hmmm ... mas não é um pouco longo para preencher?

preencha formulário.png

Uma maneira de pensar sobre como resolver esse "problema" é mover os rótulos para a esquerda e colocar os campos de resposta à direita. No entanto, os especialistas em UX dirão que esta é uma grande proibição, pois compromete a capacidade de escanear o formulário. O mesmo vale se você pensou em colocar os campos lado a lado na horizontal.

Se você quer o seu formas os contatos atendem ao padrão de alinhamento, eis o que você precisa fazer:

  • Alinhe à esquerda todos os rótulos, campos de formulário e o botão de call-to-action principal.
  • Nunca alinhe campos relacionados horizontalmente. Você pode estruturar o formulário logicamente, mas cada questão ou campo deve ser empilhado verticalmente.
  • Qualquer campo com perguntas de múltipla escolha (com menos de seis opções) deve ser exibido em uma lista vertical de pontos ou caixas de seleção, não em um menu suspenso.

Regra 2: inclua todos os campos relevantes

Quando se trata de criar formulários de contato, você pode pensar que quanto mais curto melhor, certo? Nem sempre é o caso. O que mais importa é que você forneça aos usuários todos os campos necessários e relevantes.

Michael Aagaard, Otimizador de conversões sênior da Unbounce, fez uma apresentação em 2015 que abordou esta questão. Ele e sua equipe queriam saber o que aconteceria se encurtassem este formulário de contato:

exemplo de formulário de contato court.png

Como você pode ver, eles removeram o que consideraram campos desnecessários para agilizar o preenchimento do formulário. No entanto, após a conclusão do teste, eles encontraram uma queda de 14% nas conversões com o formulário mais curto.

Regra # 3: simplificar campos

Não importa se seus usuários estão interagindo com seu formulário de contato usando um desktop ou dispositivo móvel, ou se eles precisam de tecnologia assistiva para ajudá-los, o formulário deve ser equipado. para simplificar o processo de inscrição.

Aqui estão algumas técnicas que você deve saber:

Classificação
Para usuários de desktop e aqueles com problemas de acessibilidade, certifique-se de que seu formulário de contato tenha a ordenação lógica de guias ativada.

Máscaras de entrada
Em vez de forçar os usuários a adivinharem como você deseja que determinados campos sejam formatados, você pode adicioná-los com máscaras de entrada que os formatam automaticamente.

campos de formatação html.png

Preenchimento automático do Google
Em vez de codificar cada campo para que seja formado automaticamente de acordo com os padrões a serem respeitados, ative o preenchimento automático usando o plug-in de preenchimento automático de endereços do Google. Isso não apenas evitará que você tenha que lidar com erros de ortografia e endereços preenchidos incorretamente, mas também evitará que seus visitantes digitem a maior parte dessas informações.

Regra # 4: Sair de todos

Embora eu saiba que essa regra vai contra os fundamentos do minimalismo, é uma regra que você deve prestar atenção para evitar frustrar desnecessariamente os visitantes.

Deixe-me explicar: você tem um formulário de contato que parece bastante simples. Seus usuários o preenchem com base no que os rótulos sugerem e clicam no botão enviar. Então, eles recebem esta horrível mensagem em vermelho: “Você não fez isso direito! Volte, corrija o formulário e devolva! " 

Você provavelmente já o encontrou como um usuário e sabe como pode ser frustrante, especialmente se algumas das informações inseridas forem excluídas quando o erro for gerado. Portanto, em vez de deixar os usuários adivinhando o que precisa ser consertado e como, não deixe chegar a esse ponto. Soletre tudo no caminho:

  • Dê um foco no campo (especialmente no celular) para que os usuários saibam exatamente onde estão preenchendo um formulário.
  • Anote todos os requisitos de formatação se não estiver usando máscaras de entrada para formatar campos automaticamente.
  • Indique explicitamente quando um campo é "Opcional" (use a palavra, não o asterisco vermelho).
  • Dê aos usuários a opção de mostrar ou ocultar o campo da senha conforme eles o inserem.
  • Exibe uma mensagem de erro assim que o usuário se engaja em um campo. Não espere até o fim para fazer isso.

form wordpress.png error

Regra # 5: Não oculte conselhos

O texto do quadro em um formulário de contato tem a seguinte aparência:

campo com tips.png

Veja como o Target coloca os rótulos no campo? Em alguns formulários de contato, esses rótulos / indicações simplesmente desaparecem quando um usuário clica em um campo. O destino lida com isso de maneira um pouco diferente e move o rótulo para o topo da caixa do campo (consulte "endereço de e-mail").

Independentemente de como isso é tratado, os especialistas em usabilidade, como o grupo Nielsen Norman, dirá que esta é uma má prática de design porque:

  • Isso é problemático para usuários multitarefa, distraídos ou com ritmo acelerado demais no próximo campo. Quando a pista desaparece, o usuário deve sair do campo para redescobrir o que precisa.
  • As dicas que desaparecem também impedem que os usuários retornem a um formulário para verificar seu trabalho ou corrigir um erro sem excluir completamente a resposta para ver o que está abaixo.
  • O texto em cinza mais claro usado para dicas de espaço reservado não é ideal para uma leitura fácil.
  • Os campos com texto de dica podem ser confundidos com campos que já preencheram os dados, fazendo com que os usuários os ignorem, enviem o formulário e recebam uma mensagem de erro.
  • Algumas ferramentas de leitura de tela não conseguem ler o texto da dica.

De acordo com o NNG, os usuários acham os campos vazios mais atraentes do que aqueles que contêm texto de pista. Mesmo que seus formulários pareçam mais longos para colocar esses rótulos ou descritores acima do campo, isso melhorará a usabilidade.

Essas dicas são tudo, espero que ajudem a construir melhores formulários de contato.