Ajude seus usuários a se inscrever, fazer login e gerenciar os detalhes da conta com o mínimo de transtorno.
Se os usuários precisarem fazer login em seu site, um bom design de formulário de inscrição é críticos. Isso é especialmente verdadeiro para pessoas com conexões ruins, no celular, em com pressa ou sob estresse. Formulários de inscrição mal projetados recebem altas taxas de rejeição. Cada devolução pode significar um usuário perdido e descontente, e não apenas uma inscrição perdida. oportunidade.
Veja 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 possível.
- Deixe claro como criar uma conta.
- Deixe claro como acessar os detalhes da conta.
- Recorte a desorganização no formulário.
- Considere a duração da sessão.
- Ajude os gerenciadores de senhas a sugerir e armazenar senhas com segurança.
- Não permita senhas comprometidas.
- Não permita colar senhas.
- Nunca armazene nem transmita senhas em texto simples.
- Não force atualizações de senha.
- Facilitar a mudança ou redefinição de senhas.
- Ative o login federado.
- Simplifique a troca de contas.
- Considere oferecer a autenticação multifator.
- Cuidado com os nomes de usuário.
- Faça testes de campo e 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 para criarem uma conta no seu site, considere se você realmente precisa. Sempre que possível, evite bloquear recursos por trás do login.
O melhor é o formulário de inscrição.
Ao pedir que um usuário crie uma conta, você se coloca entre ele e o que ele está tentando alcançar. Você está pedindo um favor e pedindo que o usuário confie dados pessoais a você. Cada senha e item de dados que você armazena têm "dívida de dados" de privacidade e segurança, tornando-se um custo e uma responsabilidade seu site.
Se o principal motivo para você pedir aos usuários para criarem uma conta for salvar informações entre as navegações ou sessões de navegação, considere usar o armazenamento do lado do cliente. Para fazer compras forçando os usuários a criar uma conta para realizar uma compra é citado como o principal motivo para fazer compras o abandono do carrinho. Defina a opção "Comprar sem login" como padrão.
Deixe o processo de login evidente
Deixe óbvio como criar uma conta no seu site, por exemplo, com Login ou Login no canto superior direito da página. Evite usar um ícone ambíguo ou palavras vagas ("Venha 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 abordagem à usabilidade do site: Não me faça pensar! Se você precisar convencer outros membros da equipe da Web, use o Analytics para mostrar o impacto de diferentes .
Em janelas maiores do que as mostradas aqui, o Gmail exibe um link Fazer login e um botão Crie um botão.
Vincule as contas dos usuários que se inscreverem com um provedor de identidade como o Google e que inscreva-se usando e-mail e senha. Isso é fácil de fazer se você consegue acessar o endereço de e-mail de um usuário dos dados de perfil do provedor de identidade e correspondem às duas contas. O código abaixo mostra como acessar os dados de e-mail de um usuário com o Login do Google.
// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
var profile = auth2.currentUser.get().getBasicProfile();
console.log(`Email: ${profile.getEmail()}`);
}
Deixe claro como acessar os detalhes da conta
Depois que o usuário fizer login, deixe claro como acessar os detalhes da conta. Em particular, faça com que mostrar como mudar ou redefinir senhas.
Corte a bagunça do formulário
No fluxo de inscrição, seu trabalho é minimizar a complexidade e manter o usuário focado. Organize-se e organize as informações. Não é hora de distrações e tentações.
Na inscrição, peça o mínimo possível. Coletar outros dados do usuário (como nome e endereço) apenas quando você precisar e quando o usuário perceber um benefício claro ao fornecer esses dados. Observação importante que cada item de dados que você comunica e armazena gera custos e responsabilidades.
Não é preciso inserir informações duplicadas apenas para garantir que os dados de contato dos usuários estejam corretos. Isso diminui a velocidade preenchimento automático de um formulário e não fará sentido se os campos do formulário forem preenchidos automaticamente. Em vez disso, envie uma confirmação ao usuário depois que ele inserir os detalhes de contato e prosseguir com a criação da conta depois da resposta. Esse é um padrão comum de inscrição: os usuários estão acostumados com ele.
É recomendável considerar o login sem senha enviando um código sempre que os usuários fizerem login de um novo dispositivo ou navegador. Sites como o Slack e o Medium usam essa versão.
Assim como no login federado, você tem a vantagem de não precisar gerenciar senhas de usuário.
Considerar a duração da sessão
Independentemente da abordagem adotada para a identidade do usuário, você precisará tomar uma decisão cuidadosa sobre comprimento: por quanto tempo o usuário permanece conectado e o que pode fazer com que você o desconecte.
Considere se os usuários estão em dispositivos móveis ou computadores e se que compartilham no computador ou em dispositivos compartilhados.
Ajude os gerenciadores de senhas a sugerir e armazenar senhas com segurança
Você pode ajudar gerenciadores de senhas de terceiros e integrados ao navegador a sugerir e armazenar senhas para que os usuários não precisam escolher, lembrar ou digitar senhas. Gerenciadores de senhas funcionam bem navegadores modernos, sincronizando contas entre dispositivos, em aplicativos da Web e específicos de plataformas, e para novos dispositivos.
Por isso, é extremamente importante codificar corretamente os formulários de inscrição, especialmente o uso
valores de preenchimento automático. Nos formulários de inscrição, use autocomplete="new-password" para novas senhas e adicione
corrigir valores de preenchimento automático para outros campos do formulário sempre que possível, como autocomplete="email".
e autocomplete="tel". Você também pode ajudar os gerenciadores de senhas usando diferentes name e id
valores em formulários de inscrição e login, para o próprio elemento form, bem como para qualquer input, select
e textarea.
Use também o atributo type apropriado
para fornecer o teclado certo em dispositivos móveis e ativar a validação básica integrada pelo navegador.
Saiba mais em Práticas recomendadas para os formulários de pagamento e endereço.
Garantir que os usuários digitem senhas seguras
Permitir que gerenciadores de senhas sugiram senhas é a melhor opção, e você deve incentivá-los os usuários aceitem as senhas fortes sugeridas por navegadores e gerenciadores de terceiros.
No entanto, muitos usuários querem inserir as próprias senhas, por isso é necessário implementar regras para senhas força O Instituto Nacional de Padrões e Tecnologia dos EUA explica como evitar senhas não seguras.
Não permita senhas comprometidas
Independentemente das regras escolhidas para as senhas, nunca permita senhas que foram expostas em violações de segurança.
Depois que o usuário inserir a senha, será necessário verificar se ela não é uma senha já usada comprometido. O site Have I Been Pwned oferece uma API para senhas ou execute o processo como um serviço.
O Gerenciador de senhas do Google também permite verificar se alguma das suas senhas foi comprometida.
Se você rejeitar a senha proposta por um usuário, informe-o especificamente por que ela foi recusada. Mostrar os problemas inline e explicar 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 aguarde uma resposta do servidor.
Não proibir a colagem de senhas
Alguns sites não permitem que texto seja colado em entradas de senha.
Não permitir a ação de colar senhas irrita os usuários e incentiva senhas fáceis de memorizar (e, portanto, podem ser mais fáceis de comprometer) e, de acordo com organizações como o UK National Cyber Security Centre pode, na verdade, reduzir a segurança. Os usuários só sabem que não é permitido colar a senha depois que tentam colar a senha. Por isso, não permitir a colagem de senhas não evita vulnerabilidades da área de transferência.
Nunca armazene nem transmita senhas em texto simples
Use salt e hash para senhas e não tente inventar seu próprio algoritmo de hash.
Não forçar atualizações de senha
Não force os usuários a atualizar as 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 na segurança. Também é provável que as pessoas usar senhas não seguras e fáceis de lembrar ou manter um registro físico de senhas.
Em vez de forçar as atualizações de senha, monitore a ocorrência de atividades incomuns na conta e avise os usuários. Se possível, monitore também se há senhas comprometidas por causa de violações de dados.
Você também deve fornecer aos usuários acesso ao histórico de login da conta deles, mostrando a eles onde e quando ocorreu um login.
Facilitar a mudança ou redefinição de senhas
Deixe claro para os usuários onde e como atualizar a senha da conta. Em alguns sites, é surpreendentemente difícil.
E você deve, é claro, facilitar a redefinição da senha para o usuário, caso a esqueça. O Open Web Application Security Project fornece orientações detalhadas sobre como lidar senhas.
Para manter sua empresa e os usuários seguros, é especialmente importante ajudar os usuários a alterar
se descobrir que o arquivo foi comprometido. Para facilitar, você deve adicionar um
/.well-known/change-password URL para sua
site que redireciona para a página de gerenciamento de senhas. Isso permite que os gerenciadores de senhas naveguem
seus usuários diretamente para a página onde eles podem alterar a senha do seu site. Esse recurso é
foi implementado no Safari e no Chrome e será disponibilizado em outros navegadores. Ajudar os usuários a alterar senhas
facilmente adicionando um URL conhecido para alteração de senhas explica como
implementar isso.
Você também deve facilitar a exclusão da conta dos usuários, se quiserem.
Oferecer login por provedores de identidade de terceiros
Muitos usuários preferem fazer login em sites usando um formulário de inscrição com endereço de e-mail e 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.
Essa abordagem tem várias vantagens. Para usuários que criam uma conta usando login federado, você sem precisar pedir, se comunicar ou armazenar senhas.
Você também pode acessar informações adicionais de perfil verificado pelo login federado, como como 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 por conta própria. O login federado também pode facilitar muito quando os usuários recebem uma novo dispositivo.
Como integrar o Login do Google ao seu app da Web explica como adicionar o login federado às opções de inscrição. Há muitas outras plataformas de identidade disponíveis.
Simplifique a troca de contas
Muitos usuários compartilham dispositivos e trocam de contas usando o mesmo navegador. Se os usuários acessam ou não, simplifique a troca de contas.
Considere oferecer autenticação multifator
Autenticação multifator significa garantir que os usuários forneçam autenticação de 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 uma senha única baseada em app chave de segurança ou sensor de impressão digital. Práticas recomendadas de OTP por SMS e Como ativar a autenticação forte com o WebAuthn explicar como implementar a autenticação multifator.
Você certamente deve oferecer (ou aplicar) autenticação multifator se seu site lida com dados pessoais ou informações sensíveis.
Cuidado com os nomes de usuário
Não insista em um nome de usuário a menos (ou até) precisar de um. Permitir que os usuários se inscrevam e façam login com o apenas um endereço de e-mail (ou número de telefone) e senha ou um login federado se preferirem. Não o force a escolher e lembrar um nome de usuário.
Se seu site exigir nomes de usuário, não imponha regras injustificáveis e não impeça os usuários de atualizar o nome de usuário. No back-end, gere um ID exclusivo para cada conta de usuário. não é um identificador com base em dados pessoais, como nome de usuário.
Use também autocomplete="username" nos nomes de usuário.
Teste em vários dispositivos, plataformas, navegadores e versões
Teste formulários de inscrição nas plataformas mais comuns para seus usuários. A funcionalidade dos elementos do formulário pode variar, e as diferenças no tamanho da janela de visualização podem causar problemas de layout. O BrowserStack permite testes sem custo financeiro para projetos de código aberto em vários dispositivos e navegadores.
Implementar análises e monitoramento de usuários reais
Você precisa de dados de campo e de laboratório para entender a experiência dos usuários com seus formulários de inscrição. Análise e monitoramento real de usuários (RUM) fornecem dados sobre a experiência real dos seus usuários, como quanto tempo as páginas de inscrição levam para carregado, com quais componentes de IU os usuários interagem (ou não) e quanto tempo os usuários levam para concluir se inscrever.
- Análise de página: visualizações de página, taxas de rejeição e saídas para cada página no 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 qual proporção de usuários clica em botões, e outros componentes das páginas de inscrição.
- Desempenho do site: métricas centradas no usuário pode informar 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, além de monitorar seu site em busca de problemas exposto por testes locais.
Continue aprendendo
- Práticas recomendadas para o formulário de login
- Práticas recomendadas para formulários de pagamento e endereço
- Crie formulários incríveis
- Práticas recomendadas para o design de formulários em dispositivos móveis
- Controles de formulários mais eficientes
- Criar formulários acessíveis
- Como otimizar o fluxo de inscrição usando a API Credential Management (link em inglês)
- Verificar números de telefone na Web com a API WebOTP
Foto de @ecowarriorprincess no Unsplash.