Ejemplos de mensajes de error: malos, buenos y excelentes, reescritos
Ocho mensajes de error que suben de un código crudo a un texto con el que la gente puede actuar. Cada peldaño explicado, la fórmula de tres líneas detrás de los excelentes y una lista de verificación para tu próxima revisión.
Un gran mensaje de error le dice a la gente tres cosas: qué pasó, por qué pasó y qué hacer a continuación, con un botón que lo haga. La mayoría de los productos se queda en la primera, y muchos nunca pasan de un código. Aquí tienes ocho mensajes de error que suben de malo a excelente, la razón detrás de cada peldaño y una fórmula que puedes usar en el próximo que escribas.
Qué cambia de malo a excelente
Malo
Excelente
El mensaje malo está escrito para el servidor. Un 403 es un código de estado real y es exacto, pero la persona que lo lee no aprende nada útil. El mensaje excelente está escrito para la persona: nombra el archivo, explica que es privado, dice quién puede abrirlo y convierte el siguiente paso en un toque.
Cada peldaño añade una cosa:
| Peldaño | Qué le da a la gente | Qué sigue dejando fuera |
|---|---|---|
| Malo | Un código o una palabra vaga como "falló" | Qué pasó, por qué, qué hacer |
| Bueno | Qué pasó, con palabras sencillas | Por qué, y qué hacer a continuación |
| Excelente | Qué pasó, por qué y el siguiente paso en un botón | Nada que necesiten decidir |
1. Sin acceso
Malo
Error 403.
Un código de estado. Correcto para un desarrollador, vacío para todos los demás.Bueno
No tienes acceso a este archivo.
Dice qué pasó, con las palabras del lector. Lo deja atascado.Excelente
Este archivo es privado. Pídele acceso a Sam y te avisaremos cuando sea tuyo.
Dice por qué (es privado), quién puede arreglarlo (Sam) y qué ocurre después. El botón es Solicitar acceso, así que pedirlo cuesta un toque.
Un 403 significa que la persona ha iniciado sesión pero no tiene permiso. Esa distinción importa para el texto: no necesita volver a iniciar sesión, necesita que alguien comparta el archivo.
2. Una tarjeta rechazada
Malo
Transacción fallida.
"Fallida" sin sujeto. ¿Fue la tarjeta, la tienda, la conexión?Bueno
Tu tarjeta fue rechazada.
Nombra la causa sobre la que la gente puede actuar.Excelente
Tu tarjeta fue rechazada. Tu banco dijo que no. Prueba con otra tarjeta o pide a tu banco que la apruebe.
Pone el problema en el banco, no en la persona, y da dos salidas. El botón es Usar otra tarjeta, la más rápida.
Los errores de pago implican más dinero y más vergüenza. No culpes a nadie y mantén la salida en la misma pantalla.
3. Un archivo demasiado grande
Malo
Error de carga.
Puede ser cualquier cosa, así que la gente reintenta el mismo archivo y se topa con el mismo muro.Bueno
Este archivo es demasiado grande.
La causa, pero no por cuánto.Excelente
Este video pesa 2,4 GB. El límite es 2 GB. Recórtalo un poco e inténtalo de nuevo.
Ambas cifras, para que se vea que la diferencia es pequeña. El botón es Recortar video, que lo arregla sin salir de la app.
Cuando hay un límite de por medio, di el límite. La gente no puede arreglar un número que nunca le dicen.
4. Quedarse sin conexión
Malo
Error de red.
Suena a que algo se rompió, y quizá a que se perdió trabajo.Bueno
Estás sin conexión.
Claro, pero la primera preocupación de cualquiera es "¿perdí mis cambios?"Excelente
Estás sin conexión. Tus cambios están guardados en este teléfono y se sincronizarán cuando vuelvas.
Responde a la preocupación antes de que se formule. El botón es Reintentar.
5. Que te cierren la sesión
Malo
Error 401: No autorizado.
"No autorizado" suena a acusación, y vuelve a ser un código.Bueno
Tu sesión caducó.
Exacto, pero "sesión" es una palabra de desarrollador.Excelente
Se cerró tu sesión. Han pasado 30 días. Inicia sesión de nuevo y te traeremos de vuelta aquí.
Explica la razón y promete que nadie perderá su lugar. El botón es Iniciar sesión.
Un 401 es el caso opuesto a un 403: la persona no ha iniciado sesión, o su inicio de sesión se agotó. Enviarla a la pantalla de inicio es la solución, y decirle que volverá donde estaba elimina el motivo para dudar.
Tres más, escritos desde cero
Las mismas reglas valen para situaciones que los cinco ejemplos anteriores no cubren. Estos tres son ejemplos propios.
Malo
Error 500. Algo salió mal.
El código no aporta nada, y "algo" admite que no sabemos qué pasó.Bueno
No pudimos guardar tus cambios.
Asume el problema y nombra lo que falló.Excelente
No pudimos guardar tus cambios. Es cosa nuestra, no tuya. Tu texto sigue aquí, así que inténtalo de nuevo en un minuto.
Dice de quién es la culpa y que no se perdió nada. El botón es Guardar de nuevo.
Malo
Demasiadas solicitudes.
Lenguaje de máquina para una persona que probablemente ya está frustrada.Bueno
Demasiados intentos. Inténtalo más tarde.
Claro, pero "más tarde" puede ser un minuto o un día.Excelente
Demasiados intentos. Por tu seguridad, el inicio de sesión se pausa durante 15 minutos. Puedes restablecer tu contraseña ahora.
Da el tiempo de espera, la razón y un camino más rápido. El botón es Restablecer contraseña.
Malo
Enlace no válido.
Sugiere que la persona escribió algo mal.Bueno
Esta invitación ha caducado.
La causa real, sin culpar a nadie.Excelente
Esta invitación ha caducado. Las invitaciones duran 7 días. Pídele a Maya que te envíe una nueva.
Dice por qué caducan los enlaces y quién puede arreglarlo. El botón es Pedir una nueva invitación.
La fórmula: qué pasó, por qué, qué hacer a continuación
Todos los mensajes excelentes de arriba caben en las mismas tres líneas:
[What happened, in the reader's words.]
[Why, in one short sentence.]
[What to do next.] [Button: the next step as a verb]
| Mensaje | Qué pasó | Por qué | Qué hacer a continuación |
|---|---|---|---|
| Sin acceso | Este archivo es privado | Solo las personas invitadas pueden abrirlo | Solicitar acceso |
| Tarjeta rechazada | Tu tarjeta fue rechazada | Tu banco dijo que no | Usar otra tarjeta |
| Demasiado grande | Este video pesa 2,4 GB | El límite es 2 GB | Recortar video |
| Sin conexión | Estás sin conexión | Los cambios están guardados en este teléfono | Reintentar |
| Sesión cerrada | Se cerró tu sesión | Han pasado 30 días | Iniciar sesión |
La línea del "por qué" es la que los equipos recortan primero, y la que evita el siguiente ticket de soporte.
Una lista de verificación para tu próxima revisión
- Sin códigos crudos. Deja 403, 401 y 500 en los registros, fuera del mensaje.
- Sin culpar. "Tu banco dijo que no", no "Introdujiste una tarjeta no válida".
- Di los números. Un límite de tamaño, un tiempo de espera, un número de días.
- Un botón, nombrado con un verbo. "Recortar video", no "OK".
- Di qué se conservó. Si no se perdió nada, dilo.
- No confirmes cuentas al iniciar sesión. "Contraseña incorrecta" le dice a un extraño que la cuenta existe. Di mejor "Ese correo y esa contraseña no coinciden".
- Después revisa el color. Las palabras llevan el error; el color y un icono las apoyan. Nuestro paper sobre el color de los mensajes de error tiene los rojos que usar en modo claro y oscuro.
Paper
Color de los mensajes de error: los 8 rojos para usar en lugar de #FF0000
El hermano de este paper: aquí están las palabras, allí los colores, los iconos y el código.
FAQ
¿Cómo se escribe un buen mensaje de error?
Di qué pasó con palabras sencillas, por qué pasó en una frase corta y qué hacer a continuación. Pon el siguiente paso en un botón nombrado con un verbo, como Reintentar o Usar otra tarjeta.
¿Qué ejemplos hay de malos mensajes de error?
Códigos crudos y palabras vagas: "Error 403", "Error 401: No autorizado", "Transacción fallida", "Error de carga" y "Error de red". Todos son exactos y ninguno dice a la gente qué hacer.
¿Deben los mensajes de error mostrar códigos de error?
No como el mensaje. Un código ayuda a soporte y a los desarrolladores, así que déjalo en los registros o en letra pequeña bajo el mensaje real si tu equipo de soporte lo pide.
¿Cuál es la diferencia entre un mensaje de error 401 y uno 403?
Un 401 significa que la persona no ha iniciado sesión o su sesión caducó, así que el mensaje debe llevarla a iniciar sesión. Un 403 significa que ha iniciado sesión pero carece de permiso, así que el mensaje debe decirle quién puede darle acceso.
¿Por qué un error de inicio de sesión no debe decir "contraseña incorrecta"?
Porque confirma que la cuenta existe, lo cual ayuda a quien va adivinando cuentas. Las guías de seguridad recomiendan un único mensaje genérico para un correo o una contraseña incorrectos.
Fuentes
- Códigos de estado HTTP: 403 Forbidden y 401 Unauthorized en MDN.
- Error-message guidelines, Nielsen Norman Group.
- Writing, Apple Human Interface Guidelines.
- Authentication and error messages, OWASP Cheat Sheet Series.
- Publicado por primera vez como carrusel en UX Brainy.
Want every error, empty and loading state written and designed as one system? Our team designs product UI with the words in it from the first draft.
Get Started
