Identidade

O formulário de inscrição geralmente é a primeira interação com um formulário no seu site. Um bom design de formulário de assinatura é fundamental, e um formulário seguro é essencial.

Vamos analisar um formulário de inscrição e como você pode ajudar os usuários a se inscreverem no seu site.

Mantenha o formulário de inscrição mínimo e mostre apenas os controles necessários para criar uma conta. Não duplique os controles do formulário para ajudar os usuários a acessar os detalhes da conta corretamente. Envie um e-mail de confirmação.

Ajudar os usuários a preencher os detalhes da conta

Você pode ajudar os usuários a preencher os detalhes da conta usando o atributo autocomplete adequado. Use autocomplete="email" para o campo de e-mail e autocomplete="new-password" para um campo de nova senha.

Saiba mais sobre o preenchimento automático de controles de entrada.

Você também pode ajudar os usuários a inserir uma senha segura oferecendo um <button> de revelação de senha.
Saiba mais sobre o padrão de revelação de senha.

Verifique se o formulário de inscrição é seguro

Nunca armazene nem transmita senhas em texto simples. Use sal e hash nas senhas e não tente inventar seu próprio algoritmo de hash.

Ofereça autenticação multifator, especialmente se você armazena dados pessoais ou sensíveis. As práticas recomendadas de OTP por SMS e Como ativar a autenticação forte com o WebAuthn explicam como implementar a autenticação multifator.

Garanta que os usuários não usem senhas comprometidas. Por exemplo, use a API Have I Been Pwned para detectar senhas comprometidas e sugerir aos usuários que insiram uma nova senha ou avisá-los se a senha for comprometida.

Ajudar os usuários a fazer login

Vamos ver como criar um formulário de login para garantir que os usuários possam acessar o site com facilidade.

Torne a localização dos botões de inscrição e login evidente. Verifique se o formulário pode ser usado em dispositivos de toque:

  • O tamanho da área de toque dos botões é de pelo menos 48 px.
  • O font-size dos elementos do seu formulário é grande o suficiente (20px funciona bem em dispositivos móveis).
  • Há espaço suficiente (margin) entre os controles de formulário e que as entradas sejam grandes o suficiente (use pelo menos padding: 15px em dispositivos móveis).

Ajudar os usuários a preencher o e-mail e a senha

Ajude os navegadores e gerenciadores de senhas a preencher automaticamente os detalhes da conta. Use autocomplete="email" para o campo de e-mail e autocomplete="current-password" para o campo de senha atual.

Para ajudar os usuários a preencher manualmente os detalhes da conta, use type="email" no campo de e-mail para mostrar o teclado na tela apropriado em dispositivos móveis.

Use o atributo required no campo de e-mail e senha para avisar sobre valores inválidos quando o usuário enviar o formulário. Use a validação em tempo real para ajudar os usuários a corrigir dados inválidos assim que os inserirem, em vez de esperar o envio do formulário.

Verifique se os usuários conseguem ver a senha que digitaram

O texto que você preenche para <input type="password"> é obscurecido por padrão para respeitar a privacidade dos usuários. Ajude os usuários a digitar a senha, mostrando um <button> para alternar a visibilidade do texto digitado.

Saiba mais sobre como implementar uma <button> de revelação de senha.

Verifique se os formulários de login e inscrição são utilizáveis

Teste seus formulários de login e inscrição regularmente com pessoas reais para garantir que a autenticação funcione conforme o esperado. Use análise e medição de usuários reais (RUM, na sigla em inglês) para coletar dados de campo. Use ferramentas como o Lighthouse e o PageSpeed Insights para realizar testes por conta própria. Saiba mais sobre testes de usabilidade e coleta de dados de análise.

Verifique se seus formulários funcionam em diferentes navegadores e plataformas. Teste seu formulário em diferentes tamanhos de tela usando apenas o teclado ou um leitor de tela, como o VoiceOver no Mac ou o NVDA no Windows.

Ajudar usuários a alterar as configurações da conta

Verifique se os usuários conseguem alterar todas as configurações da conta, incluindo endereços de e-mail, senhas e nomes de usuário.

Deixe claro quais dados são armazenados e ajude os usuários a fazer o download de todos os dados pessoais a qualquer momento. Garanta que os usuários possam excluir a conta, se quiserem. Recursos de gerenciamento de contas como esses podem ser um requisito legal em algumas regiões.

Garantir que os usuários possam atualizar as senhas

Facilite a atualização da senha para os usuários.

Solicite a senha atual aos usuários antes de alterá-la e envie um e-mail sobre uma alteração de senha com a opção de reverter e bloquear a conta.

Adicione a opção de solicitar uma nova senha e forneça um URL .well-known.

Recursos