¿Qué hace una gran página de error 404?

Nadie quiere pensar que los visitantes del sitio web están gastando tiempo en páginas de error, pero sucede. La página de error 404 es un lugar donde estas interacciones ocurren con bastante frecuencia. Diseñe de una manera que les hable a los usuarios en lugar de animarlos a abandonar su sitio.

Las páginas de error 404 más memorables y menos frustrantes son las más exitosas. También pueden ser los más divertidos de diseñar. Entonces, ¿qué puede hacer para crear la mejor página 404 para su sitio? Aquí hay algunos consejos, trucos y galería de grandes ejemplos.

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

Los visitantes del sitio web llegan a una página de error 404 cuando intentan visitar una página que no existe. Esto puede deberse a que la página se ha eliminado, el servidor o la conexión a Internet están caídos, los usuarios han hecho clic en un enlace roto o han escrito una URL de forma incorrecta.

Normalmente, las páginas de error 404 dan como resultado uno de los siguientes mensajes:

  • 404 No encontrado
  • HTTP 404 no encontrado
  • error 404
  • La página no se puede encontrar
  • La URL solicitada no se encontró en este servidor

Cuando se trata del diseño general de las páginas 404, hay dos opciones: una página 404 genérica o una página 404 personalizada. Las páginas genéricas simplemente escupen los mensajes anteriores sin tener en cuenta el diseño. Las páginas personalizadas son aquellas para las que diseñas y creas opciones. Debe tener acceso al servidor host para hacer esto. (Eso no es algo a lo que iremos aquí, pero puede obtener más información al respecto en A List Apart).

Las páginas de error 404 personalizadas le dicen a los usuarios qué hacer si se desvían de alguna manera. Las páginas deben incluir información útil que ayudará a un visitante a permanecer en su sitio y encontrar la información que está buscando. (Esperemos que también tengan un diseño ingenioso).

Información básica imprescindible

Para ser más efectivo, una página de error 404 debe ser algo simple en naturaleza. Debe informar a los usuarios que hay un error (obviamente) y qué opciones tienen para avanzar desde esta página.

Lo que una página 404 no debería tener es un montón de jerga técnica. (No quieres asustar a los usuarios, ¿verdad?) ¿En realidad, probablemente no deberías usar el título? ¿Error 404? porque muchos de sus usuarios no tendrán idea de lo que eso significa. Se adhieren a algo con más significado, como "No se puede encontrar la página".

Hay algunos otros datos que debe tener en la página 404. Recuerde, el punto es mantener a los visitantes haciendo clic si encuentran la página por error, no perderlos.

  • Un encabezado fuerte o texto que explique a un usuario por qué está aquí. Es chocante cuando llegas a una página web que no es lo que pretendías. Asegúrese de que los usuarios sepan que no están en la página correcta, pero que están en el sitio web correcto.
  • Buscar. Asegúrese de que la página de error 404 tenga la misma funcionalidad de búsqueda (y en la misma ubicación) que el resto de su sitio. De esa manera los usuarios pueden buscar la página que pretendían visitar.
  • Enlaces a tu página de inicio y sitemap. Es probable que esto suceda como un elemento de diseño que incluya un encabezado o pie de página que coincida con el resto del sitio.
  • Información mínima de lo contrario. Considere la posibilidad de eliminar la navegación complicada. Si un usuario llega a una página por error, solo déle a esa persona algunas opciones que resultarán exitosas. Demasiadas opciones aquí podrían frustrar o confundir aún más al usuario.
  • Incluir un llamado obvio a la acción. Dígales a los usuarios qué hacer a continuación.

Hacer 404 páginas utilizables

Parte del proceso de diseño al pensar en 404 páginas debe ser usabilidad. Incluye características que hacen que la página sea visualmente atractiva y funcional para el usuario perdido.

Google tiene una lista de excelentes sugerencias de información para incluir en una página 404 personalizada en sus herramientas para webmasters. Estos consejos incluyen:

  • Dígales claramente a los visitantes que no se puede encontrar la página que están buscando. Use un lenguaje que sea amigable y acogedor.
  • Asegúrese de que su página 404 tenga el mismo aspecto que el resto de su sitio.
  • Considera agregar enlaces a tus artículos o publicaciones más populares.
  • Piense en proporcionar una manera para que los usuarios informen un enlace roto.
  • Asegúrese de que su servidor web devuelva un código de estado HTTP 404 real cuando se solicite una página faltante para que no se muestre en los resultados de búsqueda.
  • Use el widget Mejorar 404 para incrustar un cuadro de búsqueda en su página 404 personalizada.
  • Use la herramienta Cambio de dirección para informar a Google sobre el movimiento de su sitio.

A esa lista de consejos hay uno más para los diseñadores: Sé creativo. Una página 404 no tiene que ser aburrida si es técnicamente sólida.

Diseño de 404 páginas con propósito

Cuando esté pensando en el diseño de una página de error 404, primero considere cómo funciona en relación con el resto del sitio. ¿Cuál es el estado de ánimo o el tono de su diseño general? ¿Cómo puede esta página coincidir con esa sensación?

Las grandes páginas de error se combinan perfectamente con el sitio en el que viven. Si su sitio tiene un tono ligero y humorístico, también debería hacerlo la página 404. Los colores y las imágenes también deben tener un diseño consistente. Tenga cuidado, sin embargo, en el diseño para no culpar al usuario por aterrizar en la página incorrecta. (Esto sucede con más frecuencia de lo que piensas).

Piense en el diseño de una página de error como lo haría con cualquier otra página en el esquema de diseño general.

  • Mantener la consistencia del diseño. Utilice el mismo color, tipografía y estilos de imagen que están integrados en otras páginas del sitio web.
  • Mantener la marca. El uso del mismo logotipo, encabezado y tratamiento de pie de página ayudará a los usuarios a reconocer su sitio.
  • Mantenlo simple visualmente. Menos es más cuando se trata de páginas de error.
  • No hagas que los usuarios se desplacen. Este es un diseño de una pantalla.
  • Evita demasiados trucos. Si bien es una buena idea mantener el tono y la sensación de su sitio y su marca, ¿demasiados extras? Puede hacer que los usuarios olviden lo que estaban buscando en primer lugar.
  • Discúlpate y sé empático. Está bien lamentar que un usuario haya aterrizado en el lugar equivocado.
  • Si su sitio requiere un inicio de sesión, agregue un lugar para él.(¿Ocurrió el error porque el usuario necesitaba iniciar sesión?)
  • Ser creativo. O gracioso. Pero prueba la página primero. Asegúrate de que los usuarios aleatorios lo consiguen.
  • Si utiliza? Error 404 ,? agregue una segunda línea de texto que diga a los usuarios qué significa o qué deben hacer a continuación.

12 grandes ejemplos

No hay nada como golpear una gran página de error 404. Facilita la frustración de un enlace malo o roto. Aquí hay una docena de páginas que seguramente harán que te encuentres con un error.

Arte desviado

Gig Masters

iFolderLinks

Lego

LimpFish

Magnt

Mattel

ModCloth

NPR

Steve Lambert

Titleist

Tobi

Conclusión

Puede ser difícil pensar en diseñar una página que sea el resultado de un error como un lugar divertido o para mostrar algo de creatividad, pero es todo Diseñar una página 404 efectiva es una mezcla de simplicidad, facilidad de uso y estilo de diseño.

¿Perdimos alguno de los elementos que te gusta ver en una página de error 404? ¿Has diseñado una gran página 404? Comparte tus pensamientos y diseños con nosotros en los comentarios, en Facebook o Twitter.