Usabilidad web: Mensajes de error en formularios

Mensajes de error en formularios

En esta entrada os voy a hablar de cual es la mejor manera de colocar los mensajes de error en los formularios.

¿Dónde colocamos los mensajes de error en los formularios?

Es importante conocer donde podemos colocar los errores, ya que si no se colocan donde los usuarios esperan verlos, les será imposible completar el formulario.

Cuando los usuarios cometen errores, deben comprender cuáles son esos errores para poder corregirlos y volver a enviar el formulario. Quieren completar el formulario, pero si hacerlo requiere mucho esfuerzo, se irán del sitio web.

¿En la parte superior o alineados con los campos erróneos?

Las dos ubicaciones más comunes para los mensajes de error se encuentran en la parte superior del formulario y en línea con los campos erróneos.

¿Qué ubicación es más intuitiva para los usuarios?

Mostrar todos los mensajes de error en la parte de arriba del formulario produce mucha carga cognitiva en la memoria del usuario. Esto obliga a los usuarios a recordar cada mensaje de error para cada campo erróneo.

Para reducir la carga cognitiva de los usuarios, hay que mostrar los mensajes de error alineados con los campos erróneos. Así pueden corregir los errores de forma más rápida y sencilla.

Ubicación de los mensajes de error de preferencia del usuario

Colocar los mensajes de error en línea con los campos erróneos es mucho más cómodo para los usuarios. Prefieren que los mensajes de error se ubiquen a la derecha del campo.

Los mensajes de error colocados a la izquierda del campo no son buenos para los usuarios. Los mensajes de error colocados sobre el campo causan mayor carga cognitiva seguida de mensajes de error debajo del campo, por lo tanto dificulta la usabilidad de los campos de formulario.

Por qué a la derecha del campo es mejor

Es importante entender por qué es preferible y esperado colocar los mensajes de error a la derecha del campo. De esta forma, los diseñadores pueden educar mejor a los demás sobre cómo se comportan los usuarios cuando toman decisiones de diseño.

El sistema de lectura occidental va de izquierda a derecha. Cuando los usuarios mueven los ojos de la entrada al mensaje de error, se produce una progresión natural que requiere poco esfuerzo mental y visual. Al mover los ojos desde el mensaje de error a la entrada para la corrección también sigue el flujo natural para releer el texto.

mensaje de error a la derecha del campo

Por qué a la izquierda del campo es peor

Colocar mensajes de error a la izquierda del campo va en contra del sistema de lectura occidental. Los usuarios mueven los ojos en la dirección opuesta al flujo de lectura natural cuando aparece el mensaje de error. En lugar de producirse una progresión natural, es antinatural y no es óptima, cuando los usuarios lo que desean es completar el formulario.

Tampoco es intuitivo porque los usuarios esperan elementos de mayor prioridad en el lado izquierdo. Colocar el mensaje de error a la izquierda lo hace más importante que el campo. Pero el campo es más importante porque los usuarios necesitan enfocarse en él para rellenarlo.

Mensaje de error a la izquierda del campo

Por qué sobre el campo aumenta la carga cognitiva

Los usuarios experimentan una mayor carga cognitiva con mensajes de error sobre el campo (es decir, formularios con etiquetas alineadas en la parte superior). Esto es causado por una combinación del mensaje de error y el texto de la etiqueta del campo que confunde a los usuarios.

La proximidad de los dos textos crea un ruido visual que distrae a los usuarios cuando intentan leer el mensaje de error o la etiqueta. Ver ambos textos en su campo de visión hace que sea difícil concentrarse solo en uno de ellos y puede confundirlos.

Mensaje de error encima del campo

Ubicación de los mensajes de error para formularios móviles

Las pantallas móviles carecen del espacio horizontal para mostrar un mensaje de error y un campo, uno al lado del otro. Esto significa que los mensajes de error a la derecha del campo no son la mejor ubicación en los formularios móviles. En su lugar, hay que colocar los mensajes de error debajo del campo.

Mensaje de error abajo del campo

Aunque no se corresponde con el flujo de lectura natural de izquierda a derecha del usuario, sí se corresponde con el flujo de lectura natural de arriba hacia abajo.

Cuando los usuarios leen texto, mueven los ojos de izquierda a derecha bajando una página. Los mensajes de error debajo del campo son menos incómodos que en el campo, porque siguen la progresión de lectura vertical.
Colocar el mensaje de error demasiado cerca de la etiqueta del campo después puede aumentar la carga cognitiva cuando los usuarios leen el texto.

A la derecha o debajo de campo: ¿Cuál es el mejor?

Ambos, a la derecha del campo y debajo del campo son ubicaciones óptimas para los mensajes de error.

¿Pero qué ubicación se debería usar? 

Si deseamos que la implementación tarde menos tiempo en hacerse para ordenadores y dispositivos móviles, la mejor opción es poner los mensajes de error debajo del campo. Implementarlos para ordenadores también los hará utilizables para dispositivos móviles. Si queremos implementar mensajes de error para ambos dispositivos, la mejor opción es colocarlos a la derecha del campo en el escritorio y debajo del campo para dispositivos móviles.

Colocación de mensajes de error intuitivos

Los mensajes de error deben corresponderse con el flujo de lectura del usuario, por lo que los errores requieren menos esfuerzo cognitivo para corregirlos. Cuando los usuarios trabajan y piensan menos, pueden completar el formulario más rápido. Cuanto más rápido ayudemos a los usuarios a superarlo, antes podrán pasar a lo que quieran hacer.

Si quieres saber más sobre los formularios puedes leer la entrada sobre los marcadores de posición.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *