Cuenta la leyenda que antes de la llegada del ordenador personal existió un todopoderoso llamado Mainframe era un enorme y potente cerebro mecánico, usado por los principales monstruos de los negocios para procesar cantidades ingentes de datos. Con el paso del tiempo este súper cerebro evolucionó, permitiendo la interactividad con los humanos y convirtiéndose en un sistema multiusuario. El humano ingresaba su usuario y contraseña. Tras validar los datos, Mainframe le abría la barrera de paso para que pudiera programar las tareas que luego procesaría, devolviéndole finalmente su resultado al humano. Es así como la aparatosa máquina se convirtió en del tan conocido proceso de autenticación.
Después de tantos años de uso, las personas estamos sobradamente acostumbradas a rellenar formularios de registro y login. Quizá sea esta familiaridad con la autenticación la razón por la que esta parte suele ser la menos atractiva en el diseño de interfaces. Aún resultando monótonos, estos formularios son generalmente una pieza clave a nivel de negocio y marketing, y no hay que subestimarlos, ya que son la puerta de entrada a un producto digital y a que este funcione.
Evidentemente, no siempre se necesita nuestra información personal para hacer uso de lo que nos brinda un producto digital pero, ¿cuántas webs y apps nos han pedido nuestros datos sin necesidad alguna? Seguro que demasiadas, y en la mayoría hemos salido corriendo de ahí. Si por el tipo de negocio (servicios de streaming, compras online, planes nutricionales personalizados…) se necesita cierta información del usuario habría que pedirla de forma simple, y solo lo que sea estrictamente esencial.
Obligar de primeras a ingresar nuestros datos genera rechazo, es más recomendable preparar una especie de visita guiada, reflejando el propósito del producto y destacando los elementos que requieran de alguna explicación adicional.
A nadie nos gusta sentirnos como Sheldon Cooper en la cola del departamento de tráfico, con un montón de dudas a la hora de rellenar un formulario. Los siguientes consejos básicos servirán de guía pero, como siempre en diseño de interfaces y experiencia de usuario, hay que adaptarse a cada tipo de negocio y producto, ya que las necesidades de uno pueden ser muy diferentes a las de otro.
Menos es más
- Descartar cualquier elemento que distraiga (menús, imágenes de fondo…). Lo que se pretende es que el usuario esté centrado en rellenar el formulario y enviarlo.
- Un botón para iniciar sesión, por si el usuario eligió el registro por error, y otro de ayuda, con respuestas a las preguntas más frecuentes, debería bastar.
Lo bueno, si breve, dos veces bueno
- No ponerle una señal de stop al usuario con un formulario kilométrico. Si, por ejemplo, se quiere incluir un campo para el nombre, puede etiquetarse como “Nombre completo”, ahorrando así un campo extra para los apellidos.
- Repetir campos para usarlos como confirmación (ya sea el correo electrónico o la contraseña) está de más. Si la política de empresa lo requiere es preferible desplegarlo una vez se haya ingresado el primer campo duplicado.
- Incluir la opción del registro y login social agiliza sobremanera la autenticación.
Diseño en cascada
- Disponer los campos del formulario en una única columna para poder rellenarlos de arriba a abajo, con la etiqueta situada encima del campo de texto. Evitar posicionar tanto campos uno al lado de otro como etiquetas a la izquierda.
- Siempre que sea posible, mostrar primero los campos obligatorios y/o más fáciles de rellenar. Se puede hacer una agrupación o, en caso de que el formulario sea más largo de lo habitual, dividirlo en pasos (no más de 4).
Toda ayuda es poca
- Señalar de forma clara y simple los campos requeridos. Incluir una ayuda visual si el valor a ingresar en un campo requerido es difícil de encontrar.
- A la hora de elegir entre un listado de opciones, si dicha lista es corta, anteponer el uso de selectores al de desplegables.
- Dejar que en la web el autocompletado tome el mando. En app, para agilizar el rellenado, se podría incluir la transición automática entre campos.
- Otra buena práctica es marcar el campo que tiene actualmente el foco, sobretodo en app, ya que los dispositivos son más pequeños y es posible que no se vea el formulario completo.
Validación en línea
- Los mensajes de error poco claros son una fuente de frustración para cualquiera. Estos mensajes no tienen que culpar directamente al usuario y se deben ubicar en una posición intuitiva.
- Asegurarse de que el usuario sepa corregir fácilmente los errores, y no avisar de ellos cuando el formulario esté completamente rellenado y se intente enviar. Mejor validar y alertar en cuanto un campo erróneo haya perdido el foco.
- Se gana en experiencia de usuario si un formato incorrecto para un teléfono, un código postal, una tarjeta de crédito, etc. se corrige en el transcurso del envío, de manera que sea transparente para el usuario.
Políticas de seguridad en la contraseña
- No exceder las reglas a la hora de ingresar una contraseña. El hecho de obligar a un usuario a que su contraseña cumpla con unos requisitos que le impiden usar su contraseña habitual, o inventar una nueva que probablemente olvide, empuja a que se abandone el registro, y con ello el uso de la web o app.
- Es más óptimo indicar visualmente la fuerza de la contraseña, porque esto no impide que el usuario se pueda registrar si la contraseña no es lo suficientemente segura, pero sí que advierte de la poca o mucha fiabilidad de la misma.
- Incluir la opción de mostrar/ocultar la contraseña.
- En las apps, hacer uso del reconocimiento de huella/rostro para autenticarse es un adelanto a tener muy en cuenta. El flujo sería el siguiente:
- Registro o inicio de sesión con correo electrónico y contraseña.
- Una vez dentro de la app presentar la sección de autenticación por huella/rostro (con la elección de no volver a mostrar).
- Cuando se vuelva a enseñar el formulario de acceso incluir la acción de autenticación por huella/rostro.
Envío de correos electrónicos
- Evadir la confirmación de registro por correo electrónico. En caso de ser esencial confirmar el registro hacerlo por métodos que no requieran un cambio de contexto, como un sms si se trata del registro en una app.
- Incluir siempre una opción para recuperar la contraseña. Si el usuario ya ha ingresado su correo electrónico en el login sería bueno trasladar ese valor a la pantalla de restablecimiento.
- Enviar un enlace de restaurar contraseña, no una contraseña autogenerada, y hacer login automático tras este restablecimiento.
¿Qué beneficio se obtiene?
- Mantener la privacidad y seguridad de nuestros datos es una lucha constante. A los usuarios nos gusta saber para qué se va a usar nuestra información personal. Por muy escueto que sea el formulario, es recomendable dar una breve explicación de por qué vale la pena rellenar el registro.
- Tranquilizar al usuario explicándole que sus datos estarán seguros, y ofrecer una política que se acepte al pulsar en enviar, evitando así una confirmación adicional.
- Sobra tiempo para rellenar más datos en una sección de perfil si el usuario lo considera oportuno.
- Y como buen proceso anfitrión, como es el acceso a nuestra web o app, no hay que olvidar dar la bienvenida al usuario una vez haya accedido.