Práticas recomendadas do formulário de login

Use recursos de navegador de plataforma cruzada para criar formulários de login que sejam seguros, acessíveis e fáceis de usar.

Jun 29, 2020 — Atualizado Sep 27, 2021

Available in: English, Español, Русский, 中文, and 日本語

Appears in: Identity

Sam Dutton

TwitterGitHub

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

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

Lista de controle #

• Use elementos HTML significativos: <form>, <input>, <label> e <button>.
• Rotule cada entrada com um <label>.
• Use atributos de elemento para acessar os recursos integrados do navegador : type, name, autocomplete, required.
• Dê ao name entrada e aos id valores estáveis que não mudam entre carregamentos de página ou implantações de site.
• Coloque o login em seu próprio elemento <form>.
• Garanta o envio bem-sucedido 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 inserir a senha de login.
• Fornece a funcionalidade Mostrar senha.
• Use aria-label e aria-describedby para entradas de senha.
• Não duplique as entradas.
• Projete formulários para que o teclado móvel não oculte entradas ou botões.
• Certifique-se de que os formulários possam ser usados no celular: use texto legível e certifique-se de que as entradas e os botões sejam grandes o suficiente para funcionar como alvos de toque.
• Mantenha a marca e o estilo em suas páginas de inscrição e login.
• Teste em campo e também no laboratório: crie análises de página, análises de interação e medição de desempenho centrada no usuário em seu fluxo de inscrição e inscrição.
• Teste em navegadores e dispositivos: o comportamento do formulário varia significativamente entre as plataformas.

Use HTML significativo #

Use elementos construídos para o trabalho: <form>, <label> e <button>. Isso habilita a funcionalidade do navegador embutido, melhora a acessibilidade e adiciona significado à sua marcação.

Use <form> #

Você pode ficar tentado a envolver as entradas em um <div> e lidar com o envio de dados de entrada puramente com JavaScript. Geralmente é melhor usar um elemento <form>. Isso torna seu site acessível para leitores de tela e outros dispositivos de assistência, permite uma variedade de recursos integrados do navegador, torna mais simples construir login funcional básico para navegadores mais antigos e ainda pode funcionar mesmo se o JavaScript falhar.

Use <label> #

Para rotular uma entrada, use um <label>!

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

Duas razões:

• Um toque ou clique em um rótulo move o foco para sua entrada. Associe um rótulo a uma entrada usando o for com o name ou id da entrada.
• Os leitores de tela anunciam o texto do rótulo quando o rótulo ou a entrada do rótulo obtém o foco.

Não use marcadores de posição como rótulos de entrada. As pessoas podem esquecer para que serve a entrada depois de começarem a digitar o texto, especialmente se ficarem distraídas ("Eu estava digitando um endereço de e-mail, um número de telefone ou um ID de conta?"). Existem muitos outros problemas potenciais com espaços reservados: consulte Não use o atributo Placeholder e Placeholders em campos de formulário são prejudiciais, se você não estiver convencido.

Provavelmente, é melhor colocar seus rótulos acima de suas entradas. Isso permite um design consistente em dispositivos móveis e desktops e, de acordo com a pesquisa de IA do Google, permite uma digitalização mais rápida pelos usuários. Você obtém rótulos e entradas de largura total e não precisa ajustar o rótulo e a largura de entrada para caber no texto do rótulo.

Abra o Glitch de posição de rótulo em um dispositivo móvel para ver por si mesmo.

Use <button> #

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

Certifique-se de que o botão enviar diz o que faz. Os exemplos incluem Criar conta ou Entrar, não Enviar ou Iniciar.

Garanta o envio bem-sucedido do formulário #

Ajude os gerentes de senha a entender que um formulário foi enviado. Existem duas maneiras de fazer isso:

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

Com um XMLHttpRequest ou fetch, certifique-se de que o sucesso do login seja relatado na resposta e tratado retirando o formulário do DOM e também indicando o sucesso para o usuário.

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

Por outro lado, não desative o envio de formulário que aguarda a entrada do usuário. Por exemplo, não desative o botão Sign in se os usuários não tiverem inserido o PIN do cliente. Os usuários podem perder algo no formulário e, em seguida, tentar tocar repetidamente no botão Sign in (desabilitado) e pensar que não está funcionando. No mínimo, se você deve desabilitar o envio de formulário, explique ao usuário o que está faltando quando ele clicar no botão desabilitado.

Não duplique as entradas #

Alguns sites forçam os usuários a inserir e-mails ou senhas duas vezes. Isso pode reduzir erros para alguns usuários, mas causa trabalho extra para todos os usuários e aumenta as taxas de abandono. Perguntar 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 seus endereços de e-mail (você precisará fazer isso de qualquer maneira) e facilitar a redefinição de suas senhas, se necessário.

Aproveite ao máximo os atributos do elemento #

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

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

As entradas de senhas devem ter type="password" para ocultar o texto da senha e ajudar o navegador a entender que a entrada é para senhas. Observe que os navegadores usam uma variedade de técnicas para entender as funções de entrada e decidir se devem ou não se oferecer para salvar as senhas.

Você deve adicionar um ícone ou botão Mostrar senha para permitir que os usuários verifiquem o texto que inseriram - e não se esqueça de adicionar um link Esqueci a senha. Consulte Habilitar exibição de senha.

Dê aos usuários de celular o teclado certo #

Use <input type="email"> para dar aos usuários móveis um teclado apropriado e habilitar a validação de endereço de e-mail embutida básica pelo navegador … sem necessidade de JavaScript!

Se você precisar usar um número de telefone em vez de um endereço de e-mail, <input type="tel"> habilita um teclado de telefone no celular. Você também pode usar o inputmode onde necessário: inputmode="numeric" é ideal para números PIN. Tudo o que você sempre quis saber sobre o modo de entrada tem mais detalhes.

Impedir que o teclado móvel obstrua o botão Login #

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

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

Teste em uma variedade de dispositivos #

Você precisará testar em uma variedade de dispositivos para seu público-alvo e ajustar de acordo. O BrowserStack permite o teste gratuito de projetos de código aberto em uma variedade de dispositivos e navegadores reais.

Considere o uso de duas páginas #

Alguns sites (incluindo Amazon e eBay) evitam o problema pedindo e-mail/telefone e senha em duas páginas. Essa abordagem também simplifica a experiência: o usuário recebe apenas uma tarefa de cada vez.

Idealmente, isso deve ser implementado com um único <form>. Use JavaScript para exibir inicialmente apenas a entrada de e-mail, depois oculte-o e mostre a entrada de senha. Se você precisar forçar o usuário a navegar para uma nova página entre inserir seu e-mail e senha, o formulário na segunda página deve ter um elemento de entrada oculto com o valor de e-mail, para ajudar a permitir que os gerenciadores de senha armazenem o valor correto. Estilos de formulário de senha que o Chromium entende fornece um exemplo de código.

Ajude os usuários a evitar inserir dados novamente #

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

Existem duas partes para isso:

1. Os autocomplete , name , id e type ajudam os navegadores a entender a função das entradas para armazenar dados que podem ser usados posteriormente 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 name estável ou id (não gerado aleatoriamente em cada carregamento de página ou implantação de site) e que estejam em um <form> com um botão de submit

2. O autocomplete entradas automaticamente usando os dados armazenados.

Para entradas de e-mail, use autocomplete="username", já que o username é reconhecido pelos gerenciadores de senha em navegadores modernos - mesmo que você deva usar type="email" e talvez queira usar id="email" e name="email".

Para entradas de senha, use os autocomplete e id apropriados para ajudar os navegadores a diferenciar entre as 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 inserir a senha em um formulário de inscrição ou a nova senha em um formulário de alteração de senha.

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

• Use autocomplete="current-password" e id="current-password" para inserir a senha em um formulário de login ou inserir a senha antiga do usuário em um formulário de alteração de senha. Isso informa ao navegador que você deseja usar 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 lidam com o preenchimento automático de e-mail e a sugestão de senha de maneira um pouco diferente, mas os efeitos são os mesmos. No Safari 11 e superior na área de trabalho, por exemplo, o gerenciador de senha é exibido e, em seguida, a autenticação biométrica (impressão digital ou reconhecimento facial) é usada, se disponível.

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

A senha do navegador e os sistemas de preenchimento automático 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, como apontado por Hidde de Vries: "O gerenciador de senhas do Firefox complementa sua heurística com um sistema de receita."

Preenchimento automático: o que os desenvolvedores da web devem saber, mas não tem muito mais informações sobre como usar o name e o autocomplete. A especificação HTML lista todos os 59 valores possíveis.

Ative o navegador para sugerir uma senha forte #

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

Veja como o Safari faz isso no desktop.

(A sugestão de senha única forte está disponível no Safari desde a versão 12.0.)

Geradores de senha de navegador integrados significam que 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, não há necessidade de os usuários se lembrarem ou inserirem as senhas. Incentivar os usuários a aproveitar as vantagens dos geradores de senha do navegador integrados também significa que eles têm mais probabilidade de usar uma senha única e forte em seu site e menos probabilidade de reutilizar uma senha que poderia estar comprometida em outro lugar.

Ajude a proteger os usuários de entradas perdidas acidentalmente #

Adicione o required aos campos de e-mail e senha. Os navegadores modernos solicitam e definem o foco automaticamente para os dados ausentes. Não requer JavaScript!

Design para dedos e polegares #

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

Certifique-se de que as entradas e os botões sejam grandes o suficiente #

O tamanho e o preenchimento padrão para entradas e botões são muito pequenos na área de trabalho e ainda pior no celular.

De acordo com as orientações de acessibilidade do Android, o tamanho alvo recomendado para objetos touchscreen é de 7 a 10 mm. As diretrizes de interface da Apple sugerem 48x48 px, e o W3C sugere pelo menos 44x44 pixels CSS. Com base nisso, adicione (pelo menos) cerca de 15 px de preenchimento para inserir elementos e botões para dispositivos móveis e cerca de 10 px para desktop. Experimente fazer isso com um dispositivo móvel real e um dedo ou polegar real. Você deve ser capaz de tocar confortavelmente em cada uma de suas entradas e botões.

Os pontos de toque não são dimensionados de forma adequada. A auditoria do Lighthouse pode ajudá-lo a automatizar o processo de detecção de elementos de entrada que são muito pequenos.

Design para polegares #

Pesquise o alvo de toque e você verá muitas fotos de indicadores. No entanto, no mundo real, muitas pessoas usam os polegares para interagir com os telefones. Os polegares são maiores do que os indicadores e o controle é menos preciso. Mais uma razão para alvos de toque de tamanho adequado.

Torne o texto grande o suficiente #

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

Navegadores em diferentes plataformas têm tamanhos de fontes diferentes, então é difícil especificar um tamanho de fonte específico que funcione bem em qualquer lugar. Uma rápida pesquisa de sites populares mostra tamanhos de 13 a 16 pixels no desktop: corresponder a esse tamanho físico é um bom mínimo para texto no celular.

Isso significa que você precisa usar um tamanho de pixel maior no celular: 16px no Chrome para desktop é bastante legível, mas mesmo com uma boa visão é difícil ler 16px no Chrome para Android. Você pode definir diferentes tamanhos de pixel de fonte para diferentes tamanhos de viewport usando consultas de mídia. 20px para dispositivos móveis, mas você deve testar isso com amigos ou colegas que têm visão reduzida.

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

Forneça espaço suficiente entre as entradas #

Adicione margem suficiente para fazer as entradas funcionarem bem como alvos de toque. Em outras palavras, almeje a largura de um dedo de margem.

Certifique-se de que suas entradas estejam claramente visíveis #

O estilo de borda padrão para entradas torna-as difíceis de ver. Eles são quase invisíveis em algumas plataformas como o Chrome para Android.

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

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

Os navegadores possuem 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 :invalid seletor CSS inválido para destacar dados inválidos. Use :not(:placeholder-shown) para evitar a seleção de entradas sem conteúdo.

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

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

Use JavaScript onde necessário #

Alternar exibição de senha #

Você deve adicionar um ícone ou botão Mostrar senha para permitir que os usuários verifiquem o texto que inseriram. A usabilidade é prejudicada quando os usuários não conseguem ver o texto que inseriram. Atualmente não há uma maneira integrada de fazer isso, embora haja planos para implementação. Você precisará usar JavaScript em vez disso.

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>

Aqui está o CSS para fazer o botão parecer 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:

Torne as entradas de senha acessíveis #

Use aria-describedby para delinear regras de senha, fornecendo a 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, certifique-se de incluir um aria-label para avisar que a senha será exibida. Caso contrário, os usuários podem revelar inadvertidamente as senhas.

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

Você pode ver os dois recursos ARIA em ação na seguinte falha:

Criar formulários acessíveis tem mais dicas para ajudar a tornar os formulários acessíveis.

Valide em tempo real e antes do envio #

Os elementos e atributos do formulário HTML têm recursos integrados para validação básica, mas você também deve usar JavaScript para fazer uma validação mais robusta enquanto os usuários estão inserindo dados e quando tentam enviar o formulário.

A etapa 5 do codelab do formulário de login usa a API de validação de restrição (que é amplamente suportada) para adicionar validação personalizada usando a IU do navegador integrada para definir o foco e exibir prompts.

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

Analytics e RUM #

"O que você não pode medir, você não pode melhorar" é particularmente verdadeiro para formulários de inscrição e inscrição. Você precisa definir metas, medir o sucesso, melhorar seu site - e repetir.

O teste de usabilidade com desconto pode ser útil para experimentar mudanças, mas você precisará de dados do mundo real para realmente entender como seus usuários experimentam seus formulários de inscrição e login:

• Análise de 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 login ou fluxo de 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 (seus formulários de inscrição e login estão lentos por algum motivo e, em caso afirmativo, qual é a causa?).

Você também pode considerar a implementação de testes A/B para experimentar diferentes abordagens de inscrição e login, além de implementações graduais para validar as alterações em um subconjunto de usuários antes de liberar as alterações para todos os usuários.

Diretrizes gerais #

IU e 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 superior da página, usando palavras bem conhecidas, como Login , Criar conta ou Registrar.
• Mantenha o foco! Os formulários de inscrição não são o lugar para 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) apenas quando os usuários perceberem um benefício claro em fornecer esses dados.
• Antes que os usuários comecem em seu formulário de inscrição, deixe claro qual é a proposta de valor. Como eles se beneficiam com o 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 telefone celular em vez de um endereço de e-mail, já que alguns usuários podem não usar o e-mail.
• Torne mais fácil para os usuários redefinir suas senhas e faça o link Esqueceu sua senha? link óbvio.
• Link para seus termos de serviço e documentos de política de privacidade: deixe claro para os usuários desde o início como você protege seus dados.
• Inclua o logotipo e o nome de sua empresa ou organização em suas páginas de inscrição e login e certifique-se de que o idioma, as fontes e os estilos correspondam ao restante do seu site. Alguns formulários não parecem pertencer ao mesmo site de outro conteúdo, especialmente se tiverem um URL significativamente diferente.

Continue aprendendo #

• Crie formulários incríveis
• Melhores práticas para design de formulários para celular
• Controles de formulário mais capazes
• Criação de formulários acessíveis
• Simplificação do fluxo de login usando a API de gerenciamento de credenciais
• Verifique os números de telefone na web com a API WebOTP

Foto de Meghan Schiereck no Unsplash.