Mejora del diseño de 404 páginas

Si un visitante ve su página de error 404 estándar, existe el peligro de que no se queden mucho tiempo para ver qué más ofrece su sitio. Una página 404 personalizada, una que es atractiva y útil, animará a sus visitantes a que busquen más en su sitio en lugar de desviarse hacia otro lado..

Vista previa de la imagen de la página Tuts + 404.


Nuestro objetivo: mejorar la página 404 predeterminada!


¿Qué está mal con una página 404 directa??

La respuesta simple es, mucho. Una página 404 que simplemente diga "Página no encontrada" no es útil para el visitante en absoluto; agregar un enlace que diga "Regresar a la página de inicio" tampoco ayuda.

La falta de una página 404 decente debilita la experiencia del usuario. Los usuarios que intentan encontrar una página en su sitio, pero no entienden la URL o se les envía por un enlace roto, se verán obligados a volver a la página de inicio e intentarlo de nuevo. Si aún no pueden encontrar lo que estaban buscando, es posible que terminen frustrados y abandonen su sitio. En un mundo ideal, los usuarios no tendrían que enfrentar errores en absoluto, pero la página 404 al menos nos da la oportunidad de disculparnos y ayudar a los usuarios a encontrar lo que estaban buscando. Es más probable que un usuario satisfecho vuelva en el futuro..

Aún peor que una página 404 pobre es la falta completa de una. El usuario entonces no tiene idea de lo que está pasando, y ni siquiera habrá un enlace a la página de inicio. La falta de una página 404 hará que su sitio se vea poco profesional y solo animará a los visitantes a irse.

Este es un ejemplo de una página 404 pobre. Su única característica de redención es el enlace de la página de inicio, y eso tampoco parece particularmente agradable. Si su página 404 se ve así, necesita mejoras.!


Margen de mejora

Se puede hacer mucho para mejorar nuestra página 404 desde arriba.

El factor clave para una página de error 404 es que sea fácil y comprensible para el usuario. Deje en claro que la página que estaban buscando no existe (es útil utilizar un lenguaje que sea fácil de entender y sin jerga). Intenta explicar por qué no existe, ¿se ha movido la página? Indique cuál podría ser el problema, de manera amistosa y acogedora..

Lo siento compañero La página que solicitó no está en nuestra base de datos. Es posible que haya seguido un enlace externo incorrecto o que haya escrito mal una URL. - La página 404 de A List Apart

No hagas que la experiencia 404 parezca una gran y mala experiencia. Haz que sea una experiencia amigable y positiva.!


Consejo 1: Mantener la consistencia del diseño

Es importante que el diseño en su página 404 se mantenga fiel al resto de su sitio. Esto incluye su logotipo, navegación, combinación de colores, etc. Tener una página 404 que no tenga ninguna relación con el resto de su sitio puede hacer que el usuario se sienta como si hubiera estado a la deriva. Al mantener su marca, la experiencia 404 no lo hará. Siente como un drama. El usuario todavía se sentirá involucrado con el sitio..

Aquellos de ustedes que hayan jugado con Twitter Bootstrap reconocerán su marca familiar, incluso en la página 404.


Consejo 2: Hazlo lo más útil posible

Como seguimos mencionando, una página 404 debe ser extremadamente útil para el usuario. Hay muchas maneras de lograr esto, pero algunas de las mejores características que puede tener un 404 son:

  • Un formulario de búsqueda
    Tener un formulario de búsqueda en su página 404 se asegurará de que el usuario se sienta inclinado a continuar buscando lo que estaba buscando, permaneciendo en su sitio..
  • Un enlace a la página de inicio
    Esto es clave para una página 404, pero si ha mantenido el diseño y la navegación de su sitio, entonces esto no será un problema, ya que ya debería haber un enlace en su navegación..
  • Mostrar una lista de páginas populares
    Juega las probabilidades. Quizás el usuario estaba buscando una de sus páginas más populares, en cuyo caso sería útil ver una lista de ellas para una referencia rápida..
  • Un enlace a su sitemap
    Puede ser útil proporcionar un enlace a su mapa del sitio (suponiendo que también sea útil y fácil de entender). De esta manera, un usuario puede navegar por todo su sitio y, con suerte, encontrar lo que buscaba. Un formulario de búsqueda maneja esto mucho mejor, pero un enlace de mapa del sitio sigue siendo una buena copia de seguridad. Alternativamente, su página 404 podría incluir una parte de su mapa del sitio. Si esto es lo que usted elige, recuerde mantener intactos el tema y el diseño del sitio..
  • Tener páginas de error específicas del problema
    Si un usuario llega a su página debido a, por ejemplo, una búsqueda de nombre de usuario fallida o un ingreso de datos de formulario incorrecto, debe hacer que esta pantalla de error sea igualmente útil. Proporciona formas fáciles de buscar de nuevo o mostrar páginas relacionadas.
  • Reportar un enlace roto
    Tener una forma fácil para que un usuario informe un enlace roto también es útil, ¡especialmente para usted! Esto puede ser en forma de un botón que le envía la URL del enlace roto o un simple formulario de correo electrónico.

Reportar enlaces rotos en NYT

Consejo 3: ser amable y comprensible

No asuma que sus usuarios saben lo que es un 'Error 404'. Tendrá que explicar cuál es el problema de una manera simple, amigable y comprensible. De esta manera, un usuario no se sentirá confundido por su jerga. Es mejor decir algo como "¡Vaya! No pudimos encontrar la página que buscabas", que simplemente indicar los hechos, como "Error 404: Página no encontrada".

Como usuario, ¿qué preferirías ver??

La página 404 de Apartmenthomeliving es bastante divertida e informal. Lo mejor de todo (aunque no se ve en la imagen) el diseño de la página sigue siendo coherente con la marca del sitio, y hay muchos enlaces para animar a los visitantes a quedarse..


Consejo 4: Un diseño minimalista también funciona ...

Tener un diseño de página de error 404 básico y minimalista aún puede ser efectivo.

Si tiene un sitio masivo, como Google, con muchas, muchas posibles páginas relacionadas, entonces una página 404 con elementos como enlaces de sitemap, listas de páginas populares o un formulario de búsqueda no es particularmente práctico y probablemente no ayude el usuario mucho de todos modos.

La página 404 de Google es muy minimalista pero funciona bien. Todavía hay un enlace a la página de inicio (el logotipo de Google) y está escrito de manera amigable y comprensible. El bonito dibujo también ayuda, creando un ambiente relajado y tranquilo..

Aunque esto parece ir en contra de todo lo dicho hasta ahora, si es demasiado poco práctico tener una página 404 avanzada, entonces una simple y amigable es igual de buena..


Consejo 5: mantenerlo informal

Una buena página 404 también puede ser casual, e incluso divertida..

Crear una página 404 que sea divertida y memorable puede tener un gran impacto en mantener a sus visitantes en el sitio. Además, si tienes una página 404 particularmente divertida o entretenida que está en la mente de la gente, ¡pueden terminar diciéndole a sus amigos para que la gente la busque deliberadamente! Ese fue ciertamente el caso con la página 404 de Github:


Echa un vistazo al uso innovador del movimiento de paralaje en la página 404 de Github

Github tiene cuidado de mantener los aspectos útiles de una página 404, a pesar de que aligeran el humor con humor.

La página 404 de Blizzard Entertainment: definitivamente divertida, pero aún así mantiene los vínculos de utilidad en la parte inferior y (en algunos aspectos) el mismo diseño de sitio..

Eche un vistazo a este video, que se encuentra en nosh.com, que muestra que hay mucho espacio para el humor (¡y la postproducción!)

BuySellAds toma un enfoque de video humorístico similar (aunque menos laborioso) para su página.


Resultados de la búsqueda y 404 páginas

Su nueva página 404 personalizada, bien diseñada y útil puede verse bien y funcionar perfectamente, pero es exactamente el tipo de cosa que no desea que aparezca en sus resultados de búsqueda. Hay dos formas de garantizar que su página 404 no aparezca en los resultados de búsqueda:

  • Asegúrese de que su servidor web devuelva un código de estado HTTP 404 correcto y real cuando se solicite una página faltante, por lo que el motor de búsqueda lo ignorará.
  • Añade tu página 404 a tu robots.txt expediente.

El segundo de estos dos métodos también se puede usar para evitar que los motores de búsqueda encuentren las páginas que no desea que vean, como la página 404, los archivos PHP de back-end (como las funciones de inicio de sesión) y más. Solo agrega su URL a la robots.txt Archivo y subirlo a su servidor:

 No permitir: /404.html

Usando tu página 404

Está muy bien tener una nueva página 404 personalizada que sea útil para los espectadores, pero obviamente es muy importante asegurarse de que realmente se utiliza. Para asegurarse de que su servidor redirecciona a los usuarios a su página 404 (en lugar de simplemente usar el valor predeterminado), deberá configurar su archivo .htaccess.

Configurar su archivo .htaccess para la dirección 404 personalizada es extremadamente fácil. En primer lugar, ubique el archivo .htaccess en su servidor (ya debería estar allí, pero si no, puede crear un nuevo archivo con ese nombre) y luego abrirlo. Agregue la siguiente línea de código:

ErrorDocument 404 /404.php

Asegúrese de que la ruta y la extensión del archivo coincidan con su archivo 404. Si su archivo se llamara 404-error.html y estuviera ubicado dentro de un directorio de "error", alteraría el fragmento de código de la siguiente manera:

ErrorDocument 404 /error/404-error.html

Los navegadores ahora serán dirigidos a su página 404 en el caso de un error 404. Es así de simple!


Conclusión

Por lo tanto, ahora sabemos que, en lugar de la página 404 predeterminada del navegador, aburrida e inútil, nos interesa dedicar tiempo a crear nuestras propias páginas 404 personalizadas. Si se hace correctamente, ayudarán a mantener a los visitantes en el sitio y, en última instancia, reducirán las tasas de rebote..


Recursos adicionales

  • Cómo crear una página de error 404 simple para los temas de WordPress en Wptuts+
  • 30 de las 404 páginas más geniales de la web en Creative Bloq