Dicas para criar um formulário html perfeito

Ao projetar um site, sistema ou aplicativo, onde envolve um cadastro ou ação de um usuário através de um formulário, devemos ficar atento a algumas regras para facilitar o uso da nossa aplicação.

Um dos grandes motivos para um usuário desistir de um cadastro é a complexabilidade de um formulário, neste artigo trago algumas dicas para melhorar a experiência do usuário na sua página.

1 - Sempre coloque o label no topo do campo.
Pode parecer uma dica meio óbvia, mas muitos desenvolvedores usam somente o placeholder direto no campo e esquecem de colocar o label. Além do label ficar sempre visivel enquanto o usuário digita seu nome, ele também ajuda na leitura do conteúdo por programas que são utilizados por pessoas com deficiência visual.

2 - Evite utilizar palavras com caixa alta
Além do seu formulário ficar poluído, isso dificulta a leitura.

3 - Utilize placeholders nos campos
O atributo placeholder é uma pequena dica ou frase que tem como objetivo ajudar o usuário a entender como ele deve preencher aquele campo.

4 - Utilize máscaras em campos específicos
Vai preencher um CPF, CEP ou telefone? Sempre utilize máscaras nos campos, assim você evita que o usuário digite a informação de forma errada.

6 - Seja claro e direto nas mensagens de erro
Não deixe o usuário "adivinhar" o que está errado no formulário, valide e mostre os erros de forma objetiva.

7 - Se possível, não deixe o usuário digitar
Em alguns campos, utilizar somente o mouse é mais rápido e prático para preencher o formulário, além de evitar entrada de dados incorretas.

8 - Destaque para o botão de ação primário
Evite utilizar cores para todos os botões de ação, sempre de mais destaque na ação principal.

9 - Ajude o usuário a entender os campos
Uma dica é utilizar ícones para representar um campo, no exemplo abaixo temos um input onde o usuário deve digitar o número do cartão de crédito, o ícone do cartão ajuda assimilar qual informação está sendo solicitada.

Além do ícone, o usuário pode não saber o que significa "CVC" e outros termos que você utiliza no seu formulário, neste caso você pode utilizar Tooltips, que é aquela moldura flutuante (pop up) que abre quando passa-se o mouse sobre algum ícone.

10 - Agrupe as informações
Evite utilizar vários campos amontoados, separe todos eles em grupos, desta forma ficará mais fácil e rápido o preenchimento do formulário.