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

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

Sam Dutton

Se os usuários precisarem fazer login no seu site, um bom design do formulário de inscrição é 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, e 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.
• Reduzir a desordem do formulário.
• 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.
• Permitir a colagem de senhas.
• Nunca armazene ou transmita senhas em texto simples.
• Não forçar atualizações de senha.
• Simplifique a alteração ou redefinição de senhas.
• Ative o login federado.
• Simplificamos a troca de contas.
• Considere oferecer autenticação multifator.
• 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 que os usuários criem uma conta no seu site, considere se isso é realmente necessário. Sempre que possível, evite bloquear recursos por login.

O melhor formulário de inscrição é nenhum 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 ao usuário que confie em você com dados pessoais. Cada senha e item de dados armazenados carregam uma "dívida de dados" de privacidade e segurança, se tornando um custo e uma responsabilidade para seu site.

Se o principal motivo para pedir que os usuários criem uma conta é salvar informações entre navegações ou sessões de navegação, use 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 de abandono do carrinho de compras. Defina a finalização de compra como padrão.

Deixar o login claro

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

Vincule as contas dos usuários que se inscreveram por um provedor de identidade, como o Google, e também por 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 do perfil do provedor de identidade e corresponder as duas contas. O código abaixo mostra como acessar dados de e-mail de um usuário do 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 um usuário faz login, deixe claro como acessar os detalhes da conta. Em particular, deixe claro como mudar ou redefinir senhas.

Reduzir a desordem do formulário

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

Na inscrição, peça o mínimo possível. Colete outros dados do usuário (como nome e endereço) somente quando for 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 tenham os dados de contato corretos. Isso atrasa a conclusão 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 ao 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: os usuários estão acostumados a ele.

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

Assim como no login federado, isso tem a vantagem adicional de não precisar gerenciar as senhas dos usuários.

Considere a duração da sessão

Seja qual for a abordagem que você adotar para a identidade do usuário, é preciso tomar uma decisão cuidadosa sobre a duração da sessão: por quanto tempo o usuário permanece conectado e o que pode causar o desligamento dele.

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

Ajudar os gerenciadores de senhas a sugerir e armazenar senhas com segurança

Você pode ajudar gerenciadores de senhas de navegador integrados e de terceiros 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 entre dispositivos, entre plataformas específicas e apps da Web e em novos dispositivos.

Por isso, é extremamente importante codificar os formulários de inscrição corretamente, principalmente para usar os valores corretos de preenchimento automático. Para formulários de inscrição, use autocomplete="new-password" para novas senhas e adicione valores de preenchimento automático corretos a outros campos de 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 qualquer elemento input, select e textarea.

Também é necessário usar o atributo type adequado para fornecer o teclado certo em dispositivos móveis e ativar a validação integrada básica pelo navegador. Saiba mais nas práticas recomendadas para formulários de pagamento e endereço.

Garantir que os usuários insiram senhas seguras

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

No entanto, muitos usuários querem inserir as próprias senhas. Por isso, você precisa implementar regras para a força da senha. O Instituto Nacional de Padrões e Tecnologia dos EUA explica como evitar senhas não seguras.

Não permitir senhas comprometidas

Seja qual for a regra que você escolher para as senhas, nunca permita senhas que tenham sido expostas em violações de segurança.

Depois que um usuário digitar uma senha, você precisa verificar se ela não foi comprometida. O site Have I Been Pwned (em inglês) oferece uma API para verificação de senha, ou você pode executar esse 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 especificamente por que ela foi rejeitada. Mostre os problemas inline e explique como corrigi-los, assim que o usuário inserir um valor, e não depois que ele enviar o formulário de inscrição e precisar esperar uma resposta do servidor.

Não proibir a colagem de senhas

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

Proibir a colagem de senhas irrita os usuários, incentiva senhas memoráveis (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 até reduzir a segurança. Os usuários só ficam sabendo que a colagem não é permitida depois de tentarem colar a senha. Portanto, proibir a colagem de senhas não evita vulnerabilidades da área de transferência.

Nunca armazene ou transmita senhas em texto simples

Use sal e hash nas 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 incentive as pessoas a usar senhas memoráveis não seguras ou a manter um registro físico das senhas.

Em vez de forçar as atualizações de senha, monitore a atividade da conta incomum e avise os usuários. Se possível, monitore também as senhas que forem comprometidas por violações de dados.

Você também precisa fornecer aos usuários acesso ao histórico de login da conta, mostrando onde e quando um 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, é surpreendentemente difícil.

É claro que você também precisa facilitar a redefinição da senha para os usuários, caso eles a esqueçam. 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 eles 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 diretamente para a página em que os usuários 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 senhas com facilidade adicionando um URL conhecido para a alteração de senhas explica como implementar isso.

Também é importante facilitar a exclusão da conta dos usuários, caso eles queiram.

Oferecer login por provedores de identidade de terceiros

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, também é necessário permitir que os usuários façam login por 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, não é necessário pedir, comunicar ou armazenar senhas.

Também é possível 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. O login federado também pode facilitar 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 alternam entre contas usando o mesmo navegador. Independentemente de os usuários acessarem o login federado ou não, simplifique a troca de conta.

Considerar oferecer autenticação multifator

A 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 um código de acesso único enviado 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 Ativação da autenticação forte com o WebAuthn explicam como implementar a autenticação multifator.

Você precisa oferecer (ou aplicar) a autenticação multifator se o site processa informações pessoais ou sensíveis.

Cuidado com os nomes de usuário

Não insista em um nome de usuário, a menos que você precise de um. Permita que os usuários se inscrevam e façam login usando apenas um endereço de e-mail (ou número de telefone) e senha ou login federado, se preferirem. Não force os usuários a escolher e lembrar de um nome de usuário.

Se o site exigir nomes de usuário, não imponha regras inadequadas a eles e não impeça os usuários de atualizar o nome de usuário. No back-end, você precisa gerar um ID exclusivo para cada conta de usuário, não um identificador com base em dados pessoais, como nome de usuário.

Além disso, use autocomplete="username" para nomes de usuário.

Testar em vários 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 de formulário pode variar, e diferenças no tamanho da janela de visualização podem causar problemas de layout. A 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 como os usuários interagem com seus formulários de inscrição. A análise e o Real User Monitoring (RUM) fornecem dados sobre a experiência real dos usuários, como o tempo que as páginas de inscrição levam para carregar, quais componentes da interface os usuários interagem (ou não) e quanto tempo leva para concluir a inscrição.

• Análise de páginas: visualizações de página, taxas de rejeição e saídas de 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 porcentagem de usuários clica em botões, links e outros componentes das páginas de inscrição.
• Performance do site: as métricas voltadas ao usuário podem indicar se o carregamento do fluxo de inscrição é lento ou visualmente instável.

Pequenas mudanças podem fazer uma grande diferença nas taxas de conclusão dos formulários de inscrição. O Google Analytics e o RUM permitem otimizar e priorizar mudanças e monitorar seu site para detectar problemas que não são expostos pelo teste local.

Continue aprendendo

• Práticas recomendadas para formulários de login
• Práticas recomendadas para pagamentos e formulários de endereço
• Criar formulários incríveis
• Práticas recomendadas para o design de formulários para dispositivos móveis
• Mais controles de formulário
• Como criar formulários acessíveis
• 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.