Práticas recomendadas de design de formulário

Use uma etiqueta

Os rótulos são essenciais para a acessibilidade. Os leitores de tela comunicam cada rótulo aos usuários. Sem rotulagem adequada, os formulários são inacessíveis para muitas pessoas. Certifique-se de que cada campo de formulário tenha um <rótulo>, use a semântica HTML apropriada e use ARIA quando necessário.

Evite espaços reservados como um rótulo

Usar um espaço reservado como etiqueta coloca um fardo na memória de curto prazo. O rótulo desaparece assim que o usuário começa a digitar e o usuário deve limpar o texto de entrada para expor o rótulo do espaço reservado novamente.

Os espaços reservados criam problemas adicionais quando estão muito claros ou escuros. Quando muito escuro, o espaço reservado pode ser confundido com uma entrada preenchida. Quando muito claros, alguns usuários podem não ver o espaço reservado.

Focar automaticamente a primeira entrada

A focagem automática no primeiro campo de um formulário aprimora a acessibilidade, reduzindo a necessidade de navegar e clicar e aumenta a experiência geral do usuário. O usuário também sempre deve poder tabular para cada entrada no formulário.

Mantenha os rótulos curtos

Evite etiquetas longas sempre que possível, para que os formulários sejam fáceis de ler e digitalizar.

Corresponder o comprimento e a estrutura do campo à entrada pretendida

O comprimento do campo oferece o alcance da resposta. Empregue isso para campos com uma contagem de caracteres definida, como números de telefone, CEPs etc.

Os campos de formulário devem se parecer com campos de formulário

A criatividade geralmente leva a resultados adversos ao projetar formulários. Idéias aparentemente inovadoras podem até cativar as maiores organizações do mundo e reduzir a usabilidade para milhões, senão bilhões de pessoas. O Google alterou discretamente seus campos de texto de design de material em 2017, depois de descobrir que muitos usuários não sabiam que podiam interagir com a entrada.

Quando se trata de campos de entrada, siga as convenções de design padrão. Se você decidir reinventar a roda, faça um teste completo de usabilidade .

Diferenciar campos de formulário de outros elementos

Um campo de formulário deve comunicar visualmente sua função. Adicione diferença suficiente entre outros elementos da interface do usuário, para que os usuários não precisem adivinhar.

Use o tipo de entrada e tag apropriados

Os tipos de entrada tornam um formulário mais acessível e aprimoram a experiência do usuário. Por exemplo, o uso do tipo de entrada correto chama o teclado apropriado em dispositivos móveis (números x letras).

Designers e desenvolvedores geralmente ignoram coisas simples, como usar um rádio em vez de uma caixa de seleção para perguntas com várias opções, mas apenas uma única resposta.

Os formulários devem ser uma coluna

Os formulários de uma coluna são mais confortáveis ​​para digitalizar e se adaptam melhor aos monitores móveis. Várias colunas podem sobrecarregar um usuário e fazer com que ele pule campos acidentalmente.

Como a maioria das práticas recomendadas , há exceções a essa regra (como a próxima nesta lista). Lembre-se sempre do contexto que você está projetando para determinar a melhor apresentação.

Os campos que logicamente andam juntos devem estar alinhados

Empilhar campos relacionados, como nomes, endereços e informações de pagamento, causa atritos desnecessários e pode interromper o fluxo do usuário.

Omitir campos desnecessários

Omita campos opcionais e pense em outras maneiras de coletar dados. Sempre se pergunte se a pergunta pode ser inferida, adiada ou completamente excluída.

Tornar botões de ação específicos da tarefa

O texto do botão enviar deve descrever a ação que ele chamará de forma clara e concisa. Um usuário nunca deve ficar confuso sobre o que acontecerá depois de pressionado.

Agrupe etiquetas com suas entradas

Apresente rótulos com a entrada correspondente, para que os usuários saibam qual campo eles estão preenchendo. Os erros geralmente ocorrem quando um usuário rola uma página para cima e para baixo e faz uma associação incorreta.

Evite todos os limites

É uma questão de estilo entre maiúsculas e minúsculas, mas todas as maiúsculas nunca são uma boa idéia. Todas as letras maiúsculas são difíceis de ler, digitalizar e parecem desagradáveis.

Apresentar caixas de seleção e rádios verticalmente

É mais fácil verificar as opções da caixa de seleção e do rádio quando apresentadas na vertical. No entanto, apresentar opções com gráficos associados pode adicionar uma dimensão extra ao design que nega a necessidade de uma apresentação vertical.

Mostrar todas as opções de seleção se <6

A colocação de opções em um seletor suspenso oculta as opções e requer dois cliques para escolher. Use um seletor suspenso quando houver mais de 5 opções e incorpore a pesquisa no menu suspenso quando houver mais de 25 opções.

No entanto, não há problema em usar um seletor suspenso para menos de 6 opções se o espaço for limitado, como em determinadas situações de edição em linha.

Mostrar erros embutidos

Tente evitar erros, tanto quanto possível, sendo claro e conciso. Quando um usuário cometer um erro, mostre ao usuário onde ocorreu o erro, forneça um motivo e comunique como corrigi-lo.

Campos relacionados ao grupo

Crie grupos lógicos para que o usuário possa interpretar o que está sendo solicitado no formulário mais rapidamente e gerenciar solicitações em lotes.

Diferenciar ações primárias de secundárias

Torne a ação principal do formulário, como o envio, mais proeminente que as opções secundárias, para evitar erros. E sempre se pergunte se a ação secundária é necessária.

Incorpore uma indicação de progresso para formulários de várias etapas

Os formulários de várias etapas, também conhecidos como assistentes de formulário , devem indicar progresso para que o usuário saiba onde está e o que está por vir.

Resistir aos modais nos modais

Interações que requerem múltiplos modais podem causar erros do usuário. Considere a edição embutida dentro de um modal.

Sempre pense em acessibilidade

Com muita frequência, os designers não verificam a implementação de seus projetos para garantir que atendam aos parâmetros de acessibilidade.

Para saber mais sobre como implementar semanticamente formulários acessíveis, recomendo a leitura das orientações do W3C sobre como criar sites que atendam às WCAG .