25 ejemplos de las mejores p√°ginas de error 404: convierte a usuarios molestos en clientes leales

Última actualización 17 de Diciembre del 2020

user

Víctor Romero

25 ejemplos de las mejores p√°ginas de error 404: convierte a usuarios molestos en clientes leales 25 ejemplos de las mejores p√°ginas de error 404: convierte a usuarios molestos en clientes leales

¬ŅTe suena ‚Äúp√°gina no encontrada‚ÄĚ o ‚ÄúNot Found‚ÄĚ?, ha sido molesto, ¬Ņcierto? Y es que el ‚ÄúLo sentimos‚ÄĚ o el ‚ÄúUpss...‚ÄĚ, simplemente no es suficiente y optamos por salirnos de ese sitio inmediatamente.

En m√°s de una ocasi√≥n nos hemos encontrado con alguna de ellas, y tan mal es su dise√Īo y usabilidad, que pr√°cticamente sentimos que no est√°n corriendo. Bueno, esto mismo pasa con casi todos los usuarios de internet del mundo, y por eso que debemos hablar de las p√°ginas de error 404 muy seriamente.¬†

Con ejemplos te contaremos cómo muchas empresas entienden la frustración que puede traer esto a sus usuarios, y han buscado la forma de cambiarnos ese mal rato por una risa, sin perder nuestra confianza, creando páginas 404 personalizadas que se destacan por su genialidad, creatividad y perspicacia.

Pero antes de ver ejemplos de p√°ginas 404, entremos en contexto.

 

√ćndice:

  1. ¬ŅQu√© es una p√°gina de error 404?
  2. ¬ŅPor qu√© son importantes las p√°ginas 404?
  3. ¬ŅQu√© es una p√°gina 404 personalizada?
  4. ¬ŅPor qu√© tener una p√°gina 404 personalizada?
  5. Elementos importantes de una buena p√°gina 404 personalizada.
  6. Ejemplos de las mejores p√°ginas de error 404

 

¬ŅQu√© es una p√°gina de error 404?

Una p√°gina de error 404 es utilizada para comunicar al usuario que el servidor ha regresado un error ‚ÄúHTTP 404 No Encontrado‚ÄĚ, que en t√©rminos sencillos, significa que no ha sido posible encontrar el contenido que deber√≠a de contener esa secci√≥n del sitio.

El error 404 es de los m√°s comunes, y sucede a menudo cuando los sitios web realizan alguna de las siguientes acciones:
 

  • Cambiaron de dominio o estructura.
  • Migraron de servidor.
  • Eliminaron o movieron ese contenido.
  • Eliminaron el sitio entero.
  • Movieron ese contenido o producto sin cuidado.
  • Entraste a trav√©s de un enlace roto.
  • O simplemente escribiste mal la URL.

     

Existen diferentes tipos de ‚Äúerrores HTTP‚ÄĚ relacionados, que pueden ser arrojados por tu navegador que utilizas diariamente y el servidor, pero algunos de estos no son comunicados o no los percibimos f√°cilmente como los errores 404, aunque de eso hablaremos en otra ocasi√≥n.¬†

 

 

¬ŅPor qu√© son importantes las p√°ginas 404?

El tener una página de error 404 es importante básicamente, porque contribuye a la buena experiencia de usuario. Como te imaginarás, ignorar tus errores 404, es uno de los principales errores al crear un sitio o tienda en línea, y esto trae algunas consecuencias que te pueden afectar en diferentes aspectos.

Cuando un ‚Äúwebmaster‚ÄĚ o due√Īo de un sitio, no tiene en consideraci√≥n una p√°gina 404 personalizada, en la mayor√≠a de los casos los navegadores (como Chrome o Firefox) proveen una p√°gina 404 por defecto, que por supuesto no ayudan en mucho en cuanto a UX se trata.

Las p√°ginas de error 404 bien tratadas, tambi√©n son importantes porque ayudan en otros factores que no vemos, por ejemplo el posicionamiento org√°nico de nuestro sitio (SEO), ya que los motores de b√ļsqueda valoran este tipo de cosas. Por ejemplo, Google te puede sacar de su lista de resultados o afectar tu posicionamiento en su buscador, si detecta que tienes muchos errores 404 mal atendidos, porque para ellos (los ‚Äúbots‚ÄĚ) tambi√©n son frustrantes.

Así es, los errores 404 son tortuosos, inevitables y no respetan ni a la empresa más rica del mundo, pero hay formas de aminorar ese malestar, y una de las mejores, es hacerles frente con una página 404 personalizada. 
 

Que Google no te saque de su lista de resultados por tus 404, aprende los fundamentos de SEO hoy.
 

¬ŅQu√© es una p√°gina de error 404 personalizada?

Una página 404 personalizada, es una página que se crea para comunicarle a tus visitantes que has tenido ese error, pero con una pantalla que mantiene tus colores, tipografía(s), tono de comunicación y gráficos basados en la identidad de tu empresa.

Puedes aprovechar estos recursos antes mencionados, y con extra creatividad y una buena estrategia detr√°s, podr√°s hacer que estos visitantes frustrados olviden que eso fue un error e incluso, que la compartan en sus redes sociales.

Las ventajas de tener una p√°gina 404 personalizada son muchas, hablemos de ellas.

 

Fuente: Pexels
 

¬ŅPor qu√© tener una p√°gina de error 404 personalizada?

Ok, ya en este punto te puedes deducir que más allá de tener una página 404 personalizada sea una buena práctica, éstas te pueden beneficiar más de lo que te imaginas.

Para saber aprovechar este recurso, hay que ver a una p√°gina 404 como un escaparate m√°s, un lugar donde puedes comunicarte abiertamente, y utilizarlo para estrategias de marketing, UX, fortalecer tu branding, servicio al cliente y otros beneficios que a√ļn no han sido descubiertos.

En términos simples, podemos decir, que debes tener una página de error 404 personalizada porque te ayudará a seguir creciendo ya que retendrás a tus usuarios y aumentarán tus conversiones, o si lo quieres ver de otra forma: te ayudará a no perder clientes y visitantes de tu sitio, que pueden realizar alguna acción importante para ti y tu negocio.
 

Elementos importantes de una buena p√°gina 404 personalizada

Esta no es una lista de características definitiva que una página 404 personalizada debe tener, pero si están presentes en la mayoría de los mejores páginas de error 404 que hemos visto y te compartiremos. Estas características son:
 

1. Tienen un llamado a la acci√≥n: las buenas p√°ginas 404, cuentan con algo que en marketing lo llaman ‚ÄúCall-to-action‚ÄĚ, y se encargan de llevar a sus usuarios a secciones donde creen que podr√≠an recibir la informaci√≥n o realizar la acci√≥n que esperaban hacer.
 

2. Generan engagement: los dise√Īadores y personas de comunicaci√≥n detr√°s de las mejores p√°ginas de error 404, saben perfectamente c√≥mo llegar y conectar contigo. Te conocen a tal grado que logran capturarte desde que aterrizas a su p√°gina.
 

3. Son interactivas: esto es un poco más complejo de llevar a cabo, pero una buena página 404 te invita a tener una breve experiencia para que olvides que llegaste ahí por un error.
 

4. Son congruentes con su marca: los sitios con una buena página 404 personalizada, mantienen su tono de comunicación e identidad visual.
 

5. Son divertidas: estas p√°ginas hacen uso de en lo que en marketing o investigaci√≥n de usuario se le conoce como ‚Äúinsights‚ÄĚ, y son los encargados de sacarte una sonrisa y hacer clic contigo.
 

6.¬† Tienen ‚Äúbuen dise√Īo‚ÄĚ: ya sean animaciones o im√°genes est√°ticas, las mejores p√°ginas 404 logran deleitarte el ojo, y para muchos dise√Īadores, esto es suficiente para dejar pasar su error.
 

Muchas empresas han llevado estos elementos al siguiente nivel y han sabido imprimir toda su personalidad hasta en el √ļltimo rinc√≥n, ¬°es momento de verlas en acci√≥n!
 

Ejemplos de las mejores p√°ginas de error 404

Inspírate con estos 25 ejemplos de páginas 404 personalizadas que son una gran referencia de ejecución y han sabido convertir un error en una oportunidad, cautivando a sus usuarios y ganando la lealtad de sus clientes:

 

1. Spotify for Pets

Mascotas‚Ķ ¬Ņqu√© mejor forma de conectar que eso? Es una serie de transiciones muy sencillas, pero con mucho estilo dejan claro que algo no sali√≥ bien, y el perro no est√° muy contento por eso. Como ‚ÄúCall-to-action‚ÄĚ utilizan el volver al ‚Äúhome‚ÄĚ, lo cual es muy com√ļn.

 

2. Locomotive

 

3. Cornershop

4. McDonald's

Muy bien ah√≠, McDonald 's; haciendo uso de una referencia muy com√ļn (‚ÄúWho Moved My Cheese?‚ÄĚ), para adaptarla a uno de sus principales productos, y acompa√Ī√°ndola de una ilustraci√≥n que te hace olvidar que llegaste ah√≠ por un error.¬†

 

5. Canva

Brllante muestra de interactividad en una p√°gina 404. Tuve que parar porque ten√≠a que seguir escribiendo este post. ūüėÖ

 

6. Crunchbase

 

7. Amazon

Esa cara que sabes que hizo algo, pero no puedes rega√Īarlo‚Ķ ūü§∑‚Äć‚ôā ÔłŹ Adem√°s de darte la opci√≥n de ir a su p√°gina de inicio, Amazon aprovecha para compartirte una campa√Īa donde muestran a los perros que ‚Äútrabajan‚ÄĚ con ellos y son parte de su cultura. Una forma muy inteligente de salvar nuestra frustraci√≥n.

 

8. Pixar

 

9. Dribbble

¬°WOW! Si esto no es aprovechar sus recursos, entonces no s√© qu√© sea. Hacen del error una oportunidad para resaltar uno de sus principales ‚Äėfeatures‚Äô y siguen ejecutando su funci√≥n: compartir proyectos de dise√Īo y arte. ūü§Į
 

10. Figma

Simplemente una de las mejores. ūüĎŹ

 

Dale forma a tu siguiente proyecto aprendiendo a prototipar desde cero con Figma

 

11. Typeform

Typeform sabe perfectamente que a todos nos gustan las mascotas, aunque no estoy seguro que sepan la connotaci√≥n del nombre de su perro. ūü§Ē

 

12. Spotify

 

13. Coulee Creative


El uso de memes es un recurso que vale la pena explotar, una muy buena forma de generar engagement con tus usuarios. 

 

14. Crehana

 

15. Lyft

Esta empresa estadounidense competidora de Uber, muestra una p√°gina de error 404 muy limpia, con una animaci√≥n que muestra esa urgencia por encontrar lo que estabas buscando. ūüĎĆ

 

16. Twitch

 

17. Netflix

Aqu√≠ Netflix tambi√©n aprovecha el concepto de ‚Äúest√°s perdido‚ÄĚ y lo vincula con uno de sus productos (‚ÄúPerdidos en el espacio‚ÄĚ), acompa√Īado de un ‚ÄúCall-to-action‚ÄĚ para ir a su ‚Äėinicio‚Äô. Sinceramente esperar√≠a m√°s de una empresa como Netflix, pero sin duda es una muy buena forma de ejecutar una p√°gina 404.
 

18. GitHub

Estos de GitHub, s√≠ que conocen a su aduencia. ūüĎŹ

 

19. Elementor

Este "website builder" para Wordpress es un gran ejemplo de página 404 interactiva, además de que te puede a ayudar a crear una página 404 similar o mejor para tu sitio.
 

Aprende a construir¬†y personalizar hasta el √ļltimo bot√≥n, con estos cursos para crear sitios en¬†WordPress.

 

20. Product Hunt

 

21. Fiverr

 

22. Discord

 

23. WeTransfer

WeTransfer, la plataforma para compartir archivos, utiliza esta forma un tanto sencilla pero bastante original. Y es que no sólo dan la opción de volver a la sección principal del sitio, sino que buscan que te quedes más tiempo en esa página viendo ese hipnotizador gráfico.

Nota que aunque muestran un cierto asombro en su primer copy, en ning√ļn momento se disculpan.

 

24. Zo√ę Pepper

"¬°Ey! Qu√©date a ver qui√©n gana este 'piedra, papel y tijera", eso es lo que quisieron decir con esta gran p√°gina 404. ūüĎĆ

 

25. LinkedIn

 

¡Y estas no son todas! Ya viste algunas de las páginas 404 más creativas y originales que hemos encontrado, y que sin duda pueden llenarte de inspiración para pensar en la tuya y conviertas este penoso error, en una gran oportunidad. 

Si quieres descubrir m√°s p√°ginas 404 por tu cuenta, s√≥lo agrega ‚Äú/404‚ÄĚ al final de la URL de cualquier sitio y podr√°s ver qu√© han dise√Īado como p√°gina de error 404. ūüėŹ

Recomendados para ti