{"id":5487,"date":"2015-03-20T17:48:46","date_gmt":"2015-03-20T20:48:46","guid":{"rendered":"http:\/\/blogimpacta.com.br\/?p=5487"},"modified":"2015-03-20T17:48:46","modified_gmt":"2015-03-20T20:48:46","slug":"como-porque-melhorar-design-tela-de-login","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/como-porque-melhorar-design-tela-de-login\/","title":{"rendered":"Como e por que melhorar o design da tela de login?"},"content":{"rendered":"

Muitas vezes a tela de login<\/strong> de um site \u00e9 deixada de lado ao se pensar no design e na experi\u00eancia do usu\u00e1rio<\/strong>. Saiba que isso \u00e9 um grande erro. Para entender isso, basta se lembrar de quantas vezes a p\u00e1gina de login te irritou. Como quando voc\u00ea n\u00e3o consegue logar e n\u00e3o sabe se o que est\u00e1 errado \u00e9 a senha ou o nome de usu\u00e1rio.<\/p>\n

Para te ajudar a entender a import\u00e2ncia de deixar esse formul\u00e1rio simples, elegante e intuitivo, sem perder em seguran\u00e7a, a empresa de an\u00e1lises Go Squared<\/strong><\/a>, postou em seu blog um resumo esclarecedor apontando em imagens e GIFs animados, como \u00e9 poss\u00edvel tornar esse processo do design.<\/p>\n

Confira 4 dicas<\/strong> que separamos para melhorar o design da tela de login:<\/span><\/h1>\n

Login simples e seguro<\/span><\/h1>\n

A tela de login \u00e9 a parte que o usu\u00e1rio quer pular o mais r\u00e1pido poss\u00edvel. E \u00e9 por isso que ao pensar em seu design, a simplicidade e agilidade s\u00e3o essenciais. Por\u00e9m, o problema \u00e9 fazer o equil\u00edbrio entre o veloz para o usu\u00e1rio sem facilitar a vida de n\u00e3o-usu\u00e1rios, como hackers.<\/p>\n

Com o uso da autentica\u00e7\u00e3o de dois fatores, que \u00e9 um processo para duplicar a seguran\u00e7a de sua conta, essa tarefa de deixar o login r\u00e1pido e f\u00e1cil ficou ainda mais dif\u00edcil. Por\u00e9m, o Go Squared diz que isso \u00e9 poss\u00edvel, utilizando algumas t\u00e9cnicas como utilizando anima\u00e7\u00f5es fluidas, que deixam uma impress\u00e3o de velocidade. Veja um exemplo no GIF abaixo:<\/p>\n

\"Crie<\/p>\n

Tenha um bot\u00e3o vis\u00edvel de login<\/span><\/h1>\n

Muitos usu\u00e1rios j\u00e1 est\u00e3o acostumados a digitar o nome de usu\u00e1rio, senha e apertarem a tecla \u201center\u201d para se logarem rapidamente. Por\u00e9m, testes feitos pelo Go Squared apontam que muitas pessoas ainda procuram um bot\u00e3o para confirmarem o login. Por isso, o ideal \u00e9 que a tela tenha os dois: um bot\u00e3o e acesso autom\u00e1tico pelo \u201center\u201d.<\/p>\n

\"Muitos<\/a><\/p>\n

Preveja e corrija erros<\/span><\/h1>\n

Nada mais irritante ou frustrante do que preencher todo o formul\u00e1rio de login e perder esse tempo por um simples erro de digita\u00e7\u00e3o. Por isso, o GoSquared sugere uma fun\u00e7\u00e3o com a parceira feita com Mailcheck<\/a>, servi\u00e7o que encontra erros nos endere\u00e7os de e-mail (veja na imagem). Mesmo que n\u00e3o seja capaz de achar os todos tipos de falhas, ele evitar\u00e1 casos como \u201c@gkail\u201d.<\/p>\n

\"Ferramenta<\/p>\n

Utilize placeholder labels inteligentes<\/span><\/h1>\n

Placeholder <\/strong>e Labels<\/strong> s\u00e3o utilizados em formul\u00e1rios como um r\u00f3tulo, indicando o que deve ser inserido no campo ou para passar informa\u00e7\u00f5es complementares. Muitos sites utilizam dessas t\u00e9cnicas para facilitar o entendimento antes do usu\u00e1rio digitar, sumindo da tela ap\u00f3s inserir o primeiro caractere.<\/p>\n

O que os testes do GoSquared apontaram \u00e9 que muitas pessoas gostam que esses \u201cr\u00f3tulos\u201d continuem aparecendo na tela para terem certeza que est\u00e3o preenchendo o campo corretamente. A solu\u00e7\u00e3o \u00e9 criar op\u00e7\u00f5es inteligentes, como a sugest\u00e3o abaixo, que ao digitar, passa a label para a lateral do campo.<\/p>\n

\"Placeholders<\/p>\n

E a\u00ed, que outras dicas voc\u00ea daria para deixar a tele de login ainda mais intuitiva e simples? Deixe seu coment\u00e1rio.<\/p>\n

<\/i>Love<\/span>1<\/span><\/span><\/a> <\/i> <\/i>