[ad_1]
La página 404 es un callejón sin salida en su sitio web. Aterrizar en esta página de error puede causar una mala experiencia de usuario para sus lectores. Esto puede hacer que regresen a su página de inicio con insatisfacción, o vayan a los sitios web de otros competidores, o peor aún, eviten su sitio por completo.
No hace falta decir que estos casos deben evitarse y, sin embargo, les sucede a los mejores sitios web que existen. Por lo tanto, sería prudente tener una solución a esto para que pueda lidiar con los efectos para sus visitantes y su sitio.
En este artículo, lo guiaremos a través de 404 página (qué es y por qué ocurre), cómo lidiar con eso y mostrarle hermosos ejemplos al final para brindarle excelentes perspectivas sobre cómo se vería una página 404 efectiva.
Entendiendo el error 404
Para comenzar con nuestra guía, primero comprendamos qué es una página 404 y cuándo puede ocurrir.
¿Qué es?
En términos técnicos, los mensajes de error 404 indican que el cliente pudo comunicarse con el servidor, pero el servidor no pudo encontrar lo que se solicita.
En otras palabras, el sitio web no puede encontrar lo que el visitante está buscando.
¿Cuándo ocurre?
Un error 404 puede ocurrir cuando…
- • Se ha eliminado una página del sitio web.
- • Una página ha sido transferida a una nueva URL sin redirigir a la anterior.
- • Se ha cambiado el nombre de la URL.
- • El visitante escribió mal una URL.
- • La página o el archivo está temporalmente inaccesible debido a mantenimiento o actualizaciones del servidor.
Estas son solo algunas de las muchas causas de tener un mensaje 404.
Cuando los usuarios llegan a una página 404, existe una alta probabilidad de que abandonen su sitio de inmediato. Esto aumentará la tasa de rebote de su sitio y afectará su ranking de búsqueda de Google, sin mencionar la pérdida de un visitante regular potencial.
Creación de una atractiva página 404 personalizada.
Como diseñador, aquí es donde lo hará mejor. Tienes el poder de disminuir la mala experiencia de usuario para tus visitantes y ayudarlos a llegar a donde quieren ir.
Pero antes de abordar qué hace que una página 404 personalizada sea efectiva, analicemos primero por qué necesita tenerla.
¿Por qué es importante?
1. Puede ofrecer asistencia a un visitante insatisfecho.
De todas las razones, esta es la más vital.
Seguramente has experimentado un momento en el que abriste un enlace en un sitio web para ver algo interesante y luego, boom, aparece un mensaje de error 404 que te dice que ya no está disponible.
¿Recuerdas la sensación? Eso es lo que sentirán sus visitantes cuando experimenten esto en su sitio. Por eso es importante tener una página 404 personalizada que los ayude a llegar a donde quieren ir o, de lo contrario, abandonarán su sitio web en un instante.
2. Es una oportunidad para mostrar la personalidad de su sitio web.
Imagina que tus visitantes serán llevados a una página con solo esta imagen. No solo muestra un diseño aburrido y sin vida, sino que definitivamente los hará sentir confundidos, decepcionados o simplemente molestos.
Puede evitar o al menos mitigar esto al tener su propia página 404 personalizada. Le dará una pista sobre de qué se trata su sitio web.
Por ejemplo, si el sitio web es para una empresa, la página 404 puede diseñarse para que luzca más profesional y relacionada con su negocio.
imperio gato
Este es un ejemplo de la página 404 de Empire CAT. Tiene una imagen de fondo de su fábrica que le da una pista obvia de lo que se trata su sitio web comercial.
También incluye elementos útiles que discutiremos más adelante.
Para los sitios web a los que les gusta el humor, la página 404 puede tener algunos juegos de palabras y chistes divertidos para disminuir la sensación de molestia y decepción.
Aquí están algunos ejemplos:
Bluegg
imán
Centro de correo electrónico
Nuestro objetivo principal al crear una página 404 personalizada es evitar que los visitantes salgan de su sitio web o al menos mitigar su molestia y su experiencia no tan buena.
Los elementos esenciales para una página 404 personalizada atractiva.
1. Un mensaje de error amigable
No desea que los visitantes vean una página llena de jerga que es difícil de entender. Esto puede hacer que se confundan o, peor aún, que entren en pánico y que se dirijan inmediatamente al botón Atrás del navegador.
En su lugar, busca un mensaje con un toque humano como ‘Uh oh’, ‘Yikes’, etc. Incluso puedes poner palabras de disculpa como ‘lo siento’ por la mala experiencia.
Ejemplos de páginas 404 con mensajes alegres:
Modpaño
RPZ
airbnb
2. Barra de búsqueda
Su barra de búsqueda simplemente les dará a sus visitantes la opción de continuar navegando por su sitio (para encontrar lo que están buscando) en lugar de que se vayan. Debe estar ubicado en un lugar que sea fácil de ver y también agregar un mensaje que los aliente a usarlo.
Ejemplos de páginas 404 con cuadro de búsqueda:
MailChimp
Gorjeo
Mashable
3. Otros enlaces útiles
¿No quiere que sus visitantes abandonen su sitio después de un aterrizaje de página 404? Señalarlos en otro lugar de su sitio web. Su página de inicio, página de información, cartera, publicaciones populares/recientes y archivos son un excelente comienzo para ayudarlos a volver a interactuar con su sitio.
Agregue estos enlaces de una manera prolija y sugerente para que puedan tener algunos enlaces útiles para trabajar.
Ejemplos de páginas 404 con enlaces útiles:
Wufoo
Flixelpix
dúo
4. Opciones de contacto
Además, permita que sus visitantes se comuniquen con usted agregando un enlace de contacto en su página 404. Allí pueden enviar su informe sobre un enlace roto, lo cual es bueno para usted, ya que puede conocer el problema y tomar medidas.
Esto también puede ayudarlos a transmitir sus preocupaciones y quejas. En cierto modo, puede ser una salida para que liberen sus sentimientos de la experiencia infeliz.
Ejemplos de páginas 404 con opciones de contacto/informe:
Invisión
fitbit
Buenos juegos antiguos (GOG)
5. Parecido con tu web
Los mensajes 404 predeterminados son genéricos, feos y molestos para la mayoría de los usuarios. Esto por sí solo es motivo suficiente para crear una página de error personalizada para su sitio.
Pero al hacerlo, asegúrese de que su diseño aún se vea como si todavía fuera parte de su sitio web. Esto disminuirá su confusión y consternación.
Debe contener el mismo tema de color, logotipo y navegación principal de su sitio web para que sientan que todavía están en la página y no arrojados a un mundo blanco del vacío 404.
Ejemplos de páginas 404 con parecido a su sitio web:
WPPrincipiante
DeviantArt
Gráficos de Naldz
10 ejemplos creativos de diseños de página 404
Ahora que tiene una buena comprensión de lo que es una página 404 personalizada competente, es hora de mostrar algunos ejemplos creativos que tienen diseños estéticos sorprendentes. Disfrute y esté interesado en qué elementos usa cada uno de los ejemplos.
Universo.com
Universe es un mercado social para eventos. Su página 404 está diseñada con un divertido patrón de fondo de globos en varios colores. Esto hace que la página de error sea menos desalentadora y más fácil de manejar. Utiliza un mensaje alegre y pone enlaces a su centro de soporte y página de inicio. Además, todavía tiene su logotipo en la parte superior central.
Agens.no
El diseño de Agens muestra a un astronauta perdido en el espacio con una bandera ‘404’. Todavía conserva su barra de encabezado que contiene su logotipo y otros enlaces de navegación. También ofrece una opción para que sus visitantes vean sus otros proyectos.
Fortysevenmedia.com
Aquí Fortyseven Media nos muestra que un diseño simple también puede hacer que una página 404 sea menos intimidante. El diseño tipográfico en el ‘404’ es similar al diseño estándar de su sitio web: textura sucia y erosionada con relleno naranja, lo que hace que parezca parte del sitio. También conserva su barra de navegación e incluye enlaces a su cartera, página de información y blog.
Swiss-miss.com
Swissmiss es un blog de diseño propiedad de Tina Roth. Su página de error también tiene un diseño muy simple pero creativo. La muestra detrás de un agujero ‘rasgado’ en la página, entregando un mensaje de error amigable y ofreciendo un enlace a la página de inicio o usando el cuadro de búsqueda.
404
Aquí tienes un pack de 404 plantillas diseñadas con varias animaciones de fondo. Contiene un mensaje amistoso y de disculpa seguido de opciones para volver a la página de inicio y usar el cuadro de búsqueda.
Tenedor-cms.com
Fork es un gran ejemplo de cómo hacer que su página de error sea similar al diseño de su sitio web. Utiliza totalmente su marca utilizando el esquema de color del sitio, la imagen de fondo y su mascota.
perdido en el bosque
Esta es una hermosa plantilla estética que definitivamente hará que su página de error sea impresionante, en el buen sentido. Ofrece varias opciones para el visitante, como página de inicio, regreso atrás, cuadro de búsqueda y enlaces de redes sociales.
Dribbble.com
Dribbble relaciona cómicamente su página de error con la jerga asociada al baloncesto. Tiene una imagen de fondo de una cancha de baloncesto y usa el término “pelota de aire”. En lugar del estándar “página no encontrada”. También incluye sugerencias para volver a su página de inicio o contactarlos.
Nosotros.blizzard.com
Blizzard muestra con humor una pantalla rota como metáfora del enlace roto. Aunque la barra de navegación parece estar fuera de servicio, todavía funciona perfectamente.
Animales animados
Este paquete de plantillas premium está construido en CSS puro para una velocidad de carga muy rápida. Incluye 2 animales (perro y búho) con animaciones flotantes únicas y divertidas.
Avanzando…
Tener un enlace roto o perdido es casi imposible de evitar en un sitio con mucho contenido. Pero eso no significa que no haya nada que podamos hacer al respecto.
Examine los elementos y ejemplos que hemos compartido anteriormente para ayudar a sus visitantes a evitar un callejón sin salida cuando se enfrenten a una página 404. Dale la vuelta a la situación brindándoles un diseño estético agradable y otras opciones para ayudarlos a encontrar lo que necesitan.
¿Ya tienes tu propia página 404 personalizada? ¿O tienes consejos útiles para contribuir? Compártelo en nuestra sección de comentarios. ¡Nos encantaría verlo!
