Práticas recomendadas para formulários de inscrição
Ajude seus usuários a se inscrever, fazer login e gerenciar os detalhes de suas contas com o mínimo de confusão.
Se os usuários precisarem fazer login em seu site, um bom design do formulário de inscrição é algo essencial. Isso é especialmente verdadeiro para pessoas com conexões ruins, no celular, com pressa ou sob estresse. Formulários de inscrição mal projetados obtêm altas taxas de rejeição. Cada rejeição pode significar um usuário perdido e insatisfeito, e não apenas uma oportunidade de inscrição perdida.
Aqui está um exemplo de um formulário de inscrição muito simples que demonstra todas as práticas recomendadas:
Lista de verificação #
- Evite fazer login, se puder.
- Deixe claro como criar uma conta.
- Deixe claro como acessar os detalhes da conta.
- Elimine a desordem dos formulários.
- Considere a duração da sessão.
- Ajude os gerenciadores de senha a sugerir e armazenar senhas com segurança.
- Não permita senhas comprometidas.
- Permita a colagem da senha.
- Nunca armazene ou transmita senhas em texto simples.
- Não force atualizações de senha.
- Simplifique a alteração ou redefinição de senhas.
- Habilite o login federado.
- Facilite a troca de contas.
- Considere oferecer autenticação multifator.
- Cuidado com os nomes de usuário.
- Teste em campo e também no laboratório.
- Teste em uma variedade de navegadores, dispositivos e plataformas.
Evite fazer login se puder #
Antes de implementar um formulário de inscrição e pedir aos usuários que criem uma conta em seu site, considere se você realmente precisa disso. Sempre que possível, você deve evitar bloquear recursos por trás do login.
O melhor formulário de inscrição é nenhum formulário de inscrição!
Ao pedir a um usuário para criar uma conta, você se interpõe entre eles e o que estão tentando alcançar. Você está pedindo um favor e pedindo ao usuário que lhe confie dados pessoais. Cada senha e dado que você armazena acarreta uma "dívida de dados" de privacidade e segurança, tornando-se um custo e uma responsabilidade para o seu site.
Se o principal motivo pelo qual você pede aos usuários para criar uma conta é para salvar informações entre navegações ou sessões de navegação, considere usar o armazenamento do lado do cliente. Para sites de compras, forçar os usuários a criar uma conta para fazer uma compra é citado como um dos principais motivos para o abandono do carrinho de compras. Você deve tornar padrão o check-out como convidado.
Torne o login óbvio #
Deixe claro como criar uma conta em seu site, por exemplo, com um botão Login ou Inscrever-se no canto superior direito da página. Evite usar um ícone ambíguo ou palavras vagas ("Suba a bordo!", "Junte-se a nós") e não oculte o login em um menu de navegação. O especialista em usabilidade Steve Krug resumiu esta abordagem para a usabilidade de sites: Não me faça pensar! Se você precisar convencer outras pessoas em sua equipe da web, use análises para mostrar o impacto das diferentes opções.
Em tamanhos de janela maiores do que os mostrados aqui, o Gmail exibe um link Login e um botão Criar uma conta.
Certifique-se de vincular contas de usuários que se inscreverem por meio de um provedor de identidade como o Google e que também tiverem se inscrito usando e-mail e senha. Isso é fácil de fazer se você puder acessar o endereço de e-mail de um usuário a partir dos dados de perfil do provedor de identidade e combinar as duas contas. O código a seguir mostra como acessar os dados de e-mail de um usuário do Google Sign-in.
// auth2 é inicializado com gapi.auth2.init()
if (auth2.isSignedIn.get()) {
var profile = auth2.currentUser.get().getBasicProfile();
console.log(`Email: ${profile.getEmail()}`);
}Depois que o usuário fizer login, deixe claro como acessar os detalhes da conta. Em particular, deixe claro como alterar ou redefinir as senhas.
Elimine a desordem do formulário #
No fluxo de inscrição, seu trabalho é minimizar a complexidade e manter o foco do usuário. Elimine a desordem. Este não é o momento para distrações e tentações!
Ao inscrever-se, peça o mínimo possível. Colete dados adicionais do usuário (como nome e endereço) apenas quando for necessário e quando o usuário perceber um benefício claro em fornecer esses dados. Lembre-se de que cada dado que você comunica e armazena incorre em custos e responsabilidades.
Não duplique suas entradas apenas para garantir que os usuários acertem seus dados de contato. Isso retarda o preenchimento do formulário e não faz sentido se os campos do formulário forem preenchidos automaticamente. Em vez disso, envie um código de confirmação para o usuário assim que ele inserir seus detalhes de contato e continue com a criação da conta assim que ele responder. Este é um padrão de inscrição comum: os usuários estão acostumados.
Você pode considerar o login sem senha, enviando um código aos usuários sempre que eles se conectarem em um novo dispositivo ou navegador. Sites como Slack e Medium usam uma versão disso.
Assim como acontece com o login federado, ele tem a vantagem de não precisar gerenciar senhas de usuários.
Considere a duração da sessão #
Qualquer que seja a abordagem que você adotar para a identidade do usuário, você precisará tomar uma decisão cuidadosa sobre a duração da sessão: por quanto tempo o usuário permanecerá conectado e o que pode fazer com que você o desconecte.
Considere se seus usuários estão no celular ou desktop, e se eles estão compartilhando no desktop ou compartilhando dispositivos.
Ajude os gerentes de senha a sugerir e armazenar senhas com segurança #
Você pode ajudar os gerenciadores de senhas de terceiros e integrados no navegador a sugerir e armazenar senhas para que os usuários não precisem escolher, lembrar ou digitar as senhas eles próprios. Os gerenciadores de senhas funcionam bem em navegadores modernos, sincronizando contas em dispositivos, em aplicativos específicos de plataforma e da web, e para novos dispositivos.
Isso torna extremamente importante codificar os formulários de inscrição corretamente, em particular para usar os valores de preenchimento automático corretos. Para formulários de inscrição, use autocomplete="new-password" para novas senhas e adicione valores de autocomplete corretos a outros campos do formulário sempre que possível, como autocomplete="email" e autocomplete="tel" . Você também pode ajudar os gerenciadores de senha usando diferentes name e id em formulários de inscrição e inscrição, para o form , bem como quaisquer elementos de input , select e textarea .
Você também deve usar o atributo type apropriado para fornecer o teclado certo no celular e habilitar a validação integrada básica pelo navegador. Você pode descobrir mais em Práticas recomendadas sobre formulários de pagamento e endereço.
Certifique-se de que os usuários insiram senhas seguras #
Permitir que os gerenciadores de senhas sugiram senhas é a melhor opção, e você deve encorajar os usuários a aceitar as senhas fortes sugeridas por navegadores e gerenciadores de navegador de terceiros.
No entanto, muitos usuários desejam inserir suas próprias senhas, portanto, é necessário implementar regras para garantir a força da senha. O Instituto Nacional de Padrões e Tecnologia dos EUA explica como evitar senhas inseguras.
Não permitir senhas comprometidas #
Quaisquer que sejam as regras que você escolher para as senhas, nunca deve permitir senhas que tenham sido expostas em violações de segurança .
Depois que um usuário inserir uma senha, você precisa verificar se não é uma senha que já tenha sido comprometida. O site Have I Been Pwned oferece uma API para verificação de senha, ou você mesmo pode executá-la como um serviço.
O Gerenciador de Senhas do Google também permite que você verifique se alguma de suas senhas existentes foi comprometida.
Se você rejeitar a senha proposta por um usuário, diga a ele especificamente por que ela foi rejeitada. Mostre os problemas em linha e explique como corrigi-los assim que o usuário inserir um valor, e não depois de enviar o formulário de inscrição e ter que esperar por uma resposta do seu servidor.
Não proíba a colagem de senha #
Alguns sites não permitem que o texto seja colado nas entradas de senha.
Não permitir a colagem de senhas irrita os usuários, incentiva as senhas que são memoráveis (e, portanto, podem ser mais fáceis de comprometer) e, de acordo com organizações como o UK National Cyber Security Center, pode na verdade reduzir a segurança. Os usuários só ficam sabendo que colar não é permitido depois de tentarem colar a senha, portanto, não permitir a colagem de senha não evita vulnerabilidades da área de transferência.
Nunca armazene ou transmita senhas em texto simples #
Certifique-se de adicionar senhas salt and hash às senhas, e não tente inventar seu próprio algoritmo de hash!
Não force as atualizações de senha #
Não force os usuários a atualizar suas senhas arbitrariamente.
Forçar atualizações de senha pode ser caro para os departamentos de TI, irritante para os usuários e não tem muito impacto na segurança. Também é provável que encoraje as pessoas a usarem senhas não seguras e fáceis de memorizar ou a manter um registro físico das senhas.
Em vez de forçar atualizações de senha, você deve monitorar a atividade incomum da conta e avisar os usuários. Se possível, você também deve monitorar as senhas que tenham sido comprometidas devido a violações de dados.
Você também deve oferecer aos seus usuários acesso ao histórico de login da conta, mostrando onde e quando o login ocorreu.
Simplifique a alteração ou redefinição de senhas #
Deixe claro para os usuários onde e como atualizar a senha da conta. Em alguns sites, isso é surpreendentemente difícil.
Obviamente, você também deve tornar mais simples para os usuários redefinir suas senhas caso a esqueçam. O Open Web Application Security Project fornece orientação detalhada sobre como lidar com senhas perdidas.
Para manter sua empresa e seus usuários seguros, é especialmente importante ajudar os usuários a alterar suas senhas se descobrirem que ela foi comprometida. Para tornar isso mais fácil, você deve adicionar um URL /.well-known/change-password ao seu site que redireciona para a página de gerenciamento de senha. Isso permite que os gerenciadores de senha levem seus usuários diretamente para a página onde eles poderão alterar suas senhas para o seu site. Este recurso agora está implementado no Safari, Chrome e está chegando a outros navegadores. Ajude os usuários a alterar as senhas com facilidade adicionando um URL conhecido para alterar as senhas explica como implementar isso.
Você também deve simplificar para os usuários a exclusão de suas contas, se assim o desejarem.
Oferecer login por meio de provedores de identidade terceirizados #
Muitos usuários preferem fazer login em sites usando um endereço de e-mail e um formulário de inscrição com senha. No entanto, você também deve permitir que os usuários façam login por meio de um provedor de identidade de terceiros, também conhecido como login federado.
Esta abordagem tem várias vantagens. Para usuários que criarem uma conta usando login federado, você não precisa pedir, comunicar ou armazenar senhas.
Você também pode acessar informações adicionais do perfil verificado a partir do login federado, como um endereço de e-mail, o que significa que o usuário não precisa inserir esses dados e você não precisa fazer a verificação sozinho. O login federado também pode facilitar muito para os usuários quando eles tiverem um novo dispositivo.
A integração do Google Sign-In em seu aplicativo da web explica como adicionar o login federado às suas opções de inscrição. Há muitas outras plataformas de identidade disponíveis.
Torne a troca de contas simples #
Muitos usuários compartilham dispositivos e trocam de contas usando o mesmo navegador. Quer os usuários acessem o login federado ou não, você deve simplificar essa troca de contas.
Considere oferecer autenticação multifator #
A autenticação multifator significa garantir que os usuários forneçam autenticação em mais de uma maneira. Por exemplo, além de exigir que o usuário defina uma senha, você também pode aplicar a verificação usando uma senha única enviada por e-mail ou mensagem de texto SMS ou usando um código único baseado em aplicativo, chave de segurança ou sensor de impressão digital. Práticas recomendadas de SMS OTP e Habilitando autenticação forte com WebAuthn explicam como implementar a autenticação multifator.
Você certamente deve oferecer (ou aplicar) autenticação multifator se seu site lida com informações pessoais ou confidenciais.
Tome cuidado com os nomes de usuário #
Não insista em um nome de usuário, a menos (ou até) que você precise de um. Permita que os usuários se inscrevam e façam login apenas com um endereço de e-mail (ou número de telefone) e senha, ou login federado, se preferirem. Não os force a escolher e lembrar um nome de usuário.
Se o seu site exige nomes de usuário, não imponha regras irracionais a eles e não impeça os usuários de atualizarem seus nomes de usuário. Em seu back-end, você deve gerar um ID exclusivo para cada conta de usuário, não um identificador baseado em dados pessoais, como nome de usuário.
Certifique-se também de usar autocomplete="username" para os nomes de usuário.
Teste em uma variedade de dispositivos, plataformas, navegadores e versões #
Teste os formulários de inscrição nas plataformas mais comuns para seus usuários. A funcionalidade do elemento do formulário pode variar e as diferenças no tamanho da janela de visualização podem causar problemas de layout. O BrowserStack possibilita o teste gratuito para projetos de código aberto em uma variedade de dispositivos e navegadores.
Implemente análises e monitoramento de usuário real #
Você precisa de dados de campo e também de dados de laboratório para entender como os usuários experimentam seus formulários de inscrição. Analytics e Real User Monitoring (RUM) fornecem dados para a experiência real de seus usuários, como quanto tempo as páginas de inscrição levam para carregar, com quais componentes de IU os usuários interagem (ou não) e quanto tempo leva para os usuários concluírem a assinatura acima.
- Página de análise: visualizações de página, taxas de rejeição e saídas para cada página em seu fluxo de inscrição.
- Análise de interação: funis de meta e eventos indicam onde os usuários abandonam o fluxo de inscrição e a proporção de usuários que clicam em botões, links e outros componentes de suas páginas de inscrição.
- Desempenho do site: as métricas centradas no usuário podem dizer se o fluxo de inscrição está lento para carregar ou visualmente instável .
Pequenas mudanças podem fazer uma grande diferença nas taxas de conclusão dos formulários de inscrição. Analytics e RUM permitem que você otimize e priorize mudanças e monitore seu site quanto a problemas que não tenham sido expostos por testes locais.
Continue aprendendo #
- Práticas recomendadas para formulários de login
- Práticas recomendadas para formulários de pagamento e endereço
- Crie formulários incríveis
- Melhores práticas para design de formulários para celular
- Controles de formulário mais capazes
- Criação de formulários acessíveis
- Simplificando o fluxo de inscrição usando a API de gerenciamento de credenciais
- Verifique os números de telefone na web com a API WebOTP
Foto de @ecowarriorprincess no Unsplash.