Ajudar os usuários a se inscreverem
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-sizedos elementos do seu formulário é grande o suficiente (20pxfunciona 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 menospadding: 15pxem 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.