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

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

Sam Dutton

Se os usuários precisarem fazer login no seu site, um bom design de formulário de inscrição é fundamental. Isso vale principalmente para pessoas com conexões ruins, que usam dispositivos móveis, que estão com pressa ou sob estresse. Formulários de inscrição mal elaborados recebem 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.

Veja a seguir 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 sempre que possível.
• Deixe claro como criar uma conta.
• Deixe claro como acessar os detalhes da conta.
• Recortar a desordem.
• Considere a duração da sessão.
• Ajudar os gerenciadores de senhas a sugerir e armazenar senhas com segurança.
• Não permita senhas comprometidas.
• Permitir colar a senha.
• Nunca armazene nem transmita senhas em texto simples.
• Não force atualizações de senha.
• Facilitar a alteração ou a redefinição de senhas.
• Ative o login federado.
• Simplifique a troca de contas.
• Considere oferecer autenticação multifator.
• Tenha cuidado com os nomes de usuário.
• Faça testes no campo e no laboratório.
• Teste em vários navegadores, dispositivos e plataformas.

Evite fazer login sempre que possível.

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

O melhor formulário de inscrição é nenhum formulário de inscrição!

Ao pedir para um usuário criar uma conta, você se coloca entre eles e o que ele está tentando alcançar. Você está pedindo um favor e pedindo ao usuário que confie dados pessoais a você. Cada senha e item de dados que você armazena acarreta em débito e privacidade de dados, o que se torna 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, 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. É necessário tornar a opção "Comprar sem login" o padrão.

Torne o login óbvio

Deixe claro como criar uma conta no site, por exemplo, com um botão Login ou Fazer login no canto superior direito da página. Evite usar ícones ambíguos ou termos vagos ("Confira!", "Junte-se a nós") e não oculte o login em um menu de navegação. O especialista em usabilidade Steve Krug resumiu essa abordagem: Não me faça pensar. Se você precisar convencer outras pessoas da sua equipe da Web, use o analytics para mostrar o impacto das diferentes opções.

Vincule contas para usuários que se inscreveram por um provedor de identidade, como o Google, e que também se inscreveram 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 fizer a correspondência das 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 o usuário fizer login, deixe claro como acessar os detalhes da conta. Especificamente, deixe claro como alterar ou redefinir senhas.

Cortar a desorganização no formulário

No fluxo de inscrição, seu trabalho é minimizar a complexidade e manter o usuário focado. Organize a bagunça. Este não é o momento 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) apenas quando necessário e quando o usuário perceber um benefício claro ao fornecer esses dados. Tenha em mente que cada item de dados que você comunica e armazena gera custos e responsabilidade.

Não duplique suas informações apenas para garantir que os usuários tenham acesso aos detalhes de contato corretos. Isso atrasa 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 ao usuário depois que ele inserir os detalhes de contato e continue com a criação da conta quando responder. Este é um padrão comum de inscrição: os usuários estão acostumados a ele.

É recomendável 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 dela.

Assim como o login federado, tem a vantagem adicional de que você não precisa gerenciar senhas de usuário.

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 você o desconecte.

Considere se os usuários estão no dispositivo móvel ou computador e se eles estão compartilhando no computador ou em dispositivos.

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

Você pode ajudar gerenciadores de senhas de navegadores 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, em apps da Web e específicos da plataforma e em novos dispositivos.

Por isso, é extremamente importante codificar os formulários de inscrição corretamente, principalmente com os valores de preenchimento automático. Nos 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". Também é possível ajudar os gerenciadores de senhas usando diferentes valores 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 básica integrada do navegador. Saiba mais em Práticas recomendadas para formulários de pagamento e endereço.

Garantir que os usuários digitem senhas seguras

Permitir que os gerenciadores de senhas sugiram senhas é a melhor opção. Você precisa incentivar 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, é necessário implementar regras para o nível de seguranç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

Independentemente das regras escolhidas para senhas, nunca permita senhas que tenham sido expostas em violações de segurança.

Depois que um usuário insere uma senha, você precisa verificar se ela não é uma senha que já tenha sido comprometida. O site Have I Been Pwned oferece uma API para a verificação de senhas, mas você também pode executá-la 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 especificamente o motivo da rejeição. Mostre problemas inline e explique como corrigi-los assim que o usuário inserir um valor, não depois de enviar o formulário de inscrição e ter que aguardar uma resposta do seu servidor.

Não proibir a colagem de senhas

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 senhas que são memoráveis (e, portanto, podem ser mais fáceis de comprometer) e, de acordo com organizações como o Centro Nacional de Segurança Cibernética do Reino Unido, pode realmente reduzir a segurança. Os usuários só sabem que a ação de colar não é permitida depois de tentar colar a senha. Por isso, proibir a colagem de senhas não evita vulnerabilidades na á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 arbitrariamente.

Isso pode ser caro para os departamentos de TI, irritando os usuários e não tem muito impacto na segurança. Isso também pode incentivar as pessoas a usar senhas inseguras memoráveis ou manter um registro físico de senhas.

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

Você também precisa fornecer aos usuários acesso ao histórico de login da conta deles, mostrando a eles onde e quando o login aconteceu.

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

Você também deve simplificar a redefinição da senha, caso a esqueça. O Open Web Application Security Project fornece orientações detalhadas sobre como lidar com senhas perdidas.

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

Você também deve simplificar a exclusão da conta, se os usuários quiserem.

Oferecer login por provedores de identidade de terceiros

Muitos usuários preferem fazer login em sites com um endereço de e-mail e um formulário de inscrição de senha. No entanto, você também precisa 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 com o login federado, não é necessário solicitar, comunicar ou armazenar senhas.

Também é possível acessar outras informações verificadas do perfil no login federado, como um endereço de e-mail. Isso significa que o usuário não precisa inserir esses dados nem fazer a verificação por conta própria. O login federado também pode facilitar muito para os usuários quando eles adquirem um novo dispositivo.

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

Simplifique a troca de contas

Muitos usuários compartilham dispositivos e alternam entre contas usando o mesmo navegador. Quer os usuários acessem o login federado ou não, é necessário simplificar a troca de contas.

Considere oferecer a autenticação multifator

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

Ofereça (ou exija) a autenticação multifator se o site processar informações pessoais ou confidenciais.

Tenha 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 usando 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 de um nome de usuário.

Caso seu site exija nomes de usuário, não imponha regras abusivas e não impeça que os usuários atualizem os próprios nomes. No seu back-end, você precisa gerar um ID exclusivo para cada conta de usuário, não um identificador baseado em dados pessoais, como o nome de usuário.

Além disso, use autocomplete="username" para 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 de 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 uma variedade de dispositivos e navegadores.

Implemente 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 nos formulários de inscrição. A análise e o monitoramento de usuários reais (RUM, na sigla em inglês) fornecem dados sobre a experiência real dos usuários, como quanto tempo as páginas de inscrição levam para carregar, com quais componentes da interface os usuários interagem (ou não) e quanto tempo leva para concluir a inscrição.

• Análise da 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.
• Desempenho do site: as métricas centradas no usuário podem 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 preenchimento dos formulários de inscrição. Com o Analytics e o RUM, é possível otimizar e priorizar mudanças, além de monitorar o site em busca de problemas que não foram expostos pelos 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 a criação de formulários para dispositivos móveis
• Controles de formulário mais eficientes
• 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 tirada por @ecowarriorprincess no Unsplash.