Páginas 404 y estados vacíos: convertir un tropiezo en un momento de marca

Una de las páginas de una web que más nos gusta diseñar en el estudio es la que, en teoría, nadie debería ver. La 404. Tiene algo de nota a pie de página escrita con cariño: casi nadie llega a ella a propósito, pero quien llega está un poco desorientado, quizá algo molesto, y en ese momento un buen texto y un par de caminos claros cambian por completo la sensación.

Me pasa a menudo que, al revisar la web de un cliente, la 404 es la plantilla por defecto del servidor: letras negras sobre fondo blanco, «Not Found», en inglés, sin logo ni menú. Es como si en una tienda preciosa, al equivocarte de puerta, aparecieras en un almacén con la luz apagada. No pasa nada grave, pero el hechizo se rompe.

Esta guía va de esos momentos: la página 404 y su familia, los estados vacíos, las pantallas que aparecen cuando no hay resultados, no hay pedidos o aún no hay nada que mostrar. Cómo estructurarlos, qué escribir, qué pide la parte técnica y cómo aprovecharlos para que la marca se sienta cerca justo cuando más falta hace.

01Por qué la gente acaba en una página 404

Una página 404 aparece cuando alguien pide una dirección que el servidor no encuentra. Las causas son casi siempre las mismas, y conocerlas ayuda a diseñar la respuesta:

• →Contenido movido o eliminado tras un rediseño, un cambio de estructura de URL o la retirada de un producto.
• →Enlaces externos antiguos desde otras webs, redes sociales o correos que apuntan a direcciones que ya no existen.
• →Errores al escribir una dirección a mano o al copiarla de un folleto.
• →Enlaces internos rotos que nadie ha revisado después de cambiar una página.

Las dos primeras se pueden prevenir en gran parte con redirecciones, como explicamos en la guía de rediseño web sin perder SEO. Las otras dos siempre van a existir. Por eso la 404 merece estar diseñada.

02Anatomía de una página 404 que ayuda

Una buena 404 cumple cuatro funciones, en este orden: explicar qué ha pasado, tranquilizar, ofrecer caminos y, si encaja, regalar un pequeño momento de marca.

1. 01Mantener la navegación de la web. Cabecera, menú y footer siguen ahí. La persona sigue dentro de tu casa y tiene todas las puertas a mano.
2. 02Un titular claro en lenguaje humano. «No encontramos esta página» o «Esta página se ha mudado». El número 404 puede aparecer, pero no tiene que protagonizar el mensaje: mucha gente no sabe qué significa.
3. 03Una frase que explique y quite peso. «Puede que el enlace sea antiguo o que la dirección tenga una errata. Vamos a ayudarte a encontrar lo que buscabas».
4. 04Un buscador, si la web tiene suficiente contenido para que tenga sentido.
5. 05Tres a cinco enlaces útiles: las secciones más visitadas, los servicios principales, la tienda, el blog.
6. 06Una vía de contacto para quien prefiera preguntar directamente.
7. 07Un toque de marca: una ilustración, una foto, una frase con la voz de la casa.

Enlaces que de verdad sirven

La tentación es poner «Volver a la página de inicio» y ya. Funciona, pero se puede hacer mejor. Mira en tu analítica qué páginas visita más la gente y ofrece esas. En un restaurante: carta, reservas, cómo llegar. En una tienda: categorías principales y novedades. En un estudio: proyectos, servicios, contacto.

Si la web lo permite, la 404 puede ser aún más útil y sugerir contenido relacionado con la URL rota. Si alguien llega a /servicios/diseno-de-logotpo con una errata, buscar las palabras de la dirección y proponer «¿Buscabas Diseño de logotipo?» resuelve el problema al instante.

Accesible y en el idioma correcto

La 404 se lee igual que cualquier otra página, también con lector de pantalla. Lo que funciona es que el titular sea un h1 real con el mensaje («No encontramos esta página»), que el title del documento lo repita para que se anuncie al cargar, y que la ilustración, si es decorativa, lleve el texto alternativo vacío. Si hay una animación, que respete la preferencia de movimiento reducido del sistema.

En webs multidioma, la 404 debe aparecer en el idioma de la sección desde la que llega la persona. Si alguien navegaba en inglés y pide /en/rooms/suite-sea-view con una errata, lo natural es que le respondamos en inglés y le propongamos las habitaciones en inglés. Parece obvio, pero es de los detalles que más se escapan, y lo comentamos también en la guía de web multidioma bien hecha.

03El tono: humor, calidez o sobriedad según la marca

Las 404 son famosas por sus guiños creativos: ilustraciones animadas, juegos, frases ingeniosas. Pueden ser maravillosas, siempre que encajen con la personalidad de la marca y no se interpongan en el camino.

Un despacho de abogados no necesita un chiste, y un bar de tapas puede permitírselo. La clave es que el mensaje principal se entienda en dos segundos y que la creatividad sea un regalo, no un obstáculo. Si la voz de tu marca está bien definida, la 404 sale casi sola; lo contamos en la guía sobre el tono de voz de marca.

04La parte técnica: que la 404 sea una 404 de verdad

Una página de error bonita tiene que responder también con el código HTTP correcto. Si el servidor devuelve un código 200 (todo bien) en una página que dice «no encontrado», Google la considera un soft 404: una página de error disfrazada que puede acabar indexada o confundir al rastreador.

Comprobaciones básicas

1. 01Código 404 o 410. Cualquier URL inexistente debe devolver 404. Si has eliminado contenido para siempre, 410 es aún más claro.
2. 02Misma URL. La página de error se muestra en la dirección que pidió el usuario, sin redirigir a /404. Así puede corregir la errata en la barra.
3. 03Sin indexar. Al devolver 404, los buscadores no la indexan. No hace falta añadir noindex, aunque tampoco molesta.
4. 04Ligera. Debe cargar rápido incluso si falla todo lo demás, sin depender de llamadas pesadas.

Puedes comprobar el código con las herramientas de desarrollo del navegador, en la pestaña Red, o desde la terminal:

curl -I https://tudominio.es/esta-pagina-no-existe
HTTP/2 404
content-type: text/html; charset=utf-8

En un servidor Apache se configura con una línea en .htaccess (ErrorDocument 404 /404.html); en Nginx, con error_page 404 /404.html;. Los frameworks modernos lo resuelven con su propia convención: en Next.js, por ejemplo, el archivo not-found define la página y el sistema devuelve el código correcto. En WordPress, la plantilla 404.php del tema.

Medir para mejorar

Una 404 también es una fuente de información muy valiosa:

• →Search Console, en el informe de indexación de páginas, lista las URL que devuelven «No encontrado (404)» y las detectadas como soft 404.
• →GA4 registra las visitas a la 404 si la página lleva el código de analítica. Filtrando por su título («Página no encontrada») y añadiendo la dimensión de página de referencia, sabrás desde dónde llega la gente.
• →Rastreadores como Screaming Frog encuentran los enlaces internos rotos antes que tus visitantes.

Una rutina mensual de cinco minutos (mirar las 404 con más visitas y decidir si merecen una redirección) mantiene la web sana sin esfuerzo.

05Estados vacíos: cuando no hay nada que mostrar

Un estado vacío es cualquier pantalla o zona de una web o aplicación que, en un momento dado, no tiene contenido: una búsqueda sin resultados, un carrito vacío, un panel de cliente recién creado, una bandeja de mensajes sin mensajes. Parecen detalles menores, pero son momentos clave. Una pantalla en blanco sin explicación hace pensar que algo ha fallado.

Hay cuatro tipos principales, y cada uno pide un mensaje distinto:

Cómo diseñar un buen estado vacío

1. 01Explica qué es este espacio y qué aparecerá en él.
2. 02Ofrece la acción para llenarlo, con un botón claro: «Añadir el primer producto», «Ver la carta».
3. 03Acompaña con un elemento visual discreto, una ilustración o un icono de la marca, sin robar protagonismo a la acción.
4. 04En búsquedas, ayuda a reformular: sugerencias, búsquedas populares, quitar filtros con un clic. Profundizamos en ello en la guía de UX de la búsqueda interna.
5. 05En errores, da una salida: un botón de reintentar y, si persiste, una vía de contacto.

Los estados vacíos se diseñan dentro del sistema de componentes, como una variante más de cada lista, tabla o panel. Cuando se dejan para el final, acaban siendo una pantalla en blanco.

06Checklist para revisar tu 404 hoy mismo

Escribe en tu navegador tu dominio seguido de cualquier palabra inventada y comprueba:

1. 01¿Aparece tu diseño, con logo, menú y footer?
2. 02¿El titular se entiende sin saber qué es un 404?
3. 03¿Hay un buscador o enlaces a las secciones más visitadas?
4. 04¿Puedes contactar desde ahí?
5. 05¿Está en el mismo idioma que la página de la que vienes?
6. 06¿El servidor devuelve el código 404?
7. 07¿Carga rápido y se ve bien en el móvil?
8. 08¿Suena a tu marca?

Si respondes que sí a todo, tienes una de las 404 más cuidadas de tu sector. Si no, es de las mejoras más rápidas y agradecidas que puedes hacer en una web.

07Los detalles que hacen que una web se sienta cuidada

Las páginas de error y los estados vacíos son pequeños, pero dicen mucho de quién está detrás: que alguien ha pensado en ti incluso cuando las cosas no salen como esperabas. En SIMA los diseñamos como parte del sistema desde el principio, con el mismo cuidado que la home, en nuestros proyectos de diseño web y experiencia digital. Si quieres darle una vuelta a la 404 de tu web o a esas pantallas que nadie ha diseñado todavía, escríbenos y lo vemos juntos.