Recentemente, a autorização em sites está começando a me incomodar bastante. À medida que os gerenciadores de senhas se tornam mais populares, como o 1Password (que eu uso) e o gerenciador de senhas do Chrome (que eu também uso), é importante que os sites considerem esse fato.

Vejamos alguns padrões de login que não são perfeitos na minha opinião. E considere as melhores práticas. TL; DR; São páginas de autorização simples, previsíveis, em páginas regulares e amigáveis ​​com os gerenciadores de senhas.

O que não fazer

Aqui estão alguns exemplos que eu evitaria.

Não coloque a autorização em formas modais

A Hertz e vários outros sites colocam um formulário de login em uma janela modal. Essa abordagem tem dois problemas:

• Etapas adicionais para o usuário : “1. pressione o botão menu, 2. selecione um login, 3. preencha o formulário ”em vez de ir para a página de autorização (por meio de pesquisa, bate-papo com suporte ao cliente, marcador, gerenciador de senhas, diretamente, através da navegação principal) e preencha o formulário.
  
• Não há um link direto para a página , o que pode ser um problema para o serviço de suporte (já que eles precisam dar várias instruções descritas acima e não apenas enviar uma pessoa pelo link). Também interfere no trabalho dos gerenciadores de senhas, pois a janela modal está inicialmente oculta. O 1Password possui um incrível recurso Abrir e Preencher, que permite abrir um site e preencher o formulário de login com suas credenciais. Esta função não funciona com janelas modais.

Não esconda os campos

O site Delta oculta o campo Sobrenome. Pelo que entendi, para tornar a interface mais limpa, introduzindo elementos de design progressivo. O problema é que o campo é obrigatório e os gerenciadores de senhas não podem preenchê-lo automaticamente . Os usuários devem primeiro preencher e sair de outro campo para que isso apareça. Apenas mais um obstáculo desnecessário para que uma pessoa possa entrar no sistema.

A tela de login do MacOS oculta o campo de senha da mesma maneira para "limpar" a interface do usuário (e eu também assumo que os usuários devem fazer login via TouchID), mas essa limpeza, na minha opinião, pode confundir as pessoas.

Não mexa com links mágicos

Pode ter sido iniciado com o Slack, mas agora outros programas, como o Noção (que eu amo, por sinal), enviam uma senha temporária por e-mail para fazer login no sistema. Compreendo o truque deste modelo, pois elimina o sofrimento de usuários infelizes que têm dificuldade em lembrar outra senha e não precisam criar toda a infraestrutura necessária para recuperar uma senha esquecida. Mas

• Este circuito é incrivelmente cansativo . 1. Digite o email no formulário de login. 2. Abra uma nova guia ou alterne o programa. 3. Abra a caixa de correio. 4. Encontre uma mensagem do serviço (se você não se distrair com outras letras). 5. Abra a mensagem. 6. Copie a senha abracadabra. 7. Volte ao site. 8. Insira lá abracadabra. 9. Envie o formulário. Droga.
  
• Isso não funciona com gerenciadores de senhas , o que é incrivelmente irritante. No design, falamos muito sobre consistência. Mas estamos falando não apenas de coerência em nosso próprio ecossistema, mas também com o resto da Internet, árvores de pau.
  
• Isso força os usuários a aprenderem novos comportamentos : eles aprenderam certos padrões (login, verificação, navegação etc.), reutilizando-os em muitos aplicativos ao longo de muitos anos. Não estou dizendo que a inovação nunca deve ser feita. Mas é importante reconhecer que os usuários acessam seu produto com um monte de conhecimentos adquiridos sobre como usar a Internet. Quando tentamos nos tornar muito inteligentes, forçamos os usuários a aprender novos padrões, o que torna as pessoas mais lentas (pelo menos desde o início).

Não divida o formulário de login em várias páginas

O Shopify (outro dos meus serviços favoritos) irrita abertamente o login em três telas separadas. Mais uma vez, posso entender os motivos: eles não querem sobrecarregar imediatamente o usuário com muita informação. Eu concordo com este modelo em certos casos (por exemplo, na loja online, informações de pagamento, método e endereço de entrega, informações de cartão de crédito etc. geralmente são inseridas em várias etapas). Mas por que fazer isso para um formulário com três campos?

• Etapas desnecessárias foram adicionadas para entrar no sistema : este ainda é um formulário com três campos, mas agora os usuários precisam percorrer três telas. Claro, isso atrasa as pessoas.
• Não funciona com gerenciadores de senhas : os gerenciadores de senhas podem preencher apenas um campo em uma página.

Como fazer

O que os web designers fazem? Eu acho que o formulário de login antigo e chato está ótimo. Aqui está a colheita :



E aqui está o WordPress:



Design simples, conciso e previsível. Compatível com gerenciadores de senhas. Está tudo no lugar. Aqui estão algumas considerações:

• Crie uma página separada para fazer login : as pessoas do suporte poderão enviar clientes para o URL (domínio.com/login) e não definirão várias instruções sobre onde encontrar o formulário de login. Os gerenciadores de senhas salvarão esse URL, com o clique de um botão, eles abrirão e preencherão automaticamente os campos.
  
• Mostre todos os campos necessários : se você precisar digitar um sobrenome para entrar, mostre imediatamente este campo!
  
• Coloque todos os campos em uma página : a entrada deve ser rápida e não um canal desnecessário estendido por várias páginas.
  
• Não fantasie : pode ser que esses links mágicos e outros modelos de login engenhosos o sejam, mas você deve levar em consideração os hábitos dos usuários na Internet. Confie nessa prática chata, previsível e estabelecida.

A lista não é exaustiva. Não toquei em coisas como login em mídia social ou autenticação de dois fatores. Expresse suas observações sobre outros padrões irregulares se algo for encontrado.