UX em formulários de contato: fundamentos para transformar leads em conversões

Você gosta de preencher formulários? Eu pensei que não. Não é o que queremos de um serviço. Tudo o que o usuário quer é comprar uma passagem, reservar um quarto de hotel, fazer uma compra e assim por diante. Preencher um formulário é um mal necessário com o qual eles têm que lidar. Isso descreve você? Então, o que realmente afeta a atitude de uma pessoa ao enviar um formulário?

• Pode ser demorado.
• Formulários complicados geralmente são difíceis de entender (ou você simplesmente não sente vontade de preenchê-los).
• O formulário pode solicitar informações pessoais que você não deseja compartilhar: detalhes do cartão de crédito, número de celular, endereço residencial etc.

Os campos de formulário são, na verdade, a ferramenta mais importante para a interação com o serviço do usuário, não importa para que seja o formulário - seja uma assinatura de boletim informativo ou um formulário passo a passo para coletar dados.

Neste artigo, vamos dar uma olhada nas dúvidas mais comuns dos estagiários de design em nossa empresa. Abaixo estão as perguntas frequentes e as respostas sobre como tornar os formulários do site fáceis de usar, bem como dicas para evitar a baixa interação do usuário.

Posso colocar um formulário em duas colunas?

Estudos de rastreamento ocular mostraram que os formulários de coluna única são melhores do que os de várias colunas. Por quê então? A maneira como rolamos para baixo em um site é semelhante à forma como preenchemos um formulário: indo de cima para baixo, mantendo o foco no conteúdo. Um formulário com colunas paralelas pode facilmente enganar os usuários e distraí-los. Para manter os usuários no fluxo e não interromper a orientação vertical, coloque os campos um abaixo do outro em uma única coluna. Claro, toda regra tem suas exceções. Quanto ao abaixo, campos curtos ou logicamente contíguos (número de celular, cidade, estado e código de área) podem ser colocados em uma linha.

Se o formulário tiver uma estrutura bastante complicada (como a etapa de checkout em uma loja online ou a etapa de cadastro em uma plataforma de empréstimo), ele pode ser dividido visualmente em grupos semânticos, com acréscimo de espaço ou títulos entre eles. Isso dará aos usuários a sensação de progredir no formulário sem se sentirem sobrecarregados.

Onde as etiquetas devem ser colocadas?

Os rótulos informam aos usuários quais informações pertencem a um determinado campo de formulário e geralmente são posicionados fora do campo de formulário. Muito recentemente, havia apenas duas variantes para colocação de rótulos: acima dos campos e justificado à esquerda. Há algum tempo, surgiu uma alternativa: os designers começaram a animar formulários e ocultar rótulos em espaços reservados. Houve muitas disputas sobre qual é a melhor forma de mostrar os rótulos, mas ainda sem uma resposta definitiva. Uma coisa é clara: a colocação do rótulo depende da situação. Vamos dar uma boa olhada em cada opção.

Colocando etiquetas acima dos campos

Esse é o posicionamento de rótulo mais comum e, conforme validado pela pesquisa de UX do Google, por um bom motivo. Ele se adapta melhor aos tamanhos dos smartphones, o que é essencial para uma marcação responsiva.

Justificando os rótulos à esquerda

Essa pode ser a melhor opção se você precisar exibir campos de entrada de dados maiores. Os rótulos justificados à esquerda recebem mais atenção e não se misturam com outros campos. Além disso, o formulário de contato ocupará menos espaço verticalmente. Mas lembre-se de que essa abordagem funciona bem apenas para visualizações de desktop; para dispositivos móveis, o tamanho é um problema (a tela é muito estreita para um rótulo e um campo posicionados à esquerda). Isso pode causar problemas para os usuários, que podem não conseguir ver os dados de entrada na íntegra ou detectar erros de digitação antes de enviar o formulário. Para evitar que formulários errados sejam enviados, você terá que criar protótipos adicionais para tornar o site compatível com smartphones.

Colocando etiquetas dentro dos campos (etiquetas alinhadas no topo do campo)

Os rótulos interativos colocados dentro do campo estão se tornando mais populares entre os designers de UX por sua escaneabilidade antes do preenchimento. A animação pode ser diferente, mas o processo é o mesmo: depois de clicar no campo com o marcador de posição, o rótulo não desaparece , mas sobe para o topo do campo, abrindo espaço para o usuário inserir os dados.

As vantagens dessa abordagem são óbvias: economiza espaço e a animação é compreensível para o usuário. Mas a animação em formulários nem sempre é a melhor solução. Depende do contexto do formulário. Se você estiver trabalhando em um formulário com poucos campos (uma caixa de login ou boletim informativo), os rótulos alinhados no topo não serão tão necessários porque não há muita informação que o usuário precise lembrar. Funciona melhor em formulários complexos com várias seções. Apesar das vantagens desse método, pense também em como as seleções suspensas ficarão e se adequarão à animação.

No entanto, marcadores interativos de rótulos vencem por uma milha sobre os estáticos. Quando o campo é clicado, o rótulo se move para cima, ficando visível, enquanto o estático simplesmente desaparece.

Podemos usar texto de espaço reservado em vez de um rótulo?

Há muitas maneiras de fornecer dicas; um deles é uma implementação comum de instruções em campos de formulário. Infelizmente, os testes com usuários mostram continuamente que os espaços reservados nos campos de formulário geralmente prejudicam a usabilidade mais do que ajudam. Eles podem complicar o processo de preenchimento de um formulário de maneira séria, especialmente se o formulário consistir em mais de uma dúzia de campos. O desaparecimento do texto de espaço reservado sobrecarrega a memória de curto prazo dos usuários. Isso torna difícil para as pessoas lembrar quais informações pertencem a um campo e verificar e corrigir erros. Também coloca uma carga adicional sobre os usuários com deficiências visuais e cognitivas.

Como vimos, a dificuldade está em manter o texto do placeholder fora de vista quando o usuário clica no campo para preenchê-lo. Sem rótulos, o usuário não pode verificar seu trabalho antes de enviar o formulário. Eles podem facilmente esquecer quais dados precisam preencher no campo atual e se os anteriores estão livres de erros – sempre há um grande risco de informações falsas. O usuário teria que revelar o texto do espaço reservado excluindo o texto em cada campo um por um, para verificar se sua entrada satisfaz a descrição. Na verdade, muitos nem percebem o potencial de erro e não fazem o esforço de verificar novamente.

Além disso, essa abordagem não seria confortável para usuários que se movem entre campos pressionando a tecla Tab, porque eles não se acostumarão a analisar os dados no próximo campo antes de alternar para ele. O texto de espaço reservado que desaparece quando o cursor é colocado no campo do formulário irrita os usuários que navegam com o teclado.

Apesar das desvantagens, há casos em que o uso de um rótulo como espaço reservado é bastante apropriado. Por exemplo, para uma assinatura de boletim informativo, podemos preencher apenas um campo, "E-mail".

Como diminuir a carga cognitiva de um formulário?

Espaçamento do relógio

Um rótulo e seu campo devem ser agrupados visualmente, para não confundir os usuários e para que eles possam entender qual rótulo pertence a qual campo. Além disso, evite preenchimento solto, onde os rótulos são colocados à mesma distância entre dois campos.

Focagem automática do primeiro campo de entrada

A focagem automática guia os usuários até o ponto inicial do formulário. Recomendamos enfatizar o primeiro campo com uma cor de borda de destaque, cor de fundo ou ambas. Ao chamar o usuário para preenchê-lo, você agilizará o cadastro ou a compra.

Nunca use tampas

Rótulos escritos em letras maiúsculas, especialmente em formulários que incluem três a quatro campos. Letras maiúsculas são difíceis de ler. Além disso, eles dão a aparência de gritar.

Os botões são considerados parte do UX de um formulário?

Um botão destina-se a direcionar os usuários a realizar uma ação. É por isso que o design do botão deve ser sempre sobre reconhecimento e clareza. Pense no seu site ou aplicativo como parte de uma conversa iniciada por um usuário ocupado. O botão desempenha um papel crucial nesta conversa.

O botão deve explicar a ação a ser tomada

Uma boa caixa de diálogo não é apenas perguntar aos usuários qual ação eles desejam realizar. Trata-se também de tornar cada opção o mais clara possível. É por isso que é tão importante ter um rótulo distinto para cada opção, que serve como ajuda "just in time", dando aos usuários mais confiança na escolha da ação correta.

Dê um nome ao botão para explicar o que ele faz, em vez de usar um rótulo genérico (como "OK"). A BettingExpert recebeu 31,54% mais inscrições ao alterar um verbo simples para uma frase de chamariz. Use um verbo sempre que possível, em vez de "Sim" ou "OK", porque seus botões farão sentido fora do contexto com o texto explicativo ou o título. Lembre-se de que seu CTA deve refletir a intenção do usuário. Por exemplo, se for um registro, obviamente chame o botão "Registrar".

Separe as ações primárias das secundárias

A ação primária associada a uma forma precisa ter um peso visual mais forte. As ações secundárias devem ter o peso visual mais fraco, a fim de minimizar o risco de erro e direcionar as pessoas para um resultado bem-sucedido. Os botões de ação básicos devem ser fortemente marcados, enquanto é suficiente discar os botões de ação secundários.

Use os botões primário e secundário corretamente. Se você tiver dois botões , um primário e um secundário, diferencie-os visualmente para reduzir o erro. Dado que é mais importante, o botão principal deve parecer mais perceptível.

Botões de ênfase

Não ative o botão até que todos os campos do formulário sejam preenchidos. Essa pode ser uma ótima solução para ajudar o usuário a verificar visualmente seus dados antes de enviar.

É possível facilitar o processo de preenchimento de um formulário?

Adicionar preenchimento automático

Automatizar a entrada do usuário evita erros ao reduzir os campos que eles precisam preencher. Além disso, de acordo com a pesquisa do Google, o preenchimento automático ajuda as pessoas a preencher formulários 30% mais rápido. Se o usuário já estiver registrado no seu serviço, preencha automaticamente os dados da conta dele nos campos relevantes na etapa de finalização da compra. Além disso, considere que você pode preencher automaticamente os campos de texto de cidade e região com base no código de área ou nos dados de geolocalização. Não se esqueça de deixar esses campos disponíveis para edição para dar controle aos usuários.

Não se esqueça da entrada mascarada

Este é um plugin que formata automaticamente um campo. Essa solução se adapta bem a datas, horários, números de celular e muito mais. Este plugin torna o preenchimento de um formulário muito mais fácil. Os usuários não farão mais perguntas porque tudo está claro para eles.

Seja inventivo

Use o comprimento do campo como uma dica para a resposta. Isso faz sentido para campos que possuem um número limitado de caracteres, como o campo de número de celular, endereço residencial e código de área.

Evite seleções suspensas com apenas duas ou três opções

Em vez de menus suspensos, use botões de opção para transmitir sua mensagem rapidamente e não diminuir a velocidade do usuário. Tudo tem que ser claro sem cliques extras.

Validar formulários

A validação do formulário é crucial. Distinga os campos onde os erros são encontrados e explique por que o campo não foi validado.

Além disso, explique todos os requisitos para os dados e seu formato. Se a senha de um usuário tiver que incluir seis símbolos, mencione isso. Não faça os usuários adivinharem. Torne o processo acessível e compreensível.

Adicione conveniências para evitar erros comuns no campo de senha

Isso pode ser uma visualização de senha ou outra oportunidade para os usuários verificarem seus dados antes de enviar. Além disso, se o seu serviço tiver alguns requisitos especiais para senhas, notifique os usuários sobre eles antes que eles preencham o campo.

A propósito, ao preencher o campo de senha, com bastante frequência, o usuário enfrentará um problema conhecido - por exemplo, o caps lock está ativado - e se esqueceu dele. Recomendamos que você notifique os usuários sobre um botão de caps lock pressionado para evitar formulários abandonados, bem como associação negativa com o site.

Permitir que os usuários autorizem via mídia social

O login social pode ser uma ferramenta realmente poderosa; economiza muito tempo dos usuários. Se você oferece um registro rápido usando a mídia social, não se esqueça de garantir às pessoas a segurança de seus dados de mídia social e explicar exatamente quais informações você precisa. Além disso, informe aos usuários que você não usará seus dados sem permissão. Apenas para reforçar a sensação de segurança, você pode adicionar um ícone de cadeado. Fique do lado do usuário e cuide de sua segurança.

A localização do usuário influencia a UX de um formulário?

Sim, lembre-se das diferenças locais. Se um serviço for projetado para dois ou mais mercados locais (como EUA, Europa e Ásia), seja sensível à variedade de diferenças entre eles. Não é surpresa que os nomes dos campos, dicas, entradas e muito mais variem de acordo com a região.

Aqui estão algumas coisas para prestar atenção:

• Cada país tem seu próprio formato numérico, e é por isso que as máscaras de entrada também devem variar.
• Os EUA dizem CEP, enquanto na Europa é código postal.
• O campo "estado" é necessário apenas nos EUA.

Conclusão

Como podemos ver, criar um bom formulário de inscrição é complicado. O design UX importa. Para melhorar o UX, o designer precisa se colocar no lugar do usuário. Não corra o risco de os usuários ficarem desapontados ou desperdiçar um tempo valioso tentando descobrir como seu formulário funciona. Deixe seu formulário claro desde o início, com rótulos visíveis colocados fora dos campos de formulário vazios. Os formulários são uma parte importante de muitas metas de conversão, portanto, certifique-se de que seus usuários possam acessá-los com rapidez e precisão.