Diseñar una página de error 404 que retenga a los visitantes

Haces clic en un enlace, esperando una página, y en su lugar obtienes una fría pantalla gris que dice "404 Not Found" y nada más. Por un momento te preguntas si escribiste algo mal, luego te encoges de hombros y presionas el botón de retroceso. Ese pequeño momento de confusión ocurre millones de veces al día en la web, y la mayoría de las veces el visitante simplemente se va. La página que lo causó fue casi seguramente un añadido de última hora, no diseñada por nadie y notada por todos en el peor momento posible.

Aquí está lo que la mayoría de la gente no entiende: una página de error no es un callejón sin salida, es una bifurcación en el camino. Mal manejada, expulsa a un visitante frustrado directamente. Bien manejada, los atrapa, los tranquiliza y los dirige a algo útil. En esta guía veremos por qué importan las páginas de error, qué contiene realmente una buena y cómo unas pocas decisiones de diseño pueden convertir un momento de frustración en una segunda oportunidad.

Qué es realmente una página de error

Cuando le pides a un sitio web algo que no puede darte, el servidor responde con un código de estado. Un 404 significa "esa página no existe aquí". Un 500 significa "algo falló de nuestra parte". Estos números son solo la fontanería. Lo que el visitante realmente ve es la página que hayas elegido mostrarles cuando aparecen esos códigos. Por defecto, esa página es escasa y poco amigable, pero puedes reemplazarla con algo mucho mejor.

El cambio clave en el pensamiento es dejar de tratar la página de error como una disculpa por un fallo y empezar a tratarla como una herramienta de navegación. El visitante quería algo. Tu trabajo, incluso ahora, es ayudarles a conseguirlo o a algo parecido. Ese instinto se encuentra en el centro de una buena navegación web en general, y una página de error es simplemente navegación bajo presión.

Por qué los visitantes llegan a las páginas de error en primer lugar

Ayuda entender cómo la gente termina aquí, porque la razón da forma a la solución. Algunos siguieron un enlace antiguo de otro sitio que apunta a una página que has movido o eliminado. Algunos escribieron mal una dirección web. Algunos hicieron clic en un enlace interno que nunca se actualizó después de un rediseño. Y algunos encontraron un fallo técnico genuino. Cada una de estas es una persona que quería contactarte, no un problema a ocultar.

Ese enfoque es importante. Un visitante en un 404 no está necesariamente perdido para siempre. Estaban lo suficientemente interesados como para hacer clic. La página de error es tu oportunidad de honrar ese interés en lugar de desperdiciarlo. La peor respuesta es hacerles sentir estúpidos o abandonados.

El costo oculto de ignorar las páginas de error

Debido a que las páginas de error solo aparecen en los márgenes, son fáciles de pasar por alto. Nadie muestra la página 404 en una reunión de lanzamiento. Sin embargo, a lo largo de un año, un sitio ocupado puede enviar a un número sorprendente de visitantes a ella. Si cada una de esas personas rebota, es una fuga constante de tráfico interesado, que se drena sin ser visto. Tapar esa fuga es una de las mejoras más baratas que puedes hacer, porque el tráfico ya está llegando.

La anatomía de una gran página de error

Entonces, ¿qué debe haber realmente en la página? Las mejores páginas de error comparten un puñado de ingredientes, y ninguno de ellos es complicado. Empieza con un mensaje claro y humano que explique en lenguaje sencillo que la página no se pudo encontrar, sin jerga técnica ni culpas. Luego, y esta es la parte importante, dales a las personas un lugar adonde ir.

Ofrece a la gente una salida

La característica más importante de cualquier página de error es una ruta hacia adelante. Como mínimo, eso significa un enlace claro de regreso a la página de inicio y una caja de búsqueda. Mejor aún es una lista corta de tus destinos más útiles o populares, para que el visitante pueda encontrar algo relevante de un vistazo. Piensa en ello como ofrecer algunas buenas puertas en lugar de una única salida de emergencia.

Resiste la tentación de simplemente pegar todo tu menú de navegación en la página. Una pared de opciones es abrumadora cuando alguien ya está un poco frustrado. Un puñado de enlaces cuidadosamente elegidos funciona mejor, de la misma manera que un encabezado y menú limpios y enfocados superan a uno desordenado en otro lugar de tu sitio. Guía, no inundes.

Una caja de búsqueda se gana su lugar

Si tu sitio tiene una función de búsqueda, la página de error es el lugar perfecto para destacarla. Alguien que aterrizó aquí estaba buscando algo específico. Una caja de búsqueda prominente les da el control y les permite intentarlo de nuevo por su cuenta. Para sitios con mucho contenido en particular, la búsqueda puede rescatar visitas que ninguna lista de enlaces habría capturado.

El tono importa más de lo que crees

Un error es un pequeño momento de fricción, y la fricción es exactamente cuando el tono importa más. Una página cálida y un poco juguetona puede disipar la frustración casi por completo. Una línea amigable, un toque ligero de humor o un simple reconocimiento de que esto es molesto puede convertir una mueca en una pequeña sonrisa. La gente perdona los sitios que se sienten humanos.

Dicho esto, lee el ambiente. El humor debe encajar con tu marca y la situación. Una ilustración divertida de un error 404 es adecuada para muchas empresas; un error de pago en una página de compra no es el lugar para bromas. El objetivo es la tranquilidad, y la tranquilidad puede ser cálida sin ser tonta. Sea lo que sea que elijas, la página debe seguir pareciendo parte del resto de tu sitio, manteniendo el mismo pulido profesional que cualquier otra página.

No olvides los otros errores

El 404 acapara toda la atención, pero no es el único error que merece ser diseñado. Un error 500, donde algo ha fallado realmente en el servidor, merece el mismo cuidado. Lo mismo ocurre con una página de mantenimiento que se muestra mientras actualizas el sitio. En cada caso, el principio es idéntico: explica con calma lo que está sucediendo, tranquiliza al visitante de que no es su culpa y ofrece un siguiente paso, incluso si ese paso es simplemente "inténtalo de nuevo en unos minutos".

Los errores de formulario también merecen una mención. Cuando alguien rellena un formulario incorrectamente, la forma en que lo señalas es un pequeño desafío de diseño de errores en sí mismo. Mensajes claros, específicos y amigables que señalan exactamente el problema mantienen a la gente en movimiento, por lo que un diseño de formulario web bien pensado trata los estados de error como una característica, no como una ocurrencia tardía.

Mantén las páginas de error rápidas y ligeras

Es tentador cargar una página de error con una gran ilustración animada para suavizar el golpe, y un poco de encanto visual está bien. Pero recuerda que alguien que llega a un error ya está un poco frustrado, y una página lenta y pesada solo lo empeora. Mantén la página ligera para que cargue instantáneamente. La misma disciplina de velocidad que ayuda a tus Core Web Vitals se aplica aquí: una página rápida y tranquila tranquiliza, mientras que una lenta agrava la molestia.

Rastrea y corrige lo que envía a la gente allí

Una gran página de error rescata visitantes, pero la mejor solución a largo plazo es enviar a menos personas a ella en primer lugar. La mayoría de las herramientas de análisis pueden mostrarte qué enlaces rotos se disparan con más frecuencia. Trata ese informe como una lista de tareas pendientes. Si una página antigua recibe muchos clics, configura una redirección para que los visitantes aterricen automáticamente en el lugar correcto en lugar de ver un error. Con el tiempo, esto mejora silenciosamente todo el sitio.

Este tipo de cuidado continuo es parte de mantener un sitio saludable, muy parecido al trabajo cubierto en esta guía para mantener un sitio rápido y bien mantenido. Una buena página de error es tu red de seguridad, pero arreglar los enlaces rotos detrás de ella es cómo dejas de necesitar la red con tanta frecuencia. Si deseas ayuda para auditar dónde se pierden los visitantes, es una conversación fácil de iniciar a través de la página de contacto.

Uniendo todo

Una página de error es uno de esos pequeños detalles que revela discretamente cuánto se preocupa un sitio por sus visitantes. Si se hace como una ocurrencia tardía, pierde a la gente en el peor momento posible. Hecha con reflexión, los atrapa, los tranquiliza y los dirige a un buen lugar. Dale un mensaje claro, una ruta honesta hacia adelante, una caja de búsqueda, un toque de calidez, y la misma velocidad y pulcritud que el resto de tu sitio. Un poco de atención a la página que nadie planea ver puede salvar un número sorprendente de visitas que de otro modo simplemente desaparecerían.

Preguntas frecuentes

Referencias

1. Nielsen Norman Group. "Error-Message Guidelines and Recovering Lost Users." nngroup.com.
2. Google. "Custom 404 Pages and Soft 404 Best Practices." google.com.
3. Mozilla. "HTTP Response Status Codes." mozilla.org.