Práticas recomendadas para formulários de login

Use os recursos do navegador em várias plataformas para criar formulários de login seguros, acessíveis e fáceis de usar.

Se os usuários precisarem fazer login no seu site, um bom design de formulário de login é fundamental. Isso vale principalmente para pessoas com conexões ruins, que usam dispositivos móveis, com pressa ou estresse. Formulários de login mal projetados recebem altas taxas de rejeição. Cada rejeição pode significar um usuário perdido e insatisfeito, e não apenas uma oportunidade de login perdida.

Veja um exemplo de um formulário de login simples que demonstra todas as práticas recomendadas:

Lista de verificação

• Use elementos HTML significativos: <form>, <input>, <label> e <button>.
• Rotule cada entrada com um <label>.
• Use atributos do elemento para acessar recursos integrados do navegador: type, name, autocomplete, required.
• Dê valores estáveis aos atributos name e id de entrada que não mudam entre os carregamentos de página ou as implantações de sites.
• Coloque o login no próprio elemento <form>.
• Garanta o envio do formulário.
• Use autocomplete="new-password" e id="new-password" para a entrada de senha em um formulário de inscrição e para a nova senha em um formulário de redefinição de senha.
• Use autocomplete="current-password" e id="current-password" para uma entrada de senha de login.
• oferecer a funcionalidade Mostrar senha;
• Use aria-label e aria-describedby para entradas de senha.
• Não duplique as entradas.
• Crie formulários para que o teclado móvel não oculte entradas ou botões.
• Verifique se os formulários podem ser usados em dispositivos móveis: use texto legível e se as entradas e os botões são grandes o suficiente para funcionar como áreas de toque.
• Mantenha o branding e o estilo nas suas páginas de inscrição e login.
• Teste no campo e também no laboratório: crie análises de página, de interação e de performance centrada no usuário no seu fluxo de inscrição e login.
• Testar em navegadores e dispositivos: o comportamento do formulário varia significativamente de acordo com as plataformas.

Use um HTML significativo

Use elementos criados para o job: <form>, <label> e <button>. Eles permitem a funcionalidade integrada do navegador, melhoram a acessibilidade e adicionam significado à marcação.

Usar <form>

Talvez você queira unir as entradas em um <div> e processar o envio dos dados de entrada usando apenas JavaScript. Geralmente, é melhor usar um elemento <form> simples. Isso torna seu site acessível a leitores de tela e outros dispositivos assistivos, ativa uma variedade de recursos integrados do navegador, facilita a criação de login funcional básico para navegadores mais antigos e ainda pode funcionar mesmo se o JavaScript falhar.

Usar <label>

Para rotular uma entrada, use uma <label>.

<label for="email">Email</label>
<input id="email" …>

Por dois motivos:

• Tocar ou clicar em um marcador move o foco para a entrada. Associe um rótulo a uma entrada usando o atributo for do rótulo com a name ou o id da entrada.
• Os leitores de tela anunciam o texto do rótulo quando ele ou a entrada dele recebe foco.

Não use marcadores de posição como rótulos de entrada. As pessoas costumam esquecer a finalidade da entrada quando começam a inserir o texto, especialmente se elas se distrairem ("Eu estava inserindo um endereço de e-mail, um número de telefone ou um ID de conta?"). Há muitos outros problemas em potencial com marcadores de posição. Consulte Não usar o atributo marcador e Marcadores de posição em campos de formulário são prejudicial, se você não se convencer.

Provavelmente é melhor colocar os rótulos acima das entradas. Isso permite um design consistente em dispositivos móveis e computadores e, de acordo com a pesquisa de IA do Google, permite uma verificação mais rápida pelos usuários. Você recebe rótulos e entradas com largura total, sem precisar ajustar o rótulo e a largura da entrada para que caibam no texto do rótulo.

Abra o Glitch de label-position em um dispositivo móvel para conferir por conta própria.

Usar <button>

Use <button> para botões. Os elementos do botão oferecem um comportamento acessível e a funcionalidade integrada de envio de formulários, e podem ser facilmente estilizados. Não faz sentido usar uma <div> ou algum outro elemento fingindo ser um botão.

Verifique se o botão "Enviar" informa o que ele faz. Por exemplo, Criar conta ou Fazer login, e não Enviar ou Iniciar.

Garanta o envio do formulário

Ajudar os gerenciadores de senhas a entender que um formulário foi enviado. Há duas maneiras de fazer isso:

• Navegue para outra página.
• Emule a navegação com History.pushState() ou History.replaceState() e remova o formulário de senha.

Com uma solicitação XMLHttpRequest ou fetch, verifique se o sucesso do login é relatado na resposta e processado removendo o formulário do DOM, além de indicar o sucesso para o usuário.

Considere desativar o botão Fazer login depois que o usuário tocar ou clicar nele. Muitos usuários clicam em botões várias vezes, mesmo em sites rápidos e responsivos. Isso atrasa as interações e aumenta a carga do servidor.

Da mesma forma, não desative o envio de formulários aguardando entrada do usuário. Por exemplo, não desative o botão Fazer login se os usuários não tiverem inserido o PIN de cliente. Pode ser que os usuários percam algo no formulário, depois tentarão tocar repetidamente no botão Fazer login (desativado) e achar que ele não está funcionando. No mínimo, se você precisar desativar o envio do formulário, explique ao usuário o que está faltando quando ele clicar no botão desativado.

Não duplique as entradas

Alguns sites forçam os usuários a inserir e-mails ou senhas duas vezes. Isso pode reduzir os erros para alguns usuários, mas causa trabalho extra para todos os usuários e aumenta as taxas de abandono. Pedir duas vezes também não faz sentido quando os navegadores preenchem automaticamente endereços de e-mail ou sugerem senhas fortes. É melhor permitir que os usuários confirmem o endereço de e-mail e facilitar a redefinição da senha, se necessário, e você precisará fazer isso de qualquer maneira.

Aproveite ao máximo os atributos do elemento

É aqui que a mágica acontece! Os navegadores têm vários recursos integrados úteis que usam atributos do elemento de entrada.

Mantenha as senhas particulares, mas permita que os usuários as vejam se quiserem

As entradas de senhas precisam ter type="password" para ocultar o texto da senha e ajudar o navegador a entender que a entrada é para senhas. Os navegadores usam várias técnicas para entender os papéis de entrada e decidir se querem ou não oferecer o salvamento de senhas.

Adicione um botão de ativação Mostrar senha para permitir que os usuários verifiquem o texto que digitaram. Além disso, não se esqueça de adicionar um link Esqueci a senha. Consulte Ativar exibição de senhas.

Ofereça o teclado certo aos usuários de dispositivos móveis

Use <input type="email"> para oferecer aos usuários de dispositivos móveis um teclado adequado e ativar a validação básica de endereço de e-mail integrada pelo navegador. Não é necessário usar o JavaScript.

Se você precisar usar um número de telefone em vez de um endereço de e-mail, o <input type="tel"> ativa um teclado telefônico no dispositivo móvel. Também é possível usar o atributo inputmode quando necessário: inputmode="numeric" é ideal para números PIN. O artigo Tudo o que você sempre quis saber sobre o modo de entrada tem mais detalhes.

Impedir que o teclado do dispositivo móvel obstrua o botão Fazer login

Infelizmente, se você não tiver cuidado, os teclados de dispositivos móveis podem cobrir o formulário ou, pior, podem obstruir parcialmente o botão Fazer login. Os usuários podem desistir antes de perceber o que aconteceu.

Sempre que possível, evite isso mostrando apenas as entradas de e-mail/telefone e senha e o botão Fazer login na parte superior da página de login. Coloque outro conteúdo abaixo.

Testar em vários dispositivos

É necessário testar o público-alvo em vários dispositivos em vários dispositivos e fazer os ajustes necessários. O BrowserStack permite testes sem custo financeiro para projetos de código aberto em uma variedade de dispositivos e navegadores reais.

Use duas páginas

Alguns sites (incluindo Amazon e eBay) evitam o problema solicitando e-mail/telefone e senha em duas páginas. Essa abordagem também simplifica a experiência: o usuário só tem a tarefa de uma coisa por vez.

O ideal é implementar isso com um único <form>. Use o JavaScript para exibir inicialmente apenas a entrada de e-mail, depois ocultá-la e mostrar a entrada de senha. Se for necessário forçar o usuário a navegar para uma nova página após digitar o e-mail e a senha, o formulário na segunda página precisará ter um elemento de entrada oculto com o valor de e-mail. Isso permite que os gerenciadores de senhas armazenem o valor correto. A seção Estilos de formulário de senha que o Chromium entende fornece um exemplo de código.

Ajudar os usuários a evitar a reinserção de dados

Você pode ajudar os navegadores a armazenar dados corretamente e preencher automaticamente as entradas para que os usuários não precisem se lembrar de inserir valores de e-mail e senha. Isso é particularmente importante em dispositivos móveis e crucial para entradas de e-mail, que geram altas taxas de abandono.

Há duas partes:

1. Os atributos autocomplete, name, id e type ajudam os navegadores a entender o papel das entradas para armazenar dados que podem ser usados mais tarde para o preenchimento automático. Para permitir que os dados sejam armazenados para preenchimento automático, os navegadores modernos também exigem que as entradas tenham um valor name ou id estável (não gerado aleatoriamente em cada carregamento de página ou implantação do site) e estejam em um <form> com um botão submit.

2. O atributo autocomplete ajuda os navegadores a preencher automaticamente as entradas usando dados armazenados.

Para entradas de e-mail, use autocomplete="username", já que username é reconhecido por gerenciadores de senhas em navegadores modernos, mesmo que seja necessário usar type="email" e id="email" e name="email".

Para entradas de senha, use os valores apropriados de autocomplete e id para ajudar os navegadores a diferenciar entre senhas novas e atuais.

Use autocomplete="new-password" e id="new-password" para uma nova senha

• Use autocomplete="new-password" e id="new-password" para a entrada de senha em um formulário de inscrição ou a nova senha em um formulário de mudança de senha.

Use autocomplete="current-password" e id="current-password" para uma senha já existente

• Use autocomplete="current-password" e id="current-password" para a entrada de senha em um formulário de login ou a entrada para a senha antiga do usuário em um formulário de mudança de senha. Isso informa ao navegador que você quer que ele use a senha atual armazenada para o site.

Para um formulário de inscrição:

<input type="password" autocomplete="new-password" id="new-password" …>

Para fazer login:

<input type="password" autocomplete="current-password" id="current-password" …>

Suporte a gerenciadores de senhas

Navegadores diferentes processam o preenchimento automático de e-mail e a sugestão de senha de maneira diferente, mas os efeitos são praticamente os mesmos. No Safari 11 e versões mais recentes para computador, por exemplo, o gerenciador de senhas é mostrado e, em seguida, a autenticação biométrica (impressão digital ou reconhecimento facial) é usada, se disponível.

O Chrome na área de trabalho mostra sugestões de e-mail, mostra o gerenciador de senhas e a preenche automaticamente.

Os sistemas de preenchimento automático e senha do navegador não são simples. Os algoritmos para adivinhar, armazenar e exibir valores não são padronizados e variam de plataforma para plataforma. Por exemplo, conforme apontado por Hidde de Vries: "O gerenciador de senhas do Firefox complementa a heurística com um sistema de receita".

Preenchimento automático: o que os desenvolvedores da Web precisam saber, mas não tem muito mais informações sobre o uso de name e autocomplete. A especificação HTML (link em inglês) lista todos os 59 valores possíveis.

Permitir que o navegador sugira uma senha forte

Os navegadores modernos usam heurísticas para decidir quando mostrar a interface do gerenciador de senhas e sugerir uma senha forte.

Confira como o Safari faz isso no computador.

A sugestão de senha exclusiva forte está disponível no Safari desde a versão 12.0.

Com os geradores de senha do navegador integrados, os usuários e desenvolvedores não precisam descobrir o que é uma "senha forte". Como os navegadores podem armazenar senhas com segurança e preenchê-las automaticamente conforme necessário, os usuários não precisam se lembrar ou digitar senhas. Incentivar os usuários a aproveitar os geradores de senha integrados ao navegador também significa que eles estão mais propensos a usar uma senha única e forte no site e menos propensos a reutilizar uma senha que possa ser comprometida em outro lugar.

Ajudar a evitar que os usuários percam entradas acidentalmente

Adicione o atributo required aos campos de e-mail e de senha. Os navegadores modernos solicitam e definem automaticamente o foco para os dados ausentes. O JavaScript não é necessário.

Design para dedos e polegares

O tamanho padrão do navegador para praticamente tudo relacionado a elementos e botões de entrada é muito pequeno, especialmente em dispositivos móveis. Isso pode parecer óbvio, mas é um problema comum com formulários de login em muitos sites.

Verifique se as entradas e os botões são grandes o suficiente

O tamanho e o padding padrão de entradas e botões são muito pequenos no computador e pior demais em dispositivos móveis.

De acordo com as orientações de acessibilidade do Android, o tamanho recomendado para objetos de tela touchscreen é de 7 a 10 mm. As diretrizes de interface da Apple sugerem 48 x 48 px, e o W3C sugere pelo menos 44 x 44 pixels CSS. Nessa base, adicione (pelo menos) cerca de 15 px de padding aos elementos e botões de entrada para dispositivos móveis e cerca de 10 px em computadores. Faça isso com um dispositivo móvel real e com um dedo ou polegar real. Você deve ser capaz de tocar em cada uma das entradas e botões.

A auditoria do Lighthouse não tem o tamanho adequado pode ajudar a automatizar o processo de detecção de elementos de entrada muito pequenos.

Design para os polegares

Pesquise por área de toque para ver várias fotos de dedos indicadores. No entanto, no mundo real, muitas pessoas usam os polegares para interagir com smartphones. Os polegares são maiores que os dedos indicador, e o controle é menos preciso. Esse é mais um motivo para áreas de toque com tamanho adequado.

Deixar o texto grande o suficiente

Assim como no tamanho e no preenchimento, o tamanho padrão da fonte do navegador para elementos e botões de entrada é muito pequeno, especialmente em dispositivos móveis.

Os navegadores em diferentes plataformas dimensionam as fontes de maneiras diferentes. Por isso, é difícil especificar um tamanho de fonte específico que funcione bem em qualquer lugar. Uma pesquisa rápida dos sites conhecidos mostra tamanhos de 13 a 16 pixels no computador: corresponder a esse tamanho físico é uma boa quantidade mínima para texto em dispositivos móveis.

Isso significa que você precisa usar um tamanho de pixel maior em dispositivos móveis: o 16px no Chrome para computador é bastante legível, mas, mesmo com uma boa visão, é difícil ler o texto de 16px no Chrome para Android. É possível definir diferentes tamanhos de pixel de fonte para diferentes tamanhos de janela de visualização usando consultas de mídia. O 20px funciona bem em dispositivos móveis, mas você precisa testar esse recurso com amigos ou colegas que têm baixa visão.

A auditoria do Lighthouse O documento não usa tamanhos de fonte legíveis pode ajudar a automatizar o processo de detecção de texto muito pequeno.

Forneça espaço suficiente entre as entradas

Adicione margem suficiente para que as entradas funcionem bem como áreas de toque. Em outras palavras, procure uma margem de cerca de um dedo.

Verifique se as entradas estão claramente visíveis

O estilo de borda padrão para entradas dificulta a visualização delas. Eles são quase invisíveis em algumas plataformas como o Chrome para Android.

Além do padding, adicione uma borda: em um fundo branco, uma boa regra geral é usar #ccc ou uma borda mais escura.

Usar recursos integrados do navegador para avisar sobre valores de entrada inválidos

Os navegadores têm recursos integrados para fazer a validação básica de formulários para entradas com um atributo type. Os navegadores avisam quando você envia um formulário com um valor inválido e definem o foco na entrada problemática.

Você pode usar o seletor de CSS :invalid para destacar dados inválidos. Use :not(:placeholder-shown) para evitar selecionar entradas sem conteúdo.

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

Teste maneiras diferentes de destacar entradas com valores inválidos.

Use JavaScript quando necessário

Alternar exibição de senha

Adicione um botão de ativação Mostrar senha para permitir que os usuários verifiquem o texto que digitaram. A usabilidade sofre quando os usuários não conseguem ver o texto que inseriram. No momento, não há uma maneira integrada de fazer isso, embora existam planos para implementação. Em vez disso, será necessário usar JavaScript.

O código a seguir usa um botão de texto para adicionar a funcionalidade Mostrar senha.

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

Este é o CSS para deixar o botão parecido com texto simples:

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

E o JavaScript para mostrar a senha:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

Aqui está o resultado final:

Tornar as entradas de senha acessíveis

Use aria-describedby para delinear as regras de senha fornecendo a ele o ID do elemento que descreve as restrições. Os leitores de tela fornecem o texto do rótulo, o tipo de entrada (senha) e a descrição.

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

Ao adicionar a funcionalidade Mostrar senha, inclua um aria-label para avisar que a senha vai ser mostrada. Caso contrário, os usuários poderão revelar as senhas acidentalmente.

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

Veja os dois recursos ARIA em ação no seguinte Glitch:

O artigo Como criar formulários acessíveis tem mais dicas para tornar os formulários acessíveis.

Validar em tempo real e antes do envio

Os elementos e atributos de formulário HTML têm recursos integrados para validação básica. No entanto, você também precisa usar JavaScript para fazer uma validação mais robusta enquanto os usuários inserem dados e tentam enviar o formulário.

A Etapa 5 do codelab de formulário de login usa a API Constraint Validation, que é amplamente compatível para adicionar a validação personalizada usando a IU do navegador integrada para definir o foco e exibir solicitações.

Saiba mais: Usar JavaScript para validação em tempo real mais complexa.

Analytics e RUM

A frase "O que você não pode medir, não pode melhorar" é particularmente verdadeira para os formulários de inscrição e login. Você precisa definir metas, avaliar o sucesso, melhorar seu site e repetir.

Os testes de usabilidade com desconto podem ser úteis para testar mudanças, mas você precisará de dados reais para entender de fato a experiência dos usuários com os formulários de inscrição e login:

• Análise da página: visualizações de página de inscrição e login, taxas de rejeição e saídas.
• Análise de interação: funis de meta (onde os usuários abandonam seu fluxo de login ou login?) e eventos (quais ações os usuários realizam ao interagir com seus formulários?)
• Desempenho do site: métricas centradas no usuário: os formulários de inscrição e login estão lentos por algum motivo? Em caso afirmativo, qual é a causa?

Considere também implementar o teste A/B para testar abordagens diferentes de inscrição e login, além de lançamentos graduais para validar as mudanças em um subconjunto de usuários antes de liberar as mudanças para todos.

Diretrizes gerais

Uma interface e uma UX bem projetadas podem reduzir o abandono do formulário de login:

• Não faça os usuários procurarem por login. Coloque um link para o formulário de login na parte de cima da página usando frases bem conhecidas, como Fazer login, Criar conta ou Registrar.
• Mantenha o foco! Os formulários de inscrição não podem distrair as pessoas com ofertas e outros recursos do site.
• Minimize a complexidade da inscrição. Colete outros dados do usuário, como endereços ou detalhes de cartão de crédito, somente quando houver um benefício claro ao fornecer esses dados.
• Antes que os usuários comecem a preencher o formulário de inscrição, deixe claro qual é a proposta de valor. Quais são os benefícios do login? Dê aos usuários incentivos concretos para concluir a inscrição.
• Se possível, permita que os usuários se identifiquem com um número de celular em vez de um endereço de e-mail, já que alguns usuários podem não usar e-mail.
• Facilite a redefinição da senha para os usuários e deixe o link Esqueceu sua senha? evidente.
• Crie um link para os documentos dos Termos de Serviço e da Política de Privacidade: deixe claro para os usuários desde o início como você protege os dados deles.
• Inclua o logotipo e o nome da sua empresa ou organização nas páginas de inscrição e login e verifique se o idioma, as fontes e os estilos combinam com o restante do site. Alguns formulários não parecem pertencer ao mesmo site que outros conteúdos, especialmente se eles tiverem um URL significativamente diferente.

Continue aprendendo

• 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
• Simplificação do fluxo de login usando a API Credential Management
• Verificar números de telefone na Web com a API WebOTP

Foto de Meghan Schiereck no Unsplash.