Pautas para mostrar errores en formularios

Los formularios son uno de los elementos básicos en el diseño de productos digitales para introducir y enviar datos. En ellos los usuarios cometen errores, los cuales como diseñadores de experiencia de usuario debemos ayudar a eliminar.

La forma más sencilla de ayudar a evitar que los usuarios cometan errores es mostrarles dónde lo han hecho mal y ayudarles a que lo hagan bien mediante mensajes explicativos.

En Nielsen Norman han escrito un artículo sobre el tema de gran calidad, en él nos explican cómo debe ser la corrección de un error y qué pautas debemos de seguir para mostrarlo y que los usuarios lo puedan corregir. Nielsen Norman basa su artículo en el research y en su experiencia de años.

Nielsen Norman nos explica que hay un flujo de corrección de errores que deberíamos seguir siempre:

1. El mensaje de error debe de ser fácil de ver y de entender
2. El campo/s del error deben de ser fáciles de localizar
3. Los usuarios no deben tener que memorizar las instrucciones para solucionar el error

Ese debería ser el flujo para la corrección de errores en un formulario, nada de mensajes de error crípticos, nada de mensajes que no se sabe a qué campo se refieren y por supuesto nada de instrucciones complejas que el usuario no pueda seguir.

Aún con estos tres pasos básicos y esenciales de corrección de errores en formularios Nielsen Norman nos recomienda incorporar otras medidas para mejorar cómo mostramos los errores a nuestros usuarios.

Esas pautas son:

1. Ten como objetivo la validación adjunta: toda la validación debe de ser adjunta, es decir aparecer junto al campo donde se produjo el error para facilitar la corrección del mismo.
2. Indica la entrada de datos correcta en campos complejos: en campos complejos como puede ser la introducción de contraseña o el nombre de usuario, lo ideal es que se señale cuando ha sido correctamente introducida la contraseña o se ha elegido un nombre no repetido.  
3. Mantén los mensajes de error junto a los campos: aunque no incluyas validación adjunta, mantén los mensajes de error junto a los campos para que el usuario pueda saber a qué se refiere el error.
4. Usa el color para diferenciar los mensajes de error del estado normal de un campo: rojo es el color de los errores, amarillo o naranja para las advertencias y verde o azul para las validaciones correctas. Usa este código de color que es el universalmente aceptado.
5. Añade iconografía o animación sutil para un escaneado sencillo: para que los usuarios se fijen en los campos usa pequeños iconos de advertencia o usa animaciones sutiles que los usuarios usen como pistas visuales.
6. Usa modales o diálogos de confirmación con moderación: los modales o diálogos de confirmación no son una buena manera de mostrar la información de los errores ya que los usuarios deben memorizar, úsalo con moderación y sólo en los casos en que las instrucciones sean claras y sencillas.  
7. No valides los campos antes de que la entrada esté completa: es molesto que un campo te dé error antes de que hayas acabado de escribirlo.
8. No uses los resúmenes de validación como el único indicador de un error: los resúmenes de validación son unas líneas que aparecen arriba del formulario y que indican donde ha habido errores, es una manera fácil de saber cuántos errores hay pero además de éste hay que añadir validaciones adjuntas a los campos para que los usuarios puedan corregirlos.
9. No uses tooltips para indicar errores: las tooltips a veces se usan para indicar errores, se pone un icono de advertencia y cuando pasas por él te indica el porqué ha fallado. Nielsen Norman desaconseja este método porque los usuarios tienen que hacer acciones complejas para poder enmendar sus errores.
10. Proporciona ayuda extra para los errores repetidos: si un error se repite más de 3 veces en un mismo rellenado de un formulario es indicativo de un problema grave en la interfaz de usuario. Indicar un enlace donde hay información de ayuda está bien, pero mejor es observar los errores y actuar en consecuencia para arreglar los fallos de usabilidad.

Los usuarios pueden cometer errores pero es nuestra labor como diseñadores de UX el idear las formas de que ellos no los hagan. Además debemos ayudar a los product managers a mejorar el diseño de producto.  

Desde el Estudio te recomendamos seguir estas pautas de Nielsen Norman para mejorar cómo se muestran los errores a tus usuarios para ayudarles a conseguir sus objetivos.