Cómo diseñar mensajes de error que reduzcan la frustración
Cómo diseñar estados de error de los que las personas pueden recuperarse: ubicación, sincronización, redacción, preservación de la entrada, accesibilidad y movimiento, basado en investigaciones de usabilidad.
Idea clave
Un buen mensaje de error es visible y se coloca junto al problema, escrito en un lenguaje sencillo, dice cómo solucionarlo, mantiene lo que la persona ya escribió y nunca la culpa. Muéstrelo cuando la persona haya terminado con un campo o lo haya enviado, no mientras todavía esté escribiendo, y asegúrese de que los lectores de pantalla lo anuncien.
las directrices
Nielsen Norman Group resume los mensajes de error efectivos como altamente visibles, constructivos y respetuosos con el esfuerzo del usuario. En la práctica eso significa:
- Coloque el mensaje al lado del campo o elemento con el problema.
- Utilice un lenguaje sencillo y específico: "A este número le falta un dígito", no "Entrada no válida".
- Ofrezca una solución: qué formato se espera, qué probar a continuación.
- Conserve lo que la gente escribió para que puedan editarlo en lugar de empezar de nuevo.
- No culpes: evita palabras como inválido, ilegal o incorrecto.
Momento
Mostrar un error antes de que alguien haya terminado es uno de los errores más comunes. NN/g llama a los errores prematuros un patrón hostil, como calificar un examen antes de que el estudiante haya terminado. Valide un campo cuando la persona lo abandone o envíe el formulario, luego actualice el mensaje en vivo mientras lo corrige.
Errores que no son de formularios
Para errores del sistema, como un guardado fallido o una conexión perdida, diga qué sucedió, qué se conservó y qué puede hacer la persona: volver a intentarlo, trabajar sin conexión o comunicarse con el soporte. Evite los códigos de error por sí solos; Si necesita uno de apoyo, muéstrelo junto con una explicación humana.
Accesibilidad
No confíes únicamente en el rojo: añade un icono y un texto. Conecte el mensaje a su campo para que los lectores de pantalla lo lean con el campo y muevan el foco al primer error, o a un resumen de errores, después de un envío fallido.
Movimiento en estados de error
Una sacudida breve o un cambio de color pueden llamar la atención sobre el campo que tiene el problema, pero sea breve, no lo repita con cada pulsación de tecla y reemplace el movimiento con un cambio de color o ícono cuando el movimiento reducido esté activado. El mensaje en sí importa más que la animación.
Principios clave para recordar
- Coloque los errores al lado del problema, en palabras sencillas, con una solución.
- Mantener lo que la gente escribió
- Validar después de finalizar un campo, no mientras se escribe
- Nunca confíes únicamente en el color; conectar mensajes para lectores de pantalla
- Mantenga el movimiento de error breve y respete el movimiento reducido.
Preguntas frecuentes
Fuentes
- Error-Message Guidelines — Nielsen Norman Group
- Indicators, Validations, and Notifications — Nielsen Norman Group