Um produto interativo usa elementos de formulário. Um formulário simples, fácil de usar e esteticamente agradável é muito importante para atrair clientes. Além disso, um formulário bem projetado melhora a experiência do cliente e aumenta as conversões, enquanto um formulário mal projetado pode causar desistências do cliente.
Um formulário bem elaborado ajuda na coleta e processamento de informações de forma econômica e eficiente. O que se segue é como criar um formulário eficaz que pode melhorar a experiência do cliente e aumentar as conversões.
Aqui estão as seis etapas para criar um formulário eficiente:
Etapa 1: comece identificando onde os formulários são necessários.
Ao longo do produto, identifique os locais onde você precisa obter informações dos usuários. O número de formulários necessários pode variar de acordo com a função do aplicativo.
Exemplo: Um aplicativo de compras pode ter mais formulários (como Cadastro, Dados do Cartão, Endereço, etc.) do que um aplicativo multimídia como o YouTube.
Passo 2: Defina o número de campos.
Liste as informações que você precisa do usuário e, em seguida, tente otimizar e fornecer menos entradas ao usuário com base nas interconexões.
Exemplo: em um formulário de dados pessoais, você pode usar as informações já preenchidas anteriormente para preencher novamente os campos de endereço.
Etapa 3: Decida o tipo de formulário a ser usado.
Com base na complexidade das informações, você pode decidir se deseja ter um formulário de uma ou várias etapas. Os formulários de etapa única funcionam melhor se houver menos de 5 a 6 campos ou quando apenas informações básicas forem necessárias para registrar ou fazer uma assinatura. Por outro lado, os formulários de várias etapas funcionam melhor quando há vários campos a serem preenchidos e também ao solicitar informações confidenciais, como detalhes do cartão, por exemplo.
DICA RÁPIDA: Ao usar um formulário de várias etapas, adicione uma barra de progresso na parte superior para manter o usuário atualizado sobre a etapa em que está.
Etapa 4: organize/agrupe as informações em uma ordem lógica.
Depois de definir o tipo de formulário, organize as informações em uma ordem lógica que possa ser prevista pelo usuário. Você também pode agrupar informações semelhantes para que o usuário tenha uma melhor compreensão do que está preenchendo.
Passo 5: Defina os componentes no formulário.
Os principais componentes do formulário são:
1) Campos de entrada — Você pode usar botões de opção (checkbox ou radio), caixas de seleção (dropdown), campos de entrada de texto, menus suspensos, botões de ação para carregar imagens/vídeos, etc.
2) Rótulos de campo — Os rótulos são usados para nomear os campos de entrada no formulário.
3) Ações — Os botões de ação ajudam o usuário a continuar com as próximas etapas. As ações devem ser diferenciadas visualmente e auxiliar na tomada de decisão rápida. Em um formulário de uma única etapa, a ação pode ser “Enviar”, “Concluir”, “Concluído” etc., enquanto no formulário de várias etapas, as ações até a última etapa devem ser “Continuar/Próximo”.
4) Feedback — O feedback ajuda o usuário a entender em qual etapa ele está e também o resultado da entrada inserida após a validação. O feedback pode ser positivo ou negativo, por exemplo “O e-mail que você digitou está incorreto.”
5) Ajuda — Você também pode incluir notas de ajuda para orientar o usuário sobre como preencher o formulário.
Passo 6: Termine com uma mensagem de confirmação
Sempre termine seu formulário com uma boa mensagem de “obrigado” ou uma mensagem de “confirmação”. Os usuários se sentem bem e seguros se a confirmação é dada no final. Ao lidar com informações confidenciais, como dados bancários, detalhes do cartão, etc., isso é particularmente importante.
Dicas / Melhores Práticas
Sempre leve em consideração os usuários em potencial e seu estado mental ao criar um formulário.
Peça apenas o que é importante. Tente evitar campos opcionais.
Na imagem acima, o formulário do lado esquerdo está repleto de informações que não são obrigatórias. Por outro lado, o formulário do lado direito é simples, com apenas as informações necessárias, facilitando o preenchimento pelo usuário.
Um layout de coluna única com rótulos alinhados à esquerda é preferível para melhorar a escalabilidade e a legibilidade.
A imagem acima é um bom exemplo de qual layout deve ser usado. Layouts de coluna única funcionam melhor do que layouts de coluna dupla porque são mais fáceis de preencher, pois os usuários leem naturalmente de cima para baixo.
Use um layout de coluna dupla quando houver uma continuação ou dependência entre os campos de entrada.
O formulário acima utilizou um layout de coluna dupla porque as entradas “Nome” e “Sobrenome”, bem como “Cidade”, “Estado” e “CEP” são tipos de informações semelhantes que requerem continuidade.
Use entradas inteligentes e preencha automaticamente as informações sempre que for apropriado. A pesquisa indica que o preenchimento automático torna a conclusão do formulário 30% mais rápida.
O exemplo acima mostra que, ao usar o nome da empresa, o endereço é preenchido automaticamente com base no endereço de localização do Google.
Forneça ajuda contextual e feedback (para cada entrada) sempre que necessário.
O exemplo acima mostra a melhor prática de fornecer ajuda quando necessário. No campo “Maquiagem e Cosméticos” nenhuma ajuda é dada porque o potencial usuário do formulário estará ciente do que o campo significa/representa. Portanto, forneça ajuda apenas se for necessário e não para todos os campos.
Se houver uma chance de os usuários ficarem confusos sobre qualquer informação solicitada, forneça ajuda contextual que dê clareza.
Use linguagem simples, direta e personalizada, como gentilmente, desculpas, por favor, etc.
Induza os usuários com chamadas à ação. Seja descritivo.
Crie campos personalizados para diferentes campos de entrada (por exemplo, para Data, Mês, Ano, Número de contato, etc.).
A largura do campo deve ser quase igual ao comprimento da resposta necessária.
A imagem acima é um exemplo de como o comprimento do campo de entrada deve ser igual ao comprimento das informações necessárias.
Muitos formulários no produto podem frustrar os usuários. Tente obter o máximo de informações adicionando menos formulários.
Teste com um grupo de usuários para ver se o formulário funciona ou não.
Lista de controle
1• Defina uma meta para projetar um formulário (velocidade, eficiência).
2• Saiba quem são seus usuários.
3• Otimize o número de campos no formulário.
4• Use entradas inteligentes e recursos de preenchimento automático.
5• O formulário não é visualmente sobrecarregado.
6• Forneça feedback contextual e ajude sempre que necessário (nenhuma surpresa deve ser dada ao usuário).
7• Diferenciação adequada fornecida para ações primárias e secundárias.
8• Teste o design com vários usuários para garantir que está dando o resultado desejado.
9• Faça autoavaliações/avaliações de pares.