Identidade

Ajudar os usuários a se inscrever

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

Confira um formulário de inscrição para saber como ajudar os usuários a se inscreverem no seu site.

Mantenha o formulário de inscrição simples e mostre apenas os controles necessários para criar uma conta. Não duplique os controles de formulário para ajudar os usuários a inserir os detalhes da conta corretamente. Enviar um e-mail de confirmação.

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 botão de mostrar senha <button>. Saiba mais sobre o padrão de mostrar senha.

Proteja seu formulário de inscrição

Nunca armazene ou transmita senhas em texto simples. Adicione sal e hash às senhas e não tente inventar seu próprio algoritmo de hash.

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

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

Ajudar os usuários a fazer login

Saiba como criar um formulário de login para garantir que os usuários possam fazer login no seu site.

Deixe a localização dos botões de inscrição e login óbvia. Verifique se o formulário pode ser usado em dispositivos touch:

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

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

Ajudar 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 adequado 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. Considere usar a validação em tempo real para ajudar os usuários a corrigir dados inválidos assim que eles forem inseridos, em vez de esperar o envio do formulário.

Verifique se os usuários podem ver a senha inserida

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

Saiba mais sobre como implementar um <button> de exibição de senha.

Verifique se os formulários de login e inscrição estão funcionando

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álises e medição de usuários reais (RUM) para coletar dados de campo e ferramentas como Lighthouse e PageSpeed Insights para executar testes por conta própria. Saiba mais sobre testes de usabilidade e coleta de dados de análise.

Verifique se os formulários funcionam em diferentes navegadores e plataformas. Teste o 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 os usuários a mudar as configurações da conta

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

Deixe claro quais dados você está armazenando e ajude os usuários a baixar todos os dados pessoais deles a qualquer momento. Permita que os usuários excluam a própria conta se quiserem. Recursos de gerenciamento de contas como esses podem ser uma exigência legal em algumas regiões.

Garantir que os usuários possam atualizar as senhas

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

Peça a senha atual aos usuários antes de mudar e envie um e-mail sobre uma mudança de senha com a opção de reverter e bloquear a conta.

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

Recursos