Entrada de dados
Formulários
Use sempre a menor quantidade possível de campos para preenchimento
Em estudos recentes, foi constatado que a redução de um formulário de 11 para 4 campos resultou em um aumento de 160% na taxa de preenchimento. Além disso, outro teste mostrou que a diferença de 5 para 9 campos apresentou um aumento de 34% na performance.
De acordo com um estudo do Baymard Institute, o checkout médio contém 14,88 campos de formulário. Entretanto, testes de usabilidade de checkout realizados por eles mostraram que a maioria dos sites pode reduzir de 20 a 60% o número de campos de formulário exibidos por padrão.
Rótulos sobre o campo de texto são mais efetivos
De acordo com um estudo do Google, posicionar os rótulos acima do campo de texto é mais efetivo do que posicioná-los alinhados à esquerda (em frente à caixa), pois requer menos pontos de fixação visual.
Prefira um layout de 1 coluna
Estudos utilizando tecnologia de eye-tracking, estudos de caso e testes A/B apresentam resultados consistentes, apontando que o uso de uma única coluna tem efeitos benéficos no grau de eficiência para preencher formulários.
Em um estudo conduzido pela CXL (https://speero.com/post/form-field-usability-should-you-use-single-or-multi-column-forms-original-research), participantes preencheram um formulário linear de coluna única (n = 356) em média 15,4 segundos mais rápido do que o formulário de várias colunas (n = 346). Esse resultado foi significativamente mais rápido em um nível de confiança de 95%.
Diferentes usuários interpretarão incorretamente como preencher formulários com múltiplas colunas de maneiras diferentes
Outro ponto positivo é a facilidade para adaptação ao modo responsivo.
Faça a validação dos campos junto à caixa de texto
A validação em linha é uma ótima maneira de localizar, alertar e corrigir erros em tempo real. Em vez de esperar até que os usuários pressionem "enviar".
Validação em linha é quando "as mensagens de validação são exibidas imediatamente após o usuário digitar os dados nos campos do formulário. Normalmente, as informações são mostradas ao lado dos campos e incentivam o usuário a tomar medidas imediatas.”
Ao implementar ferramentas que impedem o usuário de cometer erros, estamos permitindo que a interação seja mais rápida e precisa, já que o sistema oferece o retorno em tempo real.
Exemplo de validação inline
Dê preferência a formulários de várias etapas pois eles são mais amigáveis que formulários de etapa única
Dividir seus formulários em duas ou três etapas quase sempre aumentará a conclusão do formulário. Pesquisas com todos os tipos de formulários: de geração de leads, formulários de registro de eventos até questionários, e consistentemente os formulários de várias etapas superam os formulários genéricos de uma única etapa.
Existem três razões pelas quais os formulários de várias etapas funcionam tão bem:
- A primeira impressão é menos intimidadora do que um formulário longo com muitos campos de perguntas;
- Ao solicitar informações confidenciais (e-mail, telefone) na etapa final de um formulário de várias etapas, é mais provável que os usuários preencham esses campos – caso contrário, eles perdem o progresso feito ao preencher as etapas anteriores (esse é um viés cognitivo comprovado conhecida como a 'falácia do custo irrecuperável');
- Ao ver uma barra de progresso, os usuários ficam mais motivados para preencher o formulário. Isso é, novamente, baseado em numerosos vieses cognitivos comprovados, como o efeito de progresso garantido.
Agrupe os campos relacionados entre si em seções ou etapas
Caso o formulário apresente mais de seis campos, você deve criar agrupamentos dos campos em seções lógicas ou passos. Para cada seção, verifique a necessidade de adicionar um parágrafo com microcopy de apoio para contextualizar a seção.
Campos de telefone ou data devem usar máscaras e não múltiplos campos de texto
Os campos divididos forçam o usuário a fazer cliques adicionais desnecessários para passar para o próximo campo. Em vez disso, é melhor ter um único campo com diretrizes claras de formatação no espaço reservado.
Mesmo que você implemente o avanço automático para o próximo campo, o fatiamento do campo impõe uma validação mais rigorosa que pode ter um efeito contrário.
Marque apenas os campos opcionais
É uma prática comum a marcação dos campos de preenchimento obrigatório, porém não é o ideal. Caso você inclua algum campo que NÃO é obrigatório, apenas esses campos opcionais devem ser sinalizados com a indicação ‘opcional’, embora o melhor cenário seria a remoção completa de itens não obrigatórios.
Limite a entrada de acordo com tipo de dado do campo
Em campos para telefone, ou alguns tipos de documentos onde a identificação é apenas numérica, é imprescindível que a entrada de dados seja limitada ao conjunto de caracteres numérico.
Além de evitar que o usuário cometa erros ao entrar dados inválidos, simplifica o algoritmo de validação do campo.
Em dispositivos móveis, os campos ainda devem indicar o tipo de teclado a ser apresentado, conforme referências aqui e aqui.
Ficar atento à propriedade inputmode.
O tamanho dos campos deve refletir o conteúdo a ser digitado
O tamanho de um campo deve refletir a quantidade de texto que o usuário deve inserir. Portanto, campos como CEP ou número da casa devem ser mais curtos em largura do que campos como a linha de endereço.
Evite perda de dados preenchidos implementando salvamento automático
Considere a frequência para salvar automaticamente o conteúdo inserido e quando acionar o salvamento automático. O evento mais comum é ao clicar no botão "Salvar", mas também é útil observar o evento de mudar o foco para outro campo.
Manter um botão para salvar pode auxiliar usuários a se sentirem seguros de que não irão perder os dados.
- Apresentar todos os campos em uma única tela, sem organização contextual
- Criar formulários com muitos campos sem quebrar a atividade em etapas
- Não fazer a validação em linha, dando feedback em tempo real
- Não customizar as mensagens de retorno (de validação)
- Não salvar automaticamente as entradas de conteúdo do usuário