Cómo crear una excelente página 404 para sus usuarios

Publicado: 2021-11-04

Llegar a una página 404 no es una experiencia agradable. Pero hay cosas que puede hacer para asegurarse de que no sea la experiencia final que un usuario tiene con su sitio web.

Para diseñar una excelente página 404, debe saber qué elementos son los más útiles para los usuarios y pueden ayudar a que su página se destaque.

Aquí hay una lista de 6 funciones para ayudarlo a aprovechar al máximo su página 404.

ocultar contenido
1 ¿Qué es un código 404?
2 Por qué debería crear una página 404 personalizada
3 Cómo construir una gran página 404 personalizada
3.1 Borrar mensaje de error
3.2 Barra de búsqueda
3.3 Lista de recursos
3.4 Botón CTA
3.5 Enlaces al contenido principal
3.6 Identidad de marca
4 Resumiendo

¿Qué es un código 404?

404 es uno de los códigos de estado HTTP que aparece cuando no se puede encontrar una página.

404 pertenece al grupo 4xx, lo que indica que es un error del lado del cliente. Más específicamente, significa que el cliente llegó a su servidor, pero el servidor no encontró el archivo solicitado.

El código 404 puede aparecer por varios motivos, como por ejemplo:

  • La página fue eliminada,
  • El usuario cometió un error tipográfico al escribir la URL,
  • El enlace que apunta a la página era incorrecto.

No importa el motivo del código 404, los usuarios no podrán acceder a la página porque simplemente no se puede encontrar.

La página que verá el usuario en lugar de la página que falta está bajo su control. Sus opciones incluyen:

  • Una página 404 estándar, o
  • Una página 404 personalizada.

Una página 404 estándar y no personalizada puede contener un texto simple sobre un fondo blanco que simplemente dice "No encontrado". Su servidor genera automáticamente esta página.

Una captura de pantalla de una página 404 no personalizada que dice "no encontrada"

Por otro lado, puede optar por personalizar su página 404: diséñela para que se ajuste al resto de su sitio web y seleccione los elementos que desea incluir.

Por qué debería crear una página 404 personalizada

Una página 404 personalizada bien diseñada es beneficiosa tanto para los usuarios como para su empresa.

Cuando un usuario ingresa a una página 404 estándar, solo entiende que algo salió mal y que no se encontró la página. No saben qué pasó o qué deben hacer a continuación.

Como resultado, su cliente podría salir de su sitio sin satisfacer sus necesidades. Esto está lejos de ser ideal. Un usuario no estaba satisfecho con su búsqueda y usted perdió su negocio.

Con una página 404 personalizada, puede cambiar la página predeterminada e inútil por algo útil tanto para los usuarios como para su empresa.

Una página 404 personalizada le permite:

  • Ayudar a los usuarios a encontrar la información que buscan,
  • Anime a los usuarios a explorar su página,
  • Muestre la voz y la creatividad de su marca.

Además, Google recomienda crear una página 404 personalizada .

Si tiene acceso a los archivos de configuración de su servidor, puede hacer que estas páginas de error sean útiles para los usuarios al personalizarlas. Una buena página 404 personalizada ayuda a las personas a encontrar la información que buscan y también proporciona otro contenido útil que anima a las personas a explorar más su sitio.
fuente: Google

La cita establece claramente que Google considera que una página 404 personalizada es útil para el usuario y alienta a los propietarios de sitios a personalizar sus páginas 404.

Cómo construir una gran página 404 personalizada

Incluso si personaliza completamente su página 404, asegúrese de que el servidor aún devuelva un código de estado HTTP 404. Es una mala práctica configurar un código 200, lo que sugiere una respuesta exitosa cuando la página en realidad no existe.

Al decidir qué incluir en su página 404, uno de los elementos esenciales es un mensaje que indique claramente que es una página de error . Informe a los usuarios que algo salió mal de una manera amigable y directa.

Pero eso es solo el comienzo. Estas son las características principales que puede agregar a su página 404 personalizada para que sea más útil:

  • Una barra de búsqueda,
  • Una lista de recursos disponibles en su sitio web,
  • Un botón de llamada a la acción,
  • Enlaces a su contenido principal,
  • Diseño alineado con tu marca.

Una clave para una buena página 404 es su utilidad para los usuarios. No necesita incluir todos los elementos de la lista anterior, solo los que ayudarán a sus usuarios a orientarse en su sitio web.

Borrar mensaje de error

Una buena página 404 siempre debe incluir un mensaje claro de que es una página de error. Independientemente del diseño que elija, siempre debe informar a los usuarios que algo salió mal y que no se encontró la página.

Ikea lo hace muy bien. Proporcionan un mensaje claro que incluye tanto el código 404 como una breve explicación que lo hace fácilmente comprensible para los usuarios.

Una captura de pantalla de la página 404 de Ikea

Barra de búsqueda

Una barra de búsqueda permite a los usuarios que buscan contenido específico darle otra oportunidad y buscar lo que estaban buscando en su sitio web.

Un buen ejemplo de una página 404 con una barra de búsqueda es Moz.com:

Una captura de pantalla de la página 404 de Moz con una barra de búsqueda

Entonces, si estaba buscando algo específico en Moz.com pero no lo encontró, puede volver a buscarlo directamente en la página 404.

Lista de recursos

Si un usuario terminó en una página 404 pero no tenía nada específico en mente para escribir en la barra de búsqueda, puede proporcionar una lista de recursos que se pueden encontrar en su sitio web.

Backcountry tiene una página 404 personalizada con un diseño simple que se adapta al sitio web y una lista de páginas esenciales.

Una captura de pantalla de la página 404 de Backcountry con una lista de recursos

Esta página no solo es útil para los usuarios, sino que también permite que Backcountry muestre su contenido y anime a las personas a explorar el sitio web.

Otro ejemplo de una página 404 con una lista de recursos es Tripadvisor. Con un poco de humor y cuatro sencillos botones, Tripadvisor ofrece una opción sencilla para navegar por las secciones que más pueden interesar a los usuarios.

Una captura de pantalla de la página 404 de Tripadvisor con 4 botones a los recursos del sitio web

Botón de llamada a la acción

Al incluir un botón CTA, puede mostrar a los usuarios el siguiente paso que pueden dar.

El uso más simple de un botón CTA es dirigir a los usuarios a tu página de inicio . Una forma simple pero efectiva de brindar a los usuarios alguna orientación.

Este es un ejemplo de la página 404 de Netflix con un botón CTA que conduce a su página de inicio.

Una captura de pantalla de la página 404 de Netflix con un botón de inicio de Netflix

Otra solución es incluir un botón CTA "Contáctenos" . Por ejemplo, si un usuario vino con una pregunta específica y la página 404 hizo imposible obtener la respuesta, es posible que desee contactarlo para solicitar detalles.

Los usuarios también pueden usar la opción "Contáctenos" para informarle el error.

Kinsta incluye una "Página principal" y un botón "Contáctenos". Los usuarios pueden visitar el sitio web o ponerse en contacto con la empresa. Por lo tanto, brinda una solución para las personas que desean explorar el sitio web o encontrar una respuesta a una pregunta específica.

Una captura de pantalla de la página 404 de Kinsta con un botón para la página principal y contacto

El botón CTA debería ayudar a sus usuarios, pero también debe adaptarse a sus objetivos comerciales. Por ejemplo, puede incluir una opción para dejar un correo electrónico y suscribirse a su boletín.

9gag usa su página 404 para alentar a las personas a descargar su aplicación. La adición de un gif de fondo encaja perfectamente con el estilo 9gag.

Una captura de pantalla de la página 404 de 9gag con un botón de "descargar aplicación" y un gif en el fondo

Enlaces al contenido principal

Su contenido popular tiene las mejores posibilidades de mantener a los usuarios interesados. Le brinda la oportunidad de captar la atención de sus usuarios antes de que abandonen su página 404.

Los enlaces a su contenido más popular pueden ser especialmente beneficiosos para los sitios web de comercio electrónico porque puede promocionar sus productos más vendidos en una página que de otro modo sería un callejón sin salida.

En el sitio web de Urban Outfitters se muestra un excelente ejemplo de una página 404 que presenta el contenido principal . Tiene una sección de "Más populares" con la posibilidad de comprar los artículos de inmediato.

Una captura de pantalla de la página 404 de Urban Outfitters con enlaces a los artículos más populares

Identidad de la marca

Al personalizar su página 404 y alinearla con el diseño de su sitio web, puede demostrar que realmente se preocupa por la totalidad del viaje de su cliente a través de su sitio web.

Una página 404 puede mostrar el tono y la personalidad de su marca. Un diseño creativo que se adapte al estilo del sitio web puede hacer sonreír a las personas e incluso animarlas a compartir la página con amigos.

Pixar está utilizando uno de sus personajes más conocidos en la página 404. A pesar de que la página no proporciona muchas funciones de navegación, los gráficos y el mensaje conmovedor encajan perfectamente con el estilo de la marca.

Una captura de pantalla de la página 404 de Pixar con un personaje de la película Inside Out

Además de un botón "Llévame a casa", Canva incluye un pequeño rompecabezas para que los usuarios disfruten. Su creatividad y singularidad destacan entre otras páginas. Es una alternativa divertida a una página 404 estándar.

Una captura de pantalla de la página 404 de Canva con un rompecabezas

Terminando

No deje a sus usuarios solos con una página 404 estándar.

Los usuarios nunca deben quedarse sin información sobre lo que sucedió y lo que deben hacer a continuación.

En su lugar, esfuércese por crear una buena experiencia en todo su sitio. Eso incluye páginas de error.