Um dos pontos críticos de um site são os formulários (contato, questionários, checkout, etc), pois muitas vezes eles são o único meio de contato entre o consumidor e a empresa. Além disso, boa parte das missões críticas (vender, pedir orçamento, etc) passam pelos formulários.

Dessa maneira, vamos ver quais são os pontos importantes na hora de planejar um formulário.

Primeiramente, é preciso ter em mente que um bom formulário está dividido em quatro etapas:

a) antes do usuário começar a preenchê-lo;
b) durante o preenchimento;
c) a hora em que algo dá errado no preenchimento;
d) após o usuário clicar em “enviar”.

As boas práticas podem ser separadas de acordo com cada fase de preenchimento de um formulário, vamos ver:

Antes do usuário começar a preenchê-lo

Antes de mais nada, saiba que formulários muito compridos desanimam o usuário. Por isso, certifique-se de solicitar apenas informações relevantes e necessárias. Repito: apenas informações relevantes e necessárias. Então:

1) Faça o possível para solicitar menor número de informações;
2) Para campos que gerem dúvidas ou desconfiança, coloque um pequeno ponto de interrogação para que o usuário possa saber pra que serve aquela informação.
3) Indique quais são os campos/documentos obrigatórios.
4) Indique quantos passos o formulário possui e em qual o usuário se encontra. (importante em lojas virtuais).

Caso seja realmente necessário que o usuário preencha diversas informações, quebre o formulário em diferentes etapas – você pode ocultar parte do formulário para que ele só apareça depois de respondido alguns campos.

Uma boa prática aplicada em certas lojas virtuais é a divisão do cadastro do cliente em dois passos, o primeiro requer email/senha e depois, durante o processo de compra/checkout, o cliente insere informações como contato/tel/cep etc.

Durante o preenchimento

1) Utilize auto-tab (o formulário pula de campo automaticamente), isso é muito útil em formulários que requerem números (CPF, Tel, etc).
2) Utilize tooltips – são balões para indicar que o usuário errou algum dado ou deixou alguma informação obrigatória sem ser preenchida – ex: “preencha essa campo” “escolha – não escolheu o tamanho/cor do produto.”
3) Guarde os dados preenchidos – caso o usuário volte a página sem querer ou tenha um problema de navegação, os dados preenchidos devem se manter válidos. Obrigar o usuário a preencher as mesmas informações várias vezes pode levá-lo a desistir do processo.
4) Não utilize uma barra de rolagem apenas para o formulário (iframe) – Mantenha o formulário atrelado à rolagem da página, assim, isso facilita a verificação dos dados preenchidos.

Após o preenchimento – depois que clica-se em “enviar”

1) Tenha uma tela de “êxito” – a função é comunicar ao usuário que a mensagem foi enviada com sucesso.
2) Ofereça a opção “voltar” para o usuário verificar os campos (antes dele clicar em enviar).
3) Após o envio, oriente o usuário – Por exemplo, você pode criar algo como “Clique aqui para voltar à página inicial”.
4) Forneça a opção “imprimir”.

Com essas dicas você será capaz de produzir um formulário funcional e fácil de usar.

Até a próxima

Referências:

Infográfico sobre formulário