No seas inteligente con los formularios de inicio de sesi贸n

Recientemente, la autorizaci贸n en los sitios me est谩 empezando a molestar mucho. A medida que los administradores de contrase帽as se vuelven m谩s populares, como 1Password (que uso) y el administrador de contrase帽as de Chrome (que tambi茅n uso), es importante que los sitios web consideren este hecho.

Veamos algunos patrones de inicio de sesi贸n que no son perfectos en mi opini贸n. Y luego considere las mejores pr谩cticas. TL; DR; Estas son p谩ginas de autorizaci贸n que son simples, predecibles, en p谩ginas normales y son amigables con los administradores de contrase帽as.

Que no hacer


Aqu铆 hay algunos ejemplos que evitar铆a.

No ponga la autorizaci贸n en formas modales.




Hertz y muchos otros sitios ponen un formulario de inicio de sesi贸n en una ventana modal. Este enfoque tiene dos problemas:

  • Pasos adicionales para el usuario : 鈥1. presione el bot贸n de men煤, 2. seleccione un inicio de sesi贸n, 3. complete el formulario 鈥漞n lugar de ir a la p谩gina de autorizaci贸n (mediante b煤squeda, chat de atenci贸n al cliente, marcador, administrador de contrase帽as, directamente, a trav茅s de la navegaci贸n principal) y complete el formulario.
  • No hay un enlace directo a la p谩gina , lo que puede ser una molestia para el servicio de soporte (ya que tienen que dar un mont贸n de instrucciones descritas anteriormente, y no solo enviar a una persona a trav茅s del enlace). Tambi茅n interfiere con el trabajo de los administradores de contrase帽as, ya que la ventana modal est谩 inicialmente oculta. 1Password tiene una sorprendente funci贸n de Abrir y llenar que le permite abrir un sitio y completar el formulario de inicio de sesi贸n con sus credenciales. Esta funci贸n no funciona con ventanas modales.

No esconder los campos




El sitio Delta oculta el campo Apellido. Seg煤n tengo entendido, hacer que la interfaz sea m谩s limpia mediante la introducci贸n de elementos de dise帽o progresivo. El problema es que el campo es obligatorio y los administradores de contrase帽as no pueden completarlo autom谩ticamente . Los usuarios primero deben completar y salir de otro campo para que esto aparezca. Solo un obst谩culo adicional e innecesario para que una persona pueda ingresar al sistema.

La pantalla de inicio de sesi贸n de MacOS oculta el campo de contrase帽a de la misma manera para "borrar" la interfaz de usuario (y tambi茅n asumo que los usuarios deben iniciar sesi贸n a trav茅s de TouchID), pero esta limpieza, en mi opini贸n, puede confundir a las personas.

No te metas con enlaces m谩gicos




Puede haber comenzado con Slack, pero ahora otros programas, como Notion (que me encanta, por cierto), env铆an una contrase帽a temporal de correo electr贸nico para iniciar sesi贸n en el sistema. Puedo apreciar el truco de esta plantilla, ya que elimina el sufrimiento de los usuarios desafortunados que encuentran dif铆cil recordar otra contrase帽a y no necesitan crear toda la infraestructura necesaria para recuperar una contrase帽a olvidada. Pero

  • Este circuito es incre铆blemente agotador . 1. Ingrese el correo electr贸nico en el formulario de inicio de sesi贸n. 2. Abra una nueva pesta帽a o cambie el programa. 3. Abra el buz贸n. 4. Encuentre un mensaje del servicio (si no le distraen otras cartas). 5. Abra el mensaje. 6. Copie la contrase帽a de abracadabra. 7. Regresar al sitio. 8. Insertar all铆 abracadabra. 9. Env铆e el formulario. Maldici贸n
  • Esto no funciona con los administradores de contrase帽as , lo cual es incre铆blemente molesto. En dise帽o, hablamos mucho sobre consistencia. Pero estamos hablando no solo de coherencia en nuestro propio ecosistema, sino tambi茅n con el resto de Internet, los 谩rboles de palo.
  • Esto obliga a los usuarios a aprender nuevos comportamientos : los usuarios han aprendido ciertos patrones (inicio de sesi贸n, verificaci贸n, navegaci贸n, etc.), reutiliz谩ndolos en muchas aplicaciones durante muchos a帽os. No digo que la innovaci贸n nunca deba hacerse. Pero es importante reconocer que los usuarios acuden a su producto con una gran cantidad de conocimientos adquiridos sobre c贸mo usar Internet. Cuando intentamos ser demasiado inteligentes, obligamos a los usuarios a aprender nuevos patrones, lo que ralentiza a las personas (al menos desde el principio).

No divida el formulario de inicio de sesi贸n en varias p谩ginas.








Shopify (otro de mis servicios favoritos) irrita molestamente el inicio de sesi贸n en tres pantallas separadas. Nuevamente, puedo entender los motivos: no quieren sobrecargar inmediatamente al usuario con mucha informaci贸n. Estoy de acuerdo con este patr贸n en ciertos casos (por ejemplo, en la tienda en l铆nea, la informaci贸n de pago, el m茅todo de entrega y la direcci贸n, la informaci贸n de la tarjeta de cr茅dito, etc., generalmente se ingresan en varios pasos). Pero, 驴por qu茅 hacer esto para un formulario con tres campos?

  • Se agregan pasos innecesarios para ingresar al sistema : este sigue siendo un formulario con tres campos, pero ahora los usuarios tienen que pasar por tres pantallas. Claro, ralentiza a la gente.
  • No funciona con administradores de contrase帽as : los administradores de contrase帽as solo pueden completar un campo en una p谩gina.

Como hacer


驴Qu茅 hacen los dise帽adores web? Creo que el viejo y aburrido formulario de inicio de sesi贸n est谩 bien. Aqu铆 est谩 la cosecha :



Y aqu铆 est谩 WordPress:



Dise帽o simple, conciso y predecible. Compatible con administradores de contrase帽as. Todo esta en su lugar. Aqu铆 hay algunas consideraciones:

  • Haga una p谩gina separada para iniciar sesi贸n : las personas de soporte podr谩n enviar a los clientes a la URL (dominio.com/login) y no establecer un mont贸n de instrucciones sobre d贸nde encontrar el formulario de inicio de sesi贸n. Los administradores de contrase帽as guardar谩n esta URL, al hacer clic en un bot贸n, se abrir谩n y completar谩n autom谩ticamente los campos.
  • Muestre todos los campos necesarios : si necesita ingresar un apellido para ingresar, 隆muestre inmediatamente este campo!
  • Ponga todos los campos en una p谩gina : la entrada debe ser r谩pida y no un canal innecesario extendido en varias p谩ginas.
  • No fantasees : puede ser que estos enlaces m谩gicos y otras ingeniosas plantillas de inicio de sesi贸n lo sean, pero debes tener en cuenta los h谩bitos de los usuarios en Internet. Conf铆e en esta pr谩ctica aburrida, predecible y establecida.

La lista no es exhaustiva. No he tocado cosas como el inicio de sesi贸n en las redes sociales o la autenticaci贸n de dos factores. Exprese sus observaciones sobre otros patrones irregulares si se encuentra algo.

Source: https://habr.com/ru/post/440948/


All Articles