Como criar formulários amigáveis ​​para usuários em HTML5 - dummies

Projetar formulários úteis em HTML é uma tarefa diferente de projetar fácil de usar - use formulários. Seu formulário pode reunir os dados que você precisa, mas se seu formulário for difícil para os visitantes usar, eles podem abandoná-lo antes de terminarem.

Ao usar os elementos de marcação e outros elementos que conduzem o layout da página, tenha em mente as seguintes diretrizes:

• Forneça pistas textuais para todos os seus formulários. Seja claro sobre as informações que você deseja e o formato que você precisa.

  Por exemplo, informe os detalhes dos usuários, como se

  • Datas sejam inseridas como mm / dd / aa (versus mm / dd / aaaa).

  • O número de caracteres que um campo pode levar é limitado.

    Você pode limitar o caractere usando o atributo maxlength.

• Use a largura do campo e os limites de caracteres para fornecer pistas visuais. Por exemplo, se os usuários inserirem um número de cartão de crédito como xxx x -xxx x -xxxx -xxxx , considere criando quatro campos de texto - um para cada parte do número.

• Agrupe campos semelhantes. Um agrupamento lógico de campos torna o preenchimento de um formulário mais fácil. É confuso se você pedir o primeiro nome do visitante, depois o aniversário e o sobrenome.

• Divida formas longas em seções fáceis de gerenciar. Os formulários em pedaços curtos são menos intimidantes e mais prováveis ​​de serem concluídos.

  Os principais varejistas online (como Amazon.com) usam esse método para obter os detalhes que precisam para encomendas sem tornar o processo muito doloroso.

• Marque campos obrigatórios claramente. Se algumas partes do formulário não podem ser deixadas em branco quando os usuários enviam o formulário, marque esses campos com clareza.

  Você pode identificar os campos obrigatórios por

  • Fazê-los em negrito

  • Usando uma cor diferente

  • Colocando um asterisco ao lado deles

• Escreva mensagens de erro úteis e amigáveis. Certifique-se de que o retorno da validação do formulário faz sentido para os visitantes do site (verifique-os com um grupo de testadores apenas para se certificar). Nada afasta os visitantes, como uma mensagem enigmática e inútil. ("Erro de Tipo 42" pode significar algo para um programador, mas não para mais ninguém.)

• Diga aos usuários o tipo de informação que eles precisam para o formulário. Se os usuários precisarem de informações em suas mãos antes de preencher o formulário, uma página do formulário gateway pode detalhar tudo o que os usuários devem ter antes de começar a preencher o formulário.

A série de formas que RateGenius usa para coletar informações para empréstimos de carro e refinanciamento de empréstimos são excelentes exemplos de formas longas que coletam diversos tipos de dados usando todos os elementos de marcação de formulário disponíveis.