Ejemplos de páginas de error 404

Si tienes una web, una de las páginas a las que probablemente menos atención le has dedicado es la de error 404. Y siento decirte que estás perdiendo una oportunidad de oro para dirigir a tu público hacia donde te interesa, hacer branding, enseñar novedades o facilitar la navegación a los usuarios que anden un poco perdidos.

Por eso hoy vamos a ver qué es una página de error 404 y algunos ejemplos que nos parecen destacables por uno u otro motivo y en los que vas a poder inspirarte para diseñar la tuya.

¿Qué es una página de error 404?

Como ya te explicábamos en este post sobre códigos de estado http más comunes, un error 404 aparece para indicar que el recurso no se encuentra. Ocurre cuando el usuario llega a una página que no existe porque nunca ha existido y tenía el enlace mal o porque existió pero la eliminamos y quedó algún enlace por ahí perdido a través del cual ha llegado a ella.

En este caso el usuario recibe un mensaje en la pantalla de página no encontrada.

Lo ideal es que tu sitio no tenga ningún error 404 y, en caso de encontrar alguno, lo arregles haciendo una redirección 301 que lleve al usuario a la nueva dirección que contiene ese recurso, si es que existe, alguna equivalente o a cualquier otra que nos interese. Es común que esta redirección apunte a la home.

Pero puede darse el caso de que exista algún error 404 y no te hayas dado cuenta. Mientras lo detectas, puedes aprovechar esa página de error para que trabaje en tu favor.

En este post vamos a recopilar ejemplos del segundo caso, para que veas cómo otros han aprovechado esa página y puedas coger ideas.

Ejemplos de páginas de error 404

Hemos hecho una recopilación de páginas de error 404 y las hemos organizado en 5 grupos: poco personalizadas, personalizadas con branding, con muchas opciones, con contenido actual y originales. En cada grupo encontrarás ejemplos reales a fecha de creación del post, es posible que pasado un tiempo estas páginas hayan cambiado, pero te dejamos capturas para que puedas verlas como las hemos encontrado ahora.

Un mensaje de error 404 sin personalizar en absoluto sería así:

Y es justo lo que pretendemos evitar que hagas. Así que toma nota que hay para todos los gustos.

Páginas de error 404 poco personalizadas

Empecemos por el caso más común: no personalizar apenas esta página. Algunas veces será debido a la temática de la web, otras a que se le ha dado poca importancia y otras al desconocimiento de quien la haya hecho.

> El Mundo.

La web de este periódico presenta una página de error 404 correcta, con algunas opciones de navegación, pero más bien sosita y que no destaca por nada. Mensaje de página no encontrada y poco más.

> Bimani 13.

Esta marca de ropa inserta el mensaje de error en su plantilla base sin más. Desde ella tenemos acceso por tanto tanto al menú de cabecera como al del footer y a partir de ahí podemos seguir navegando aunque no hayamos encontrado lo que buscábamos. También tenemos la opción de ir a la página principal, algo muy común.

> Koaters.

En este caso encontramos un poquito más de diseño en la imagen del 404, una barra de búsqueda y acceso al menú principal. Correcta también.

> Sin oficina.

Un poquito más de personalización tiene esta página de los chicos de Sin oficina, incluyendo el emoji de la 💩 , una explicación más larga de lo que ha ocurrido, una barra de búsqueda y acceso a los diferentes menús.

> Goiko Grill.

La cadena de hamburgueserías respeta la estética del resto de su web integrándola bastante bien, da la opción de ir a la página de inicio y acceso a la menú principal, así como de reservar o hacer un pedido. Más que suficiente, aunque para el buen trabajo de marketing que suelen hacer, se nos queda un pelín corta en cuanto a originalidad.

Páginas de error 404 que aprovechan su branding

Si tienes una buena imagen de marca, le das importancia al diseño y cuidas todos los detalles, que se note también en esta página. Como hacen ellas.

> Lucía Be.

Esta web de cosas bonitas lleva su estética y sus ilustraciones hasta todos los rincones, incluida su página de error 404. Así consigue que no salgamos de su mundo a pesar de haber llegado a una página que no existe. También nos ofrece la opción de hacer una búsqueda o de navegar por el menú principal.

> Freepik.

Freepik pone todos sus recursos en el asador currándose el diseño su página de error 404. Dan ejemplo de lo que puedes hacer con sus ilustraciones, vectores e imágenes a la vez que te hacen agradable haberte "perdido".

> Genially.

Esta web de presentaciones e infografías cuida mucho el diseño y hace de él su seña de identidad, por lo que no podía fallar en esta página. Sencilla, clara y bien diseñada.

> Royal Canin.

Con una estética muy acorde con lo que venden y siguiendo los colores de marca presenta una página de error 404 con la información precisa, botón para ir al inicio y acceso al menú. Cumple con todo lo necesario.

> Sistrix.

Integrada en la plantilla base de su web Sistrix presenta un diseño muy en la línea de su negocio que seguro que gusta a sus usuarios. Bien hecho.

Páginas de error 404 con muchas opciones.

"¿Te has perdido? Pues toma opciones porque no queremos que te vayas". Esto es lo que parecen pensar estas marcas, que despliegan todo su arsenal de opciones para que tengas donde elegir y no abandones su web.

> Mr. Wonderful.

La famosa marca de papelería y regalos no es precisamente seguidora del lema "menos es más" en sus diseños y su página de error 404 no iba a ir por otro camino. Además aprovecha para continuar con su estética.

> Adidas.

La famosa marca deportiva, además de darnos acceso a su menú y barra de búsqueda aprovecha para hacernos recomendaciones (totalmente actualizadas). No has encontrado lo que venías buscando, pero quizá te interese esto...

> McDonalds.

Además de ofrecerte ir a la página de inicio desde la página de error 404 de la hamburguesería puedes acceder a muchas opciones de su menú, pedir a domicilio o descargarte su app. Bien aprovechada.

> Webempresa.

Buen diseño, buena explicación de dónde te encuentras y suficientes opciones para seguir navegando. No se necesita más.

> The Body Shop.

La página de The Body Shop podría estar en varias categorías de este post: es graciosa, integra muy bien su imagen de marca y da multitud de opciones de navegación para que encuentres aquello que buscabas. Una de mis favoritas sin duda.

Páginas de error 404 personalizadas con contenido actual.

Si tu contenido cambia y se actualiza constantemente, no pierdas la oportunidad de mostrar tus novedades o promociones en esta página también. Requiere el esfuerzo extra de tener que cambiarla a menudo, pero puede merecer mucho la pena. Quizá por este esfuerzo que requiere sea un tipo de página que cuesta ver, pero hemos dado con un par de ejemplos, ambos relacionados con el mundo de la televisión, que es un sector que se presta mucho a ello.

> Fox y Netflix.

Ambas empresas patrocinan sus contenidos estrella en esta página. Una manera de enganchar a su público en una nueva serie o película.

Páginas de error 404 originales.

Originales, graciosas, que le dan una vuelta y sorprenden al usuario. Así son estas páginas de error 404.

> 40 de fiebre.

Nos consta que esta agencia cambia de vez en cuando su página de error 404. Esta ha sido la que hemos encontrado nosotros al preparar este post.

> Crello.

Aunque en la imagen no puedas verlo, el fondo de esta página es un vídeo en el que el astronauta se mueve lentamente mientras descansa en el banco. Eso unido a la explicación que dan hace que, al menos, se te escape una sonrisa.

> Canva.

Los diseñadores entenderán la referencia.

> Lego.

¿Hay algo que Lego no haga bien? Hasta en su página de error 404 aprueban con nota. Buen diseño, atractivo y con las opciones justas para que sigas navegando sin perderte. Además de algún que otro caramelito para que piques. Estrategia en todos lados.

> Quédate con el cambio.

Los Sabandijers son unos cachondos y además saben de la importancia de funelizar a los usuarios desde cualquier rincón. Ellos aprovechan para meter la imagen del cartel de la película "La comunidad". Sin duda una página de error 404 que sorprende, por imagen, por texto y por opciones, o más bien opción, porque sólo te dejan una salida.

> Sabandijers.club, la casa del valor.

Y el guiño de Quédate con el cambio y su foto de La Comunidad es porque de ese podcast salió la comunidad cambiavidas Sabandijers.club, la casa del valor. Tanto valor, que hasta han fichado a Macaulay Culkin para su página 404. Las opciones que dan: usar el buscador o volver a la página de inicio.

> Vueling.

La compañía aérea aprovecha que su temática da mucho juego y personaliza el mensaje para ofrecer una buena experiencia de usuario a pesar de no haber llegado a donde se esperaba. Bonito diseño, muchas opciones. Una página de error 404 bien trabajada.

La idea que queremos que te quede con este post es que la página de error 404 puede ser una fantástica oportunidad para enganchar al usuario que generalmente suele abandonar una web al encontrarse con un mensaje de estos. A nadie nos gusta no encontrar lo que buscamos, ¿verdad?

Pensar en los usuarios, pero sin perder de vista nuestra estrategia, es importante hasta para la última página de nuestra web que pensamos que nadie va a ver nunca. Créeme, siempre hay alguien que llega.

Por cierto, si quieres ver la página de error 404 de cualquier web añade a la URL de su home algo que sepas que no va a existir, por ejemplo www.laweb.com/asdasdfff ¿Te animas a ver nuestra página de error 404? 🙂

¿Qué te han parecido los ejemplos que hemos recopilado? ¿Has encontrado inspiración para personalizar la tuya? ¿Cuál te ha gustado más?