Ir para o conteúdo principal

5 regras para criar um formulário de contato perfeito

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Você está fazendo todo o possível para criar um site que levará os visitantes à conversão. Quando você estuda análise, fica encantado ao descobrir que o caminho do usuário que você criou é tratado pelos visitantes uma e outra vez. No entanto, há algo que impede que eles sejam convertidos.

O formulário de contato é uma parte essencial da jornada de seus visitantes. Mesmo se você realmente tiver quase tudo o 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, muitas etapas, uma interface desorganizada ... até colocar o 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 no 2014 mostrou que seguir as diretrizes de uso mais básicas para o design de formulários melhorará drasticamente a experiência do usuário. Especificamente, quando um formulário de contato segue todas as regras, o 78% dos usuários pode preenchê-los e enviá-los em uma tentativa. Quando um formulário de contato viola essas regras, no entanto, apenas 42% é capaz de fazer isso em uma tentativa.

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

Regra # 1: Foco no alinhamento

Como você verá em outras regras aqui, as pessoas geralmente se preocupam com o tamanho dos formulários de contato, o que geralmente 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 da BrainTraffic e pensar: Hmmm ... mas não é um pouco longo para ser concluído?

preencha formulário.png

Uma maneira de pensar sobre a solução desse "problema" é mover os rótulos para a esquerda e colocar os campos de resposta à direita. No entanto, os especialistas em UX dirão que isso não é importante porque compromete a capacidade de digitalizar o formulário. O mesmo vale para se você estivesse pensando em colocar os campos próximos um do outro horizontalmente.

Se você quiser que seus formulários de contato atinjam o padrão de alinhamento, aqui está o que você precisa fazer:

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

  • Alinhe todos os rótulos, campos de formulário e o botão principal da frase de ação à esquerda.
  • Nunca alinhe os campos relacionados horizontalmente. Você pode estruturar o formulário logicamente, mas cada pergunta 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 menor, melhor? Nem sempre é esse o caso. O que mais importa é que você forneça aos usuários todos os campos necessários e relevantes.

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

exemplo de formulário de contato court.png

Como você pode ver, eles removeram o que consideravam campos inúteis para otimizar o processo de preenchimento do formulário. No entanto, na conclusão do teste, eles descobriram uma diminuição das conversões de 14% com a forma mais curta.

Regra # 3: simplificar campos

Não importa se seus usuários interagem com seu formulário de contato usando um computador ou dispositivo móvel ou se precisam de tecnologia assistencial para ajudá-los, o formulário deve estar equipado para simplificar o processo de entrada.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

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

Classificação
Para usuários de desktop e aqueles com problemas de acessibilidade, verifique se o formulário de contato tem uma ordem lógica de tabulação ativada.

Máscaras de entrada
Em vez de forçar os usuários a adivinharem como você deseja que certos 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 formado automaticamente de acordo com os padrões a serem respeitados, ative o preenchimento automático usando o plug-in para preenchimento automático de endereços. Isso não apenas evitará que você tenha que lidar com erros de ortografia e endereços preenchidos incorretamente, mas também impedirá que seus visitantes digitem a maioria dessas informações.

Regra # 4: Sair de todos

Embora eu compreenda que esta regra contraria os princípios básicos do minimalismo, é uma regra que você deve prestar atenção especial para evitar frustrar desnecessariamente seus visitantes.

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

Você provavelmente o conheceu como usuário e sabe como isso pode ser frustrante, principalmente se algumas das informações inseridas forem removidas quando o erro for levantado. Portanto, em vez de permitir que os usuários adivinhem o que precisa ser reparado 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.
  • Escreva todos os requisitos de formatação se você não usar máscaras de entrada para formatar automaticamente os campos.
  • Indique explicitamente quando um campo é "Opcional" (use a palavra, não o asterisco vermelho).
  • Ofereça aos usuários a capacidade de mostrar ou ocultar o campo da senha enquanto eles digitam.
  • Exibir uma mensagem de erro assim que o usuário inserir um campo. Não espere até o final para fazê-lo.

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

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

Veja como o Target coloca 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 a parte superior da caixa de campo (consulte "endereço de email").

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

  • Isso é problemático para usuários multitarefa, distraídos ou muito rápidos no próximo campo. Quando o índice desaparece, os usuários devem deixar o campo para redescobrir o que precisam.
  • 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 facilitar a leitura.
  • Os campos com texto de dica podem ser confundidos com campos que já preencheram dados, permitindo 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.

Segundo o NNG, os usuários consideram os campos vazios mais atraentes do que aqueles que contêm texto de índice. Mesmo que seus formulários pareçam colocar essas tags ou descritores acima do campo, isso melhorará a usabilidade.

Isso é tudo para essas dicas. Espero que elas o ajudem a criar melhores formulários de contato.

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
14 ações
ação8
chilrear1
Enregistrer5