Los formularios son uno de los componentes complejos que debemos de definir como diseñadores UX o de Experiencia de Usuario. Los formularios son complejos pero necesarios en muchas ocasiones en los productos digitales.
Los formularios solemos utilizarlos para iniciar sesión, registrarnos, comprar productos en un Ecommerce, enviar comentarios o ingresar nuestra información personal. En numerosas ocasiones, cuando los usuarios ejecutan este tipo de tareas concretas, les genera gran frustración debido a los errores y a su mal tratamiento y resolución.
Mensajes de error en formularios
Los seres humanos a menudo cometemos errores. Cuando sucede al usar algo nos sentimos frustrados si no entendemos cuál es la razón o el hecho que precede al error.
Cuando los usuarios están ejecutando la tarea de completar un formulario, quieren realizarla sin hacer mucho esfuerzo o cambiarán de opinión.
Si existen errores mientras se ejecuta la tarea, tanto por parte del usuario como del sistema, los usuarios deben de comprender cuáles son esos errores para poder corregirlos y enviar el formulario correctamente rellenado.
Los mensajes de error son un indicador del estado del sistema. Les permite a los usuarios saber que se encontró uno o varios obstáculos y arrojan indicaciones para poder solucionarlo.
Para que los mensajes de error en un formulario sean efectivos, las personas, deben verlos, comprenderlos y poder actuar sobre ellos de manera fácil y sencilla.
Cabe recordar que una de las reglas de los Análisis Heurísitcos de Usabilidad de Jacob Nielsen es la visibilidad del sistema. Es decir, hay que comunicar lo que está sucediendo a los usuarios, más si cabe, cuando es un error.
Según Jacob Nielsen existen tres puntos a tener en cuenta para mostrar errores en un formulario:
- El mensaje de error debe de ser fácil de ver y de entender.
- El campo o los campos del error se deben de localizar fácilmente.
- Los usuarios no deben de tener que memorizar la manera para solucionar el error en el formulario.
Pautas y claves para mostrar errores en formularios
Teniendo en cuenta los 3 puntos básicos mencionados anteriormente, a continuación, se recogen una serie de pautas y claves para mostrar los errores en los formularios.
1. Utiliza la validación en línea o campo a campo
Siempre que sea posible es mejor utilizar la validación en línea o campo a campo. Es mejor mostrar el error en el campo del formulario cuando el usuario haya terminado de rellenar o completar ese campo. El mensaje de error debe aparecer cerca del campo.
2. Indica la entrada de datos correcta en campos complicados o complejos
La validación en línea también se puede utilizar para mostrar un mensaje de éxito, como por ejemplo, cuando se pide un nombre de usuario en un registro y ese nombre está libre o sin usar. Este tipo de validación les permite a los usuarios continuar ejecutando la tarea de rellenar el siguiente campo del formulario.
Por ejemplo, a la hora de introducir en el registro la contraseña y repetir la contraseña. Se puede realizar una validación en línea con información para mostrar el nivel de seguridad de la contraseña elegida por el usuario.
3. Mantén los mensajes de error junto a los campos
Mantén siempre los mensajes de error junto a los campos para que el usuario, mientras resuelve el problema, no tenga que recordar el mensaje de error. Tenerlo visible siempre ayuda a solucionarlo de forma mas rápida y sencilla.
4. Usa el color adecuado para mostrar los errores y que se diferencie del campo con estado normal
El color rojo es el más asociado con los mensajes de error en los formulario. El naranja o amarillo se utiliza para advertencia. El verde y en ocasiones el azul, se utilizan, para el éxito.
5. Usa iconografía o microanimaciones sutiles para ayudar a los usuarios a reconocer los errores en los campos
Junto con el color, un icono a la izquierda del mensaje de error ayuda a llamar la atención del usuario. Cuando el usuario visualice el formulario el icono hará que el mensaje de error en el campo del formulario destaque mucho más por encima del resto.
6. Usa modales con precaución y sin abusar
Hay que usarlos cuando sea debido y sin abusar. Fundamentalmente, son disruptivos y el mensaje de error se muestra en una ventana que debe de cerrarse para poder corregirlo. Al cerrar la ventana, si la solución para el error es compleja, obligamos al usuario a recordarla puesto que no puede seguir visualizándola.
7. No valides el campo hasta que no esté completamente relleno
No hay que mostrar el error hasta que el usuario haya terminado con el campo y se haya movido al campo siguiente o ya no tenga el foco en ese campo. Resulta molesto ver un mensaje de error antes de tener la oportunidad de terminar de escribir.
8. No uses sólo resúmenes de validación
Este tipo de mensajes de error en los formulario aparecen en la parte superior o inferior de la página. Por norma general se muestran tras la ejecución de la acción del envío del formulario.
Son útiles pero siempre hay que utilizarlos, cuando sea posible, con la validación campo a campo o en línea.
9. No uses tooltips
No es recomendable el uso de tooltips ni de los que aparecen cuando colocas el ratón sobre un icono de alerta, ni los que aparecen en el campo y desaparecen pasados unos segundos.
10. Proporciona ayuda adicional para errores que se repiten
Si un error ocurre 3 veces o más en un solo intento de completar el formulario, es probable que exista un problema grave en al interfaz. Puede ser debido a que los mensajes de error no sean explícitos, legibles por humanos, precisos o no proporcionen un consejo constructivo para solventar el error.
En estos casos ofrecer un enlace a una sección de ayuda es necesario.
Créditos
How to Report Errors in Forms: 10 Design Guidelines
The Best Place for Error Messages on Forms
Error Messages
Creating Error Messages | Best practice in UX Design