Práticas recomendadas para formulários de login

Use recursos multiplataforma de navegação para criar formulários de login seguros, acessíveis e fáceis de usar.

Sam Dutton

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

Veja um exemplo de 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>.
• Usar atributos de elementos para acessar o navegador integrado recursos: type, name, autocomplete e required.
• Defina valores estáveis para atributos de entrada name e id que não mudem entre o carregamento de páginas ou as implantações do site.
• Colocar o login no próprio <form> elemento.
• Garanta o envio correto do formulário.
• Usar autocomplete="new-password" e id="new-password" para a entrada de senha em um formulário de inscrição e a nova senha em um formulário de redefinição de senha.
• Usar autocomplete="current-password" e id="current-password" para a entrada da senha de login.
• Forneça a funcionalidade Mostrar senha.
• Usar aria-label e aria-describedby para de entrada de senha.
• Não dobra as entradas.
• Crie formulários para que o teclado do dispositivo móvel não oculte entradas ou botões personalizados.
• Verifique se os formulários podem ser usados em dispositivos móveis: use texto legível, e verifique se as entradas e os botões são grandes o suficiente para funcionar como áreas de toque.
• Mantenha a marca e o estilo nas suas páginas de inscrição e login.
• Teste em campo e no laboratório: crie análises de páginas, análise de interação e medição de desempenho centrada no usuário em seu inscrição e login.
• Teste em vários navegadores e dispositivos: o comportamento dos formulários varia. significativamente entre as plataformas.

Use um HTML significativo

Use os elementos criados para o job: <form>, <label> e <button>. Elas permitem funcionalidades integradas do navegador, melhore a acessibilidade e dê mais significado à sua marcação.

Usar <form>

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

Usar <label>

Para rotular uma entrada, use um <label>.

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

Dois motivos:

• Um toque ou clique em um marcador move o foco para a entrada. Associar um rótulo a um entrada usando o atributo for do rótulo com o name ou id da entrada.
• Os leitores de tela anunciam o texto do rótulo quando o rótulo ou a entrada dele é foco.

Não use marcadores de posição como rótulos de entrada. As pessoas são propensas a esquecer o que entrada foi para quando eles começaram a digitar texto, especialmente se eles recebem distraído ("Eu estava digitando um endereço de e-mail, um número de telefone ou ID?"). Existem muitos outros problemas em potencial com marcadores de posição: consulte Não Usar o marcador de posição Attribute e Os marcadores em campos de formulário são Nocivo se você for desconfiado.

Provavelmente é melhor colocar os rótulos acima das entradas. Assim, é possível ter consistência projetar para dispositivos móveis e computadores e, de acordo com a IA do Google, pesquisa, permite que os usuários verifiquem com mais rapidez. Você recebe rótulos e entradas de largura total não é necessário ajustar o rótulo e a largura da entrada para caber no texto do rótulo.

Abra o Glitch label-position em um dispositivo móvel para ver por si mesmo.

Usar <button>

Usar <button> para botões. Os elementos de botão oferecem comportamento acessível e formulário integrado a funcionalidade de envio, e eles podem ser facilmente estilizados. Não faz sentido em usando uma <div> ou algum outro elemento fingindo ser um botão.

Verifique se o botão "Enviar" informa o que ele faz. Os exemplos incluem Criar conta ou Faça login, não Enviar ou Iniciar.

Garanta o envio do formulário

Ajude os gerenciadores de senhas a entender que um formulário foi enviado. Existem 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 login foi concluído relatados na resposta e processados pelo DOM também como indicação de sucesso para o usuário.

Considere desativar o botão Fazer login quando o usuário tocar ou clicar. reimplantá-lo. Muitos usuários clicam em botões várias vezes até mesmo em sites rápidos e responsivos. Isso desacelera as interações e aumenta a carga do servidor.

Da mesma forma, não desative o envio de formulário aguardando a entrada do usuário. Por exemplo: Não desative o botão Fazer login se os usuários não tiverem inserido as informações de PIN. Os usuários podem perder algo no formulário e tentar tocar repetidamente no (desativado) Fazer login e pensar que não está funcionando. No mínimo, se desative o envio de formulário, explique ao usuário o que está faltando clique no botão "Desativado".

Não dobrar as entradas

Alguns sites forçam os usuários a digitar 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 abandono e as despesas gerais. Perguntar duas vezes também não faz sentido quando os navegadores preenchem automaticamente endereços de e-mail ou sugerir senhas fortes. É melhor permitir que os usuários confirmem o e-mail (você terá que fazer isso de qualquer maneira) e facilite a redefinição dos dados se necessário.

Aproveitar 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 privadas, mas permita que os usuários as vejam se quiserem

As entradas de senha 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 você quer ou não salvar senhas.

Adicione um botão de alternância Mostrar senha para permitir que os usuários verifiquem a texto que foi digitado. Além disso, não se esqueça de adicionar um link Esqueci a senha. Consulte Ative a exibição de senha.

Oferecer 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 apropriado e ativar validação básica de endereço de e-mail integrada pelo navegador... sem JavaScript obrigatório.

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 de telefone no dispositivo móvel. Você também pode usar o Atributo inputmode quando necessário: inputmode="numeric" é ideal para o PIN números grandes. Tudo o que você sempre quis saber inputmode tem mais detalhes.

Impedir que o teclado móvel bloqueie o botão Fazer login

Infelizmente, se você não tiver cuidado, teclados móveis podem cobrir seu formulário ou, ou ainda piorar, obstrua parcialmente o botão Fazer login. Os usuários podem desistir antes sem perceber o que aconteceu.

Sempre que possível, evite que isso aconteça 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

Você precisará testar em uma variedade de dispositivos para seu público-alvo e ajustar de maneira adequada. O BrowserStack permite testes sem custo financeiro de código aberto projetos em vários dispositivos reais e navegadores da Web.

Considere usar duas páginas

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

O ideal é implementar isso com um único <form>. Usar JavaScript para exibir inicialmente apenas a entrada de e-mail e, em seguida, ocultá-la e mostrar a entrada de senha. Se você precisar forçar o usuário a navegar para uma nova página entre inserir o e-mail e o formulário da segunda página deve ter um elemento de entrada oculto com o parâmetro para que os gerenciadores de senhas armazenem o valor correto. Senha Estilos de formulário 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 terá que se lembrar de digitar os valores de e-mail e senha. Isso é especialmente importante em dispositivos móveis e é essencial para entradas de e-mail, que geram altas taxas de abandono.

Isso tem 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 para preenchimento automático. Para permitir o armazenamento de dados para preenchimento automático, os navegadores mais recentes também precisam de entradas para têm um valor name ou id estável (não gerado aleatoriamente em cada carregamento de página ou implantação local) e estar em um <form> com um botão submit.

2. O atributo autocomplete ajuda os navegadores a preencher automaticamente as entradas de forma correta 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 talvez você queira usar id="email" e name="email".

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

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

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

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

• Use autocomplete="current-password" e id="current-password" para a entrada de senha em uma ou a entrada da senha antiga do usuário em um formulário de alteração de senha. Isso diz ao navegador que você deseja que use a senha atual que armazenou 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-mails e a sugestão de senha de forma parcial de maneiras diferentes, mas os efeitos são praticamente os mesmos. No Safari 11 e mais recentes no computador, Por exemplo, o gerenciador de senhas é exibido, e a biometria autenticação (impressão digital ou reconhecimento facial) será usada se disponível.

O Chrome no computador mostra sugestões de e-mail, mostra o gerenciador de senhas e preenche a senha automaticamente.

.

Os sistemas de preenchimento automático e senha do navegador não são simples. Os algoritmos adivinhar, armazenar e exibir valores não são padronizados e variam de de plataforma para plataforma. Por exemplo, como indicado por Hidde de Vries: "O gerenciador de senhas do Firefox complementa sua heurística com uma 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. O HTML especificação lista todos os 59 valores possíveis.

Permitir que o navegador sugira uma senha forte

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

Veja 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 senhas integrados do navegador, usuários e desenvolvedores não precisam descobrir o que é uma "senha forte" o endereço IP interno. Como os navegadores armazenam e as preenchem automaticamente conforme necessário, os usuários não precisam se lembrar ou digitar senhas. Incentivar os usuários a aproveitar o navegador integrado eles também costumam usar um modelo exclusivo e no seu site e menos propensos a reutilizar uma senha que possa ser comprometido em outro lugar.

Evitar a perda acidental de entradas para os usuários

Adicione o atributo required aos campos de e-mail e senha. Navegadores modernos solicitam e definem o foco automaticamente para dados ausentes. Não é necessário JavaScript.

Design para dedos e polegares

O tamanho de navegador padrão para quase tudo relacionado aos elementos de entrada e os botões são muito pequenos, 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 padrão e o padding para entradas e botões é muito pequeno no computador e pior ainda em dispositivos móveis.

De acordo com a API de acessibilidade orientação o tamanho de alvo recomendado para objetos touchscreen é de 7 a 10 mm. Interface da Apple as diretrizes sugerem 48 x 48 px, e o W3C sugerem pelo menos 44 x 44 CSS pixels. Com isso em mente adicione (pelo menos) cerca de 15 px de padding aos elementos de entrada e botões para dispositivos móveis e cerca de 10 pixels no computador. Teste isso com um dispositivo móvel real e com um dedo ou polegar de verdade. Você deve conseguir tocar em cada um dos seus e botões de entrada.

Os áreas de toque não estão dimensionadas corretamente A auditoria do Lighthouse pode ajudar você a automatizar o processo de detecção de elementos de entrada muito pequenas.

Design para dedos

Pesquise a área de toque e você verá muitas fotos de dedos indicadores. No entanto, no mundo real, as pessoas usam os polegares para interagir com celulares. Os polegares são maiores que o indicador, e o controle é menos preciso. Mais uma razão para criar áreas de toque dimensionadas.

Deixe o texto grande o suficiente

Assim como com o tamanho e o padding, o tamanho de fonte padrão do navegador para elementos de entrada e é muito pequeno, especialmente em dispositivos móveis.

Navegadores em diferentes plataformas dimensionam fontes de maneira diferente, por isso é difícil especificar um tamanho de fonte específico que funciona bem em qualquer lugar. Uma pesquisa rápida Sites populares mostram tamanhos de 13 a 16 pixels no desktop, correspondendo ao tamanho físico é um bom mínimo para texto em dispositivos móveis.

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

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

Deixe espaço suficiente entre as entradas

Adicione margem suficiente para que as entradas funcionem bem como áreas de toque. Em outras palavras, vise para aproximadamente um dedo na margem.

Confira se as entradas estão claramente visíveis

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

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

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

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

Você pode usar o seletor de CSS :invalid para destacar dados inválidos. Usar :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;
}

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 alternância Mostrar senha para permitir que os usuários verifiquem a o texto que inseriram. Usabilidade sofre quando os usuários não têm acesso ao texto inserido. No momento, não há uma maneira integrada de fazer isso, embora há planos para implementação. Você vai precisará 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>

Veja 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.');
  }
}

Este é o resultado final:

Tornar as entradas de senha acessíveis

Use aria-describedby para delinear regras de senha, fornecendo o ID do 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 será exibida. Caso contrário, os usuários podem revelar 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>

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

O guia Criar Formulários acessíveis tem mais dicas para ajudar você a tornar os formulários acessíveis.

Validar em tempo real e antes do envio

Elementos e atributos de 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 inserir dados e tentar enviar o formulário.

Etapa 5 do formulário de login o codelab usa o modelo de Validação de restrições API (que é amplamente compatível) para adicionar validação personalizada usando a interface integrada do navegador para definir o foco e mostrar comandos.

Saiba mais: Use JavaScript para tarefas mais complexas em tempo real validação.

Analytics e RUM

"O que não podemos medir, não é possível melhorar" é particularmente verdadeiro para inscrição e formulários de login. Você precisa definir metas, medir o sucesso, melhorar seu site e repetir.

Usabilidade de desconto testes podem ser úteis para testar mudanças, mas você precisará de dados do mundo real para realmente entender a experiência dos usuários com 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 sai.
• Análise de interação: meta funis (onde os usuários abandonam seu fluxo de login ou login?) e eventos (que ações os usuários realizam ao interagir com seus formulários?)
• Performance do site: centrada no usuário métricas de inscrição e login formas lentas por algum motivo e, em caso afirmativo, qual é a causa?).

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

Diretrizes gerais

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

• Não obrigue os usuários a fazer login. Colocar um link para o formulário de login na parte superior da página, usando palavras bem compreendidas, como Fazer login, Criar conta ou Registre-se.
• Mantenha o foco! Os formulários de inscrição não são o lugar para distrair as pessoas ofertas e outros recursos do site.
• Minimize a complexidade da inscrição. Colete outros dados do usuário (como endereços ou detalhes do cartão de crédito) somente quando os usuários perceberem um benefício claro de fornecer essas dados.
• Antes que os usuários comecem a preencher o formulário de inscrição, deixe claro o valor proposta é. Quais são as vantagens do login? Ofereça aos usuários uma experiência incentivos 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 talvez não usem e-mail.
• Facilite a redefinição da senha e a página Esqueceu seu senha? link óbvio.
• Link para seus Termos de Serviço e documentos da Política de Privacidade: deixe claro para aos usuários desde o início como você protege os dados deles.
• Inclua o logotipo e o nome da sua empresa ou organização na inscrição. páginas de login e verificar se idioma, fontes e estilos correspondem ao restante seu site. Alguns formulários não parecem pertencer ao mesmo site que outros do site, especialmente se eles tiverem um URL significativamente diferente.

Continue aprendendo

• Crie formulários incríveis
• Práticas recomendadas para o design de formulários em dispositivos móveis
• Controles de formulários mais eficientes
• Criar formulários acessíveis
• Como otimizar o fluxo de login usando a API Credential Management (link em inglês)
• Verificar números de telefone na Web com a API WebOTP

Foto de Meghan Schiereck no Unsplash.