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 901.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 tudo o que pode para construir um site que levará os visitantes à conversão. Quando você estuda análises, fica encantado ao descobrir que a jornada do usuário que você criou é apoiada por seus visitantes, sempre. Porém, há algo que os impede de serem convertidos.

O formulário de contato é uma parte essencial da jornada de seus visitantes. Mesmo se você realmente tiver 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, muitas etapas, uma interface desorganizada ... até mesmo a colocação 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 do Google Eye Tracking publicado em 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 atende a todas as regras, 78% dos usuários podem preenchê-lo e enviá-lo em uma 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 extensão dos formulários de contato, o que geralmente leva a escolhas inadequadas 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ê deseja que seus formulários de contato atendam ao 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 à 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.

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]

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").

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]

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.

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
16 ações
ação8
chilrear1
Enregistrer7