Diseño de páginas 404 intuitivas y fáciles de usar

Publicado: 2019-10-16

Todos hemos interactuado con una página 404 en algún momento.

Estas páginas aparecen cuando se rompe el enlace, se elimina una página o cuando el usuario escribió incorrectamente la dirección de la página. Pero cualquiera que sea el motivo, sigue siendo un error que debe corregirse. Además, los enlaces rotos dañan la clasificación de su sitio y eso no es lo que necesita. El aspecto SEO de su sitio es increíblemente importante, por lo que no querrá perder el tráfico solo porque olvidó vigilar las notificaciones 404.

Si bien está claro que las páginas 404 deben repararse lo antes posible, nunca se puede pronosticar realmente cuándo el usuario encuentra un enlace roto. Entonces, para estar listo y convertir la experiencia negativa en una positiva, debe personalizar sus páginas 404 y hacerlas fáciles de usar e intuitivas.

¿Listo para aprender a convertir lo malo en bueno? Averigüémoslo.

Personaliza la página 404 para tu sitio

Imagina que estás navegando por un sitio web increíblemente colorido y atractivo con muchos elementos interactivos y de repente te topas con una página en blanco con el mensaje "404 Página no encontrada".

Un poco de despertador, ¿no?

La página 404 no debería parecer una sorpresa desagradable, por eso es tan importante mantener su diseño igual que el diseño general del sitio.

Specialized.com 404 Page

Para eso, mantenga el aspecto de la página 404 igual que el aspecto de las otras páginas, incluidos el fondo, los colores, las fuentes y otros elementos (si corresponde). Además, muchos sitios web aprovechan la página 404 como una oportunidad para enfatizar la marca y recordársela a los usuarios una vez más.

Al diseñar una página 404 para su sitio, preste atención al mensaje. Un mensaje bien elaborado es una buena oportunidad para incluir un juego de palabras ingenioso o recordar a los usuarios acerca de sus productos/servicios de manera discreta.

Explicar lo que pasó

Si observamos la página 404 predeterminada en Apache, veremos lo siguiente:

Codinghorror.com 404 Page

Y eso es. El usuario no tiene idea de lo que realmente sucedió y qué hacer a continuación.

Debido a que se preocupa por sus clientes y desea descartar cualquier experiencia desagradable, proporcione una explicación del error. Las principales razones del 404 suelen ser:

  • El usuario escribió algo mal,
  • El enlace está roto,
  • La página no existe,
  • La conexión con el servidor está rota.

Marvelapp.com 404 Page

Por supuesto, no tiene que enumerar todos los problemas mencionados anteriormente. Sólo asegúrese de que su explicación sea comprensible.

Al ser honesto sobre el problema, ganará a los usuarios y los alentará a permanecer en el sitio y continuar navegando.

Crea un mensaje atractivo

La página 404 es una oportunidad perfecta para que la marca muestre su identidad a través de un mensaje bien elaborado.

Los mejores ejemplos de 404 páginas a menudo incluyen:

  • juegos de palabras
  • Mensaje relacionado con los productos o servicios del sitio
  • Apelación personal,
  • Referencias a la cultura pop y eventos reconocibles.

Github.com 404 Page

Debido a que la página 404 es un error predeterminado, debe transformarlo en algo completamente opuesto, es decir, una experiencia positiva y divertida.

GitHub hizo un trabajo brillante en términos de diseño de su página 404. Usó el estereotipo sobre los desarrolladores y su amor por la saga "Star Wars" y lo usó en su propio beneficio al hacer que tanto los elementos visuales como el mensaje de la página fueran reconocibles al instante incluso por aquellas personas que no vieron ninguna película de Star Wars.

Ofrecer una acción a tomar

Una llamada a la acción es realmente importante y es una necesidad absoluta para un diseño de página 404.

Un usuario nunca debe quedarse con una página en blanco y cero opciones. Entonces, incluso si sucediera algo como 404, ofrezca una alternativa que conduzca a un beneficio mutuo.

Pagecloud.com 404 Page

Algunas de las llamadas a la acción más populares para la página 404 son:

  • una barra de búsqueda
  • página principal
  • top-productos/servicios
  • Suscríbete a un producto o a un boletín
  • una oferta de una prueba gratuita

Presta atención al diseño de los botones CTA. Deben ser fáciles de detectar y no deben mezclarse con el fondo, de lo contrario, el usuario no los notará. Además, piensa en el mensaje del botón CTA: en lugar de clichés como "Haz clic aquí", opta por algo más creativo ("Mira lo que tenemos").

Agregar una barra de búsqueda

Un usuario llegó a la página 404 porque buscaba algo. Así que ofrézcales una opción para intentarlo una vez más agregando una barra de búsqueda a la página.

Puede respaldarlo con un mensaje como: "Parece que su consulta no se encuentra en ninguna parte... ¿Por qué no intentarlo de nuevo?" Los CTA bien escritos tienen una alta tasa de participación y funcionan bien junto con las imágenes.

Además, agregue un texto de sugerencia a la barra de búsqueda. Una barra con texto genera más interacción que una vacía.

Agregar puntos de salida

Una barra de búsqueda en la página 404 no es suficiente. ¿Qué pasa si los usuarios no están seguros de lo que necesitan?

Agregue "Página de inicio" o cualquier otro botón relevante para navegar al usuario desde una página 404 a una posible conversión. Además, puede agregar un botón "Contáctenos" para aumentar la confiabilidad.

Algunas empresas utilizan la página 404 como una oportunidad para recordar sus productos y servicios y colocar los enlaces correspondientes en la página.

Muestra tus productos/servicios

Si tiene una tienda de comercio electrónico, por ejemplo, puede colocar sus productos más vendidos en la página 404 para que los usuarios tengan la oportunidad de descubrir sus mejores productos y (¡con suerte!) comprarlos.

En cuanto a los otros sitios, seguro que puedes ofrecer algo valioso a tus usuarios. Puede ser una prueba gratuita de un producto, una oferta para inscribirse en un curso o una guía de áreas útiles del sitio.

Hazlo divertido

Como ya dijimos anteriormente, la página 404 es una experiencia negativa porque el usuario no obtuvo el resultado deseado. Para resolver el problema, haga que la página sea interactiva o agréguele un elemento divertido.

imdb.com 404 Page

Incluso si te posicionas como una marca altamente profesional, un poco de humor no hará daño. Además, muchas empresas agregan juegos y videos a su página 404 para atraer al usuario y mantenerlo entretenido.

Seguimiento del error 404

El error 404 no es asunto del usuario. Pero es su tarea rastrearlo e identificar la causa del error y el viaje del usuario.

Hay algunas cosas a tener en cuenta al elegir una herramienta para el seguimiento de errores 404.

Considere todas las fuentes de error 404

Es posible que un error 404 no esté necesariamente en su sitio: un cliente puede abrir un boletín antiguo y seguir el enlace o puede aparecer en los resultados de búsqueda en Google.

Entonces, cuando elija una herramienta para el monitoreo de errores, verifique que busque errores 404 en todas partes para que pueda corregirlos todos.

Informe sobre el costo del error 404

Como propietario de un sitio, probablemente tenga un millón de cosas que hacer y es posible que corregir los errores 404 no esté en la parte superior de su lista.

Es por eso que necesita una herramienta que le permita saber cuánto cuestan sus errores 404. Y no estamos hablando de dinero aquí: puede ser un porcentaje de conversiones perdidas, una mayor tasa de rebote, una cantidad de usuarios perdidos.

Una vez que vea cómo los errores 404 afectan su negocio, será más fácil priorizar sus tareas y mover los errores 404 hacia arriba o hacia abajo en la lista.

Monitoreo constante

Un error 404 no es algo que suceda regularmente. Puede suceder que lo estés haciendo perfectamente bien y luego, de repente, un usuario reciba un 404.

Es por eso que su herramienta de seguimiento debe monitorear los errores 404 constantemente y notificarle de inmediato si encuentra uno. De esta manera, podrá solucionarlo a tiempo y eliminar el riesgo de que otros usuarios tropiecen con la página 404.

Tipos de herramientas de seguimiento

Existen diferentes tipos de herramientas de seguimiento disponibles que lo ayudarán a identificar el error 404 y corregirlo con éxito.

herramientas de rastreo

Las herramientas de rastreo como Screaming Frog son perfectas para escanear rápidamente su sitio web y verificar si hay enlaces rotos.

Estas herramientas analizan los enlaces de tu web y te permiten saber cuáles están rotos y cuál es el origen del error. Además, las herramientas de rastreo suelen ser fáciles de administrar e instalar.

El mayor defecto de estas herramientas es que solo analizan los enlaces en su sitio web, ¿y recuerda lo que dijimos sobre la importancia del análisis avanzado? Además, las herramientas de rastreo no le indican el costo de un error 404, sino que solo ayudan a identificarlo.

Una herramienta de rastreo es definitivamente útil y debe implementarla regularmente solo para asegurarse de que todo esté bien con su tienda. Sin embargo, no olvide realizar análisis regulares y avanzados para asegurarse de que no haya otros errores que pueda haber pasado desapercibidos.

Herramientas de vínculo de retroceso

A diferencia de las herramientas de rastreo, las herramientas de backlinks se enfocan en fuentes externas que llevan a los usuarios a los enlaces rotos en su sitio.

Link Explorer de Moz es una de las herramientas que lo ayudan a encontrar los sitios web que llevan a los usuarios a su sitio. Dicho análisis es realmente útil para su SEO, ya que puede eliminar los enlaces 404 y mejorar la clasificación de su sitio.

Pero nuevamente, al igual que con las herramientas de rastreo, las herramientas de seguimiento de backlinks cubren solo un aspecto de la identificación de los enlaces rotos. Si desea encontrar todos los enlaces de error 404, incluidos los de los boletines antiguos o en las redes sociales, necesitará un análisis más completo.

Seguimiento con Google Analytics

Una de las formas más comunes y eficientes de rastrear el error de página 404 es con Google Analytics.

Para eso, necesitarás copiar este código:

<script>  
   // Create Tracker - Send to GA
   // Replace UA-11111111-11 with your own Tracking ID
 ga('create', 'UA-11111111-11');
   ga('send', {
     hitType: 'event',
     eventCategory: '404 Response',
     eventAction: window.location.href,
     eventLabel: document.referrer
});
</script>

y agréguelo a la página/plantilla de error 404. Solo recuerda pegar el ID de tu cuenta de Google en el código.

Después de eso, podrá ver qué URL exactas causan el error 404 y dónde las obtienen las personas.

Y finalmente: ¡arreglar el problema!

Los accidentes sucederán y eso es un hecho. Es mejor tener una página 404 atractiva por adelantado que solucionar el problema frenéticamente mientras los usuarios molestos esperan.

Sin embargo, 404 es un error y debe corregirse. Según la prioridad del error, puede redirigir el enlace, restaurar la página o corregir el enlace de origen. Además, haz lo siguiente:

  • Introducir informes 404 automatizados y regulares para vigilar las páginas 404 y corregirlas a tiempo.
  • Configura notificaciones en tiempo real en 404,
  • Realice una auditoría para identificar los enlaces rotos.

En general, una página 404 fácil de usar debe aportar valor al usuario, ser consistente en términos de diseño general del sitio web y ayudar a navegar por el sitio. Al seguir estas reglas, retendrá a los usuarios y al mismo tiempo aumentará sus conversiones.