Práticas recomendadas para o formulário de inscrição

Ajude seus usuários a se inscrever, fazer login e gerenciar os detalhes da conta com o mínimo de transtorno.

Sam Dutton

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 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 .

Duas capturas de tela de um modelo de site de e-commerce visto em um smartphone Android. O da esquerda usa um ícone para o link de login, que é um pouco ambíguo; a da direita simplesmente diz "Fazer login"
Deixe o processo de login evidente. Um ícone pode ser ambíguo, mas uma sinalização botão ou link "in" for óbvio.
. .
Capturas de tela do login no Gmail: uma página mostrando o botão "Fazer login" quando clicado, leva a um formulário que também tem um link "Criar conta".
A página de login do Gmail tem um link para criar uma conta.
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.

Não desvie a atenção dos usuários para que eles não concluam a inscrição.

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.

Login sem senha em medium.com.

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.

Explique o motivo da rejeição de uma senha.

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.

Página de atividade da conta do Gmail
Página de atividade da conta do Gmail.

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.

Página de login do WordPress
Página de login do WordPress, com as opções de login do Google e da Apple.

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.

Gmail, mostrando a troca de contas
Troca de contas no Gmail.

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.

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

Foto de @ecowarriorprincess no Unsplash.