Um visitante chega ao teu site e clica em "Iniciar sessão". Espera uma experiência de login fluida. Em vez disso, encontra um formulário que o frustra. Os requisitos da palavra-passe só aparecem depois de enviar. O campo da palavra-passe é pequeno e difícil de escrever. Não há opção "Mostrar palavra-passe", por isso não consegue verificar o que escreveu. Erra a palavra-passe. Clica em "Esqueci-me da palavra-passe" e cai num fluxo de recuperação confuso. Uns minutos depois, desiste e nunca mais volta.
Os formulários de login e de recuperação de palavra-passe são pontos de contacto críticos. Estes formulários estão entre um visitante que regressa e a sua conta. Se a experiência for má, não se limitam a sair. Assumem que o teu site não é de confiança. Este capítulo explica como criar formulários de login e de recuperação de palavra-passe que sejam seguros, intuitivos e respeitem o tempo do utilizador.
De que campos precisa um formulário de login?
Um formulário de login precisa exatamente de três coisas. Primeiro, uma forma de identificar quem é a pessoa. Segundo, uma forma de verificar a identidade. Terceiro, uma forma de manter a sessão iniciada. Isso significa três campos, no mínimo.
O campo de email
Usa o email, não o nome de utilizador. O email é mais simples. Os utilizadores esquecem-se dos nomes de utilizador. Não se esquecem do endereço de email. Faz este campo aceitar um endereço de email e etiqueta-o claramente como "Endereço de email". Usa o HTML `type="email"` para os teclados do telemóvel mostrarem o símbolo @ e a validação do email acontecer automaticamente. No atributo HTML, acrescenta `autocomplete="username"` para os navegadores e gestores de palavras-passe saberem que é aqui que vai o identificador de login e poderem preenchê-lo automaticamente para utilizadores com credenciais guardadas.
O campo da palavra-passe
Usa `type="password"` para o texto ficar escondido. Acrescenta `id="current-password"` e `autocomplete="current-password"` para os gestores de palavras-passe identificarem este campo e preencherem as palavras-passe guardadas. Permite colar. Os especialistas em segurança concordam que desativar a colagem nos campos de palavra-passe não impede ataques. Só frustra quem usa gestores de palavras-passe.
Faz o campo da palavra-passe ter, visualmente, pelo menos 10 caracteres de largura. Um campo pequeno parece apertado. Os utilizadores duvidam se a palavra-passe longa vai caber. Um campo mais largo dá confiança e reduz os erros de envio.
Botão de mostrar palavra-passe
Inclui um botão de "Mostrar palavra-passe" ou "Revelar palavra-passe" (normalmente um ícone de olho ou uma caixa de seleção). Quando ativado, o campo da palavra-passe passa a `type="text"` para os utilizadores verem o que escreveram. Isto não é um risco de segurança. É uma funcionalidade de usabilidade que reduz erros de envio e frustração. Os utilizadores escrevem as palavras-passe com cuidado e querem verificá-las antes de enviar.
Caixa "Memorizar-me" (opcional mas recomendada)
Uma caixa "Memorizar-me neste dispositivo" ou "Manter sessão iniciada" é opcional, mas melhora a experiência. Quando assinalada, a sessão dura mais tempo ou o navegador guarda um token de login persistente (de forma segura). Isto significa que os utilizadores não têm de fazer login de cada vez que visitam. Em contas de baixo risco, é seguro. Em contas de alta segurança (financeiras, de saúde, painéis de administração), dispensa isto ou exige nova autenticação nas ações sensíveis.
Se incluíres uma caixa de memorizar, sê explícito sobre o que faz. "Memorizar-me durante 30 dias" é mais claro do que apenas "Memorizar-me".
Ligação "Esqueci-me da palavra-passe"
Coloca uma ligação "Esqueceste a palavra-passe?" mesmo por baixo do campo da palavra-passe ou à direita dele. Não é opcional. Os utilizadores esquecem-se das palavras-passe. Oferece um caminho óbvio para a repor. Se não encontram a ligação, saem do site e podem nunca mais voltar.
Como deve funcionar um formulário de recuperação de palavra-passe?
Um fluxo de recuperação de palavra-passe tem vários passos. Cada passo importa. Cada passo é um sítio onde os utilizadores se podem confundir e abandonar.
Passo um: pedir a verificação por email
O fluxo de recuperação começa quando o utilizador clica em "Esqueci-me da palavra-passe" no formulário de login. Chega a uma página que diz algo como "Introduz o teu endereço de email para repor a palavra-passe." Aparece um único campo de email. E mais nada. Sem campos extra. Sem pedir nome de utilizador nem perguntas de segurança. Só o email.
O botão deve dizer algo claro e orientado para a ação. "Enviar ligação de recuperação" ou "Receber instruções de recuperação" diz-lhes o que acontece a seguir. "Enviar" é vago.
Passo dois: enviar a ligação de recuperação por email
Quando enviam o email, o sistema envia-lhes de imediato um email de recuperação de palavra-passe. O email deve chegar em segundos, não em minutos. A rapidez importa. Se o email demora 10 minutos, os utilizadores assumem que não funcionou e tentam de novo ou, pior, saem.
O email de recuperação contém uma ligação única (ou um código que introduzem na página seguinte). Essa ligação deve expirar passado um tempo definido, normalmente 24 horas. Uma ligação que nunca expira é um risco de segurança se alguém ganhar acesso ao email.
Passo três: verificar a ligação e mostrar o formulário de recuperação de palavra-passe
Quando clicam na ligação de recuperação do email, chegam ao formulário de recuperação de palavra-passe. Esta página deve confirmar claramente o que está a acontecer: "Repõe a tua palavra-passe" ou "Cria uma nova palavra-passe". Sem confusão sobre se estão no sítio certo.
Mostra o endereço de email cuja palavra-passe estão a repor. "Estás a repor a palavra-passe de example@email.com." Isto tranquiliza-os de que estão a repor a conta certa.
Passo quatro: definir claramente os requisitos da palavra-passe antes de enviarem
Mostra os requisitos da palavra-passe no formulário de recuperação ANTES de tentarem enviar. Não os faças adivinhar. "A tua palavra-passe tem de ter pelo menos 12 caracteres, incluir uma letra maiúscula, um número e um caráter especial." Sê específico. Mostra exemplos do que é válido.
Um indicador de força da palavra-passe (uma barra que mostra fraca, média, forte) ajuda os utilizadores a perceber se a palavra-passe cumpre os requisitos sem enviar e receber um erro. Alguns utilizadores acham isto útil. Outros acham frustrante se os requisitos não forem claros. Se usas um medidor de força, junta-lhe requisitos explícitos em texto.
Passo cinco: campo da palavra-passe e confirmação
Pede uma nova palavra-passe. Depois pede que a confirmem escrevendo-a de novo. Este passo de confirmação apanha erros de escrita. A desvantagem é que um campo de confirmação acrescenta atrito. A investigação mostra que remover o campo de confirmação da palavra-passe aumenta as taxas de conclusão. Se o mantiveres, faz com que os dois campos tenham um botão de "Revelar palavra-passe", para verificarem que as duas entradas coincidem antes de enviar.
Passo seis: confirmação imediata e próximos passos
Quando repõem a palavra-passe com sucesso, mostra uma mensagem de sucesso. "A tua palavra-passe foi reposta. Já podes iniciar sessão com a nova palavra-passe." Depois oferece uma ligação de volta ao formulário de login ou um botão que diz "Ir para o login" para não terem de navegar nem procurar.
Envia-lhes também um email de confirmação. "A tua palavra-passe foi reposta recentemente. Se não foste tu, clica aqui para proteger a tua conta." Isto avisa-os se outra pessoa repôs a palavra-passe e dá-lhes uma forma de desfazer.
Onde ficam os formulários de login no teu site?
Os formulários de login não são decorativos. Têm de se encontrar sem procurar.
Cabeçalho ou navegação
O sítio mais visível é o cabeçalho. Uma ligação (ou botão) "Iniciar sessão" ou "Entrar" no canto superior direito do site é onde os utilizadores a esperam. Quando clicam, leva-os a uma página de login dedicada ou abre uma janela modal com o formulário de login. Os utilizadores de telemóvel esperam a opção de entrar no menu hambúrguer. Nunca a escondas atrás de camadas de navegação.
Página de login dedicada
Cria uma página dedicada `/login` ou `/sign-in`. Esta página contém o formulário de login e mais nada. Sem artigos do blogue. Sem texto de marketing. Só o formulário e o texto de ajuda necessário. Uma página limpa e focada converte melhor do que incorporar o formulário de login numa página geral.
Página de recuperação de palavra-passe
O formulário de recuperação de palavra-passe deve estar num URL dedicado como `/reset-password` ou `/forgot-password`. Esta página só deve ser acessível a partir do formulário de login ou de uma ligação no email de recuperação. Não deve ser indexada pelos motores de busca. Acrescenta `noindex` a esta página no HTML ou no robots.txt para a Google não tentar posicioná-la.
Erros comuns no desenho de formulários de login
Mesmo os formulários de login bem-intencionados têm muitas vezes problemas que prejudicam a experiência do utilizador.
Demasiados campos antes do login
Alguns sites pedem nome de utilizador, email, telefone e resposta de segurança no próprio formulário de login. Não faças isto. O login não é um registo. Pede só email e palavra-passe. Tudo o resto é atrito extra.
Requisitos da palavra-passe escondidos ou pouco claros
Se os requisitos da palavra-passe estão escondidos até enviarem, os utilizadores ficam frustrados. Introduzem uma palavra-passe. Clicam em enviar. Aparece um erro: "A palavra-passe deve ter 12 caracteres e incluir um número." Agora têm de tentar de novo. Mostra os requisitos logo à partida.
Sem opção de mostrar a palavra-passe
Os utilizadores não conseguem ver o que escreveram. Enviam. Erram. Tentam de novo. Erram outra vez. Um botão simples poupa esta frustração.
Mensagens de erro confusas
Nunca digas aos utilizadores "Login inválido". Isto não ajuda. Estão a usar o email errado? A palavra-passe errada? A conta não está ativada? Sê específico. "Não existe nenhuma conta para este endereço de email" ou "A palavra-passe está incorreta" diz-lhes o que corrigir. Ou, se queres ser vago por razões de segurança, dá-lhes um caminho de recuperação. "O email e a palavra-passe não coincidem. Tenta de novo ou repõe a tua palavra-passe."
A ligação de recuperação expira depressa demais
Uma ligação de recuperação que expira em 15 minutos frustra os utilizadores. Vão ver o email depois do trabalho. A ligação já morreu. Têm de recomeçar. Dá-lhes pelo menos 24 horas.
O fluxo de recuperação leva a uma página confusa
Alguns fluxos de recuperação levam os utilizadores a uma página que não diz claramente o que fazer. Clicam na ligação de recuperação. Chegam a uma página com texto pouco claro e sem formulário. Pensam que algo correu mal. Torna-o óbvio. "Repõe a tua palavra-passe de example@email.com" com um campo de palavra-passe e um botão de enviar.
Considerações de segurança para o login e a recuperação de palavra-passe
Um formulário de login é uma parte do teu site crítica para a segurança. Protege-o como deve ser.
Usa HTTPS em todo o tráfego de login
A tua página de login tem de ser servida por HTTPS, não HTTP. O HTTPS encripta os dados em trânsito para os piratas não conseguirem ler o email e a palavra-passe enquanto viajam até ao teu servidor. Isto não é negociável. Se o teu site não tem um certificado SSL, arranja um. A maioria dos fornecedores de alojamento oferece hoje certificados SSL grátis.
Valida a força da palavra-passe no servidor
A validação no navegador ajuda os utilizadores, mas não dependas só dela. A validação em JavaScript pode ser contornada. Valida a palavra-passe no teu servidor. Verifica se cumpre os teus requisitos. Aceita apenas palavras-passe que cumpram os teus padrões de força.
Aplica hash e salt às palavras-passe na base de dados
Nunca guardes palavras-passe em texto simples. Usa um algoritmo de hash seguro (como bcrypt ou Argon2) com salt. Mesmo que alguém invada a tua base de dados, não consegue ler as palavras-passe. Uma palavra-passe com hash correto não pode ser revertida para a palavra-passe original.
Limita a taxa de tentativas de login
Se alguém tenta fazer login 10 vezes num minuto, bloqueia. A limitação de taxa evita ataques de força bruta, em que os piratas tentam milhares de combinações de palavras-passe. Depois de algumas tentativas falhadas, faz uma pausa de 15 minutos antes de permitir mais tentativas.
Faz os tokens de recuperação expirarem depressa
Um token de recuperação de palavra-passe que funciona durante 24 horas é o padrão. Tokens que funcionam durante 7 dias ou mais aumentam o risco de uma conta de email comprometida levar a uma conta do site comprometida. Mantém os tokens de curta duração.
Regista a atividade de login para deteção de fraude
Guarda um registo das tentativas de login bem-sucedidas e falhadas. Se alguém entra a partir de um país novo ou a uma hora invulgar, assinala. Alguns sistemas enviam um email quando uma conta é acedida a partir de um dispositivo novo. Isto avisa o dono da conta se outra pessoa lhe acedeu.
Formulários de login no telemóvel: o que muda?
O telemóvel muda a forma como os formulários de login têm de funcionar.
Alvos de toque e tamanho dos botões
No telemóvel, os dedos não são tão precisos como os cursores. Os botões e os campos precisam de ser maiores. O botão de enviar deve ter pelo menos 44 píxeis de altura. Os campos devem ser altos o suficiente para escrever com conforto. Aponta para 44 a 48 píxeis de altura.
Teclados do telemóvel e tipos de campo
Usa `type="email"` no campo de email. Isto diz aos dispositivos móveis para mostrarem o teclado de email com os símbolos @ e . Sem isto, os utilizadores têm de mudar o modo do teclado. Usa `type="password"` no campo da palavra-passe para o teclado corresponder. Este pequeno detalhe poupa toques e frustração.
Preenchimento automático e gestores de palavras-passe
Os navegadores de telemóvel e as apps de gestão de palavras-passe podem preencher automaticamente as credenciais de login. Garante que os teus atributos HTML o suportam. Inclui `autocomplete="username"` no campo de email e `autocomplete="current-password"` no campo da palavra-passe. É uma enorme comodidade no telemóvel, onde escrever é mais lento.
Layout do formulário em ecrãs pequenos
Empilha os campos na vertical. Não ponhas email e palavra-passe lado a lado no ecrã de um telemóvel. Um campo por linha. O formulário deve usar a largura toda, com margens adequadas. Um formulário que parece apertado no telemóvel não é completado.
Evita a sobreposição do teclado do telemóvel
Quando o teclado do telemóvel aparece, tapa metade do ecrã. Garante que o botão de login está visível acima do teclado, ou oferece uma forma de fechar o teclado com facilidade. Alguns sites só mostram o botão depois de o teclado fechar. Isso frustra os utilizadores. Mantém o botão visível.
Perguntas frequentes
Quantos requisitos de palavra-passe devo pedir?
Devo mostrar um indicador de força da palavra-passe?
E se alguém se esquecer da palavra-passe E do endereço de email?
Preciso de autenticação de dois fatores no formulário de login?
Com que frequência alguém deve ter de repor a palavra-passe?
É melhor pedir nome de utilizador ou endereço de email?
Como a WEMASY ajuda com formulários de login e recuperação de palavra-passe
O criador de formulários da WEMASY suporta fluxos seguros de login e de recuperação de palavra-passe. Cria um formulário de login com campos de email e palavra-passe. Acrescenta um botão de mostrar palavra-passe com um clique. Define os requisitos da palavra-passe (tamanho, maiúsculas, números, carateres especiais). Usa lógica condicional para mostrar uma caixa de memorizar ou dispensá-la consoante as tuas necessidades de segurança. Liga ao sistema de autenticação da WEMASY ou integra com fornecedores de autenticação externos via API. A WEMASY trata automaticamente do hash das palavras-passe, da limitação de taxa e da gestão de sessões. Os emails de recuperação de palavra-passe são enviados em segurança a partir do teu domínio. Os tokens de recuperação expiram ao fim de 24 horas. Vê o que está incluído nos planos WEMASY.