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

Ajude os usuários a se inscreverem, fazerem login e gerenciarem os detalhes da conta com o mínimo de esforço.

Sam Dutton

Se os usuários precisarem fazer login no seu site, um bom design de formulário de inscrição será essencial. Isso é especialmente verdadeiro para pessoas com conexões ruins, em dispositivos móveis, com pressa ou sob estresse. Formulários de inscrição mal projetados têm altas taxas de rejeição. Cada rejeição pode significar um usuário perdido e insatisfeito, não apenas uma oportunidade de inscrição perdida.

Confira um exemplo de 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.
• Reduza a confusão de formulários.
• Considere a duração da sessão.
• Ajudar os gerenciadores de senhas a sugerir e armazenar senhas com segurança.
• Não permitir senhas comprometidas.
• Permita colar senhas.
• Nunca armazene ou transmita senhas em texto simples.
• Não force atualizações de senha.
• Facilite a mudança ou redefinição de senhas.
• Ative o login federado.
• Facilite a troca de contas.
• Considere oferecer autenticação multifator.
• Tenha cuidado com os nomes de usuário.
• Teste no campo e no laboratório.
• Teste em vários navegadores, dispositivos e plataformas.

Evite fazer login, se possível

Antes de implementar um formulário de inscrição e pedir aos usuários para criar uma conta no seu site, considere se isso é realmente necessário. Sempre que possível, evite restringir recursos com login.

O melhor formulário de inscrição é aquele que não existe.

Ao pedir que um usuário crie uma conta, você se coloca entre ele e o que ele está tentando fazer. Você está pedindo um favor e pedindo ao usuário que confie em você com dados pessoais. Cada senha e item de dados armazenados gera uma "dívida de dados" de privacidade e segurança, tornando-se um custo e uma responsabilidade para seu site.

Se o principal motivo para pedir que os usuários criem uma conta for 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. Defina a finalização de compra sem login como padrão.

Deixe o login óbvio

Deixe claro como criar uma conta no seu site, por exemplo, com um botão Fazer login ou Entrar no canto superior direito da página. Evite usar um ícone ambíguo ou uma linguagem vaga ("Entre nessa!", "Participe") e não oculte o login em um menu de navegação. O especialista em usabilidade Steve Krug resumiu essa abordagem para a usabilidade de sites: Não me faça pensar! Se você precisar convencer outras pessoas da sua equipe da Web, use a análise para mostrar o impacto de diferentes opções.

Vincule as contas dos usuários que se inscrevem usando um provedor de identidade, como o Google, e que também se inscrevem usando e-mail e senha. Isso é simples se você puder acessar o endereço de e-mail de um usuário com os dados de perfil do provedor de identidade e corresponder às duas contas. O código mostrado aqui mostra como acessar dados de e-mail de um usuário do Google Sign-in.

// 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 um usuário fizer login, deixe claro como acessar os detalhes da conta. Em especial, deixe claro como mudar ou redefinir senhas.

Reduzir a confusão de formulários

No fluxo de inscrição, seu trabalho é minimizar a complexidade e manter o usuário focado. Acabe com a bagunça. Não é hora de distrações e tentações!

Na inscrição, peça o mínimo possível. Colete dados adicionais do usuário (como nome e endereço) somente quando necessário e quando o usuário perceber um benefício claro ao fornecer esses dados. Lembre-se de que cada item de dados que você comunica e armazena gera custos e responsabilidades.

Não duplique as entradas apenas para garantir que os usuários insiram os detalhes de contato corretamente. Isso diminui a velocidade de conclusão do formulário e não faz sentido se os campos forem preenchidos automaticamente. Em vez disso, envie um código de confirmação para o usuário depois que ele inserir os detalhes de contato e continue com a criação da conta quando ele responder. Esse é um padrão de inscrição comum, e os usuários estão acostumados com ele.

Considere o login sem senha enviando um código aos usuários sempre que eles fizerem login em um novo dispositivo ou navegador. Sites como Slack e Medium usam uma versão disso.

Assim como no login federado, isso tem o benefício adicional de não precisar gerenciar senhas de usuários.

Considerar a duração da sessão

Seja qual for a abordagem adotada 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 permanece conectado e o que pode fazer com que ele saia.

Considere se os usuários estão em dispositivos móveis ou computadores e se eles estão compartilhando em computadores ou dispositivos compartilhados.

Ajudar 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 precisem escolher, lembrar ou digitar senhas. Os gerenciadores de senhas funcionam bem em navegadores modernos, sincronizando contas em dispositivos, apps específicos da plataforma e da Web, além de dispositivos novos.

Por isso, é extremamente importante codificar os formulários de inscrição corretamente, principalmente usando os valores de preenchimento automático corretos. Para formulários de inscrição, use autocomplete="new-password" para novas senhas e adicione valores de preenchimento automático 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 senhas usando diferentes valores de name e id em formulários de inscrição e login, para o próprio elemento form, bem como para qualquer elemento input, select e textarea.

Use também o atributo type adequado 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 formulários de pagamento e endereço.

Garantir que os usuários insiram senhas seguras

Ativar os gerenciadores de senhas para sugerir senhas é a melhor opção. Incentive os usuários a aceitar as senhas fortes sugeridas pelos navegadores e gerenciadores de navegadores de terceiros.

No entanto, muitos usuários querem inserir as próprias senhas, então você precisa implementar regras para a força da senha. O Instituto Nacional de Padrões e Tecnologia dos EUA explica como evitar senhas inseguras (em inglês).

Não permitir senhas comprometidas

Não importa quais regras você escolha para as senhas, nunca permita senhas que foram expostas em violações de segurança.

Depois que um usuário inserir uma senha, verifique se ela não foi violada. O site Have I Been Pwned (link em inglês) oferece uma API para verificação de senhas, ou você pode executar isso como um serviço por conta própria.

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 especificamente o motivo da rejeição. Mostre os problemas inline e explique como corrigi-los assim que o usuário inserir um valor, não depois que ele enviar o formulário de inscrição e precisar esperar uma resposta do seu servidor.

Não proibir a colagem de senhas

Alguns sites não permitem que o texto seja colado em campos de senha.

Não permitir colar senhas irrita os usuários, incentiva o uso de senhas fáceis de lembrar (e, portanto, mais fáceis de serem comprometidas) e, de acordo com organizações como o Centro Nacional de Segurança Cibernética do Reino Unido, pode reduzir a segurança. Os usuários só descobrem que não é possível colar depois de tentar colar a senha. Portanto, impedir a colagem de senhas não evita vulnerabilidades da área de transferência.

Nunca armazene ou transmita senhas em texto simples

Não se esqueça de adicionar sal e hash às 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 de forma arbitrária.

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 isso incentive as pessoas a usar senhas fáceis de lembrar, mas não seguras, ou a manter um registro físico das senhas.

Em vez de forçar atualizações de senha, monitore atividades incomuns na conta e avise os usuários. Se possível, monitore também as senhas que foram comprometidas devido a violações de dados.

Também é recomendável dar aos usuários acesso ao histórico de login da conta, mostrando onde e quando um login ocorreu.

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, isso é surpreendentemente difícil.

É claro que você também precisa facilitar para que os usuários redefinam a senha se a esquecerem. O Open Web Application Security Project oferece orientações detalhadas sobre como lidar com senhas perdidas.

Para manter sua empresa e seus usuários seguros, é especialmente importante ajudar os usuários a mudar a senha se descobrirem que ela foi comprometida. Para facilitar, adicione um URL /.well-known/change-password ao seu site que redirecione para a página de gerenciamento de senhas. Isso permite que os gerenciadores de senhas naveguem os usuários diretamente para a página em que eles podem mudar a senha do seu site. Esse recurso já foi implementado no Safari e no Chrome e será lançado em outros navegadores. Ajude os usuários a mudar as senhas facilmente adicionando um URL conhecido para isso explica como implementar essa mudança.

Também é importante facilitar a exclusão da conta pelos usuários, caso seja essa a vontade deles.

Oferecer login usando 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, também é recomendável permitir que os usuários façam login usando 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 o login federado, você não precisa pedir, comunicar ou armazenar senhas.

Você também pode acessar outras informações verificadas do perfil pelo login federado, como um endereço de e-mail. Isso 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 facilita muito a vida dos usuários quando eles recebem um novo dispositivo.

Como integrar o Login do Google no seu app da Web explica como adicionar o login federado às suas opções de inscrição. Muitas outras plataformas de identidade estão disponíveis.

Simplificar 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 o login federado, você precisa simplificar a troca de contas.

Considere oferecer a autenticação multifator

A autenticação multifator garante que os usuários façam a 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 usando um código único baseado em app, uma chave de segurança ou um sensor de impressão digital. As práticas recomendadas de OTP por SMS e Como ativar a autenticação forte com WebAuthn explicam como implementar a autenticação multifator.

É recomendável oferecer (ou exigir) a autenticação multifator se o site processar informações pessoais ou sensíveis.

Tenha cuidado com os nomes de usuário

Não insista em um nome de usuário, a menos que (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 uma senha ou login federado, se preferirem. Não force os usuários a escolher e lembrar um nome de usuário.

Se o site exigir nomes de usuário, não imponha regras irracionais e não impeça que os usuários atualizem o nome de usuário. No back-end, gere um ID exclusivo para cada conta de usuário, não um identificador baseado em dados pessoais, como nome de usuário.

Use autocomplete="username" para nomes de usuário.

Testar 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 de formulário pode variar, e 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 o Real User Monitoring

Você precisa de dados de campo e de laboratório para entender como os usuários interagem com seus formulários de inscrição. O Google Analytics e o Real User Monitoring (RUM) fornecem dados sobre a experiência real dos usuários, como o tempo de carregamento das páginas de inscrição, os componentes da interface com que os usuários interagem (ou não) e o tempo que eles levam para concluir a inscrição.

• Análise de página: visualizações de página, taxas de rejeição e saídas para cada página no fluxo de inscrição.
• Análise de interação: os funis de meta e os eventos indicam onde os usuários abandonam o fluxo de inscrição e qual proporção de usuários clica em botões, links e outros componentes das páginas de inscrição.
• Performance do site: as métricas centradas no usuário podem informar se o fluxo de inscrição demora para carregar ou está visualmente instável.

Pequenas mudanças podem fazer uma grande diferença nas taxas de conclusão dos formulários de inscrição. O Analytics e o RUM permitem otimizar e priorizar mudanças, além de monitorar seu site para identificar problemas que não são 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
• Criar formulários incríveis
• Práticas recomendadas para design de formulários em dispositivos móveis
• Controles de formulário mais eficientes
• Como criar formulários acessíveis
• Como simplificar o fluxo de inscrição usando a API Credential Management
• Verificar números de telefone na Web com a API WebOTP

Foto de @ecowarriorprincess no Unsplash (links em inglês).