English Português

Personalizar tu error 404 es algo útilLas páginas de error 404 not found no suelen ser muy vistas por los usuarios. Sin embargo, eso no quiere decir que no lleguen hasta ellas. Si por desgracia lo hacen, no está de más que te encuentres preparado para ello personalizando el mensaje que ofreces.

Se podría decir que hay dos tendencias respecto a estas páginas: una, embellecedora o divertida, y otra que apunta hacia la usabilidad más que hacia la estética. A pesar de que este último aspecto es quizás el más hemos de tomar en cuenta, una combinación equilibrada entre estética y facilidad de uso puede enriquecer la experiencia que tenga el usuario al visitar nuestro sitio.

Indicaciones generales

A grandes rasgos, y siempre tomándolo todo como una guía general, pensemos en…
Cómo debe ser

  • Distinta del resto de las páginas de tu web: que el usuario se entere cuanto antes de lo que ha ocurrido. No lo confundas (más).
  • Clara: el usuario no debe llegar a un sitio y quedarse pensando hasta que se da cuenta que se trata de un mensaje de error. Díselo alto y claro.
  • ¡Debe existir!: sí, debe existir una página de error 404 en tu sitio, personalizada de acuerdo al contenido y la temática de tu web. Eso demuestra que te has tomado la molestia de cuidar pequeños detalles como este.

Qué debe contener:

  • Un mensaje que le diga claramente al usuario que se ha producido un error. Debe ser breve, aunque si luego quieres extenderte en explicaciones prolijas (incluso humorísticas), ya es cosa tuya.
  • Tu logo o al menos el nombre de tu sitio: para que el usuario sepa que ha ido donde quería ir pero que no ha encontrado lo que quería encontrar.
  • Un buscador interno de la web: para ayudar al usuario a que busque lo que necesita.
  • Nada que la haga pesada: si se metió la pata, pues se metió. No mortifiques al usuario encima con una imagen enorme o hasta con una animación en flash que demuestre lo bueno que eres en lo tuyo.

Qué es aconsejable:

  • Enlaces a otras partes de tu web o a posts muy visitados: hazle saber al usuario que, aunque a lo mejor lo que busca ya no está ahí, todavía tienes muchas cosas interesantes que puede ver. Sin embargo, no abuses. Con tres o cinco enlaces es más que suficiente.
  • Un enlace a la página principal: esto parece obvio, pero no todos los sitios lo cumplen.
  • Enlace al mapa del sitio, en caso de que lo tengas (algo que también es muy recomendable).
  • Nubes de etiquetas y/o un índice de categorías: ayuda a tu usuario a localizar lo que busca, o al menos a que descubra nuevas cosas de tu sitio.
  • Obvia el número 404 o ponlo en segundo plano: a la mayoría de los usuarios no le dice nada ese error, y puede ser que incluso confunda a algunos. Aunque esto puede depender de a que tipo de público te diriges.
  • Jakob Nielsen recomienda incluir una lista de los errores más comunes a la hora de escribir una dirección de tu sitio. Su página de error es una muestra de los consejos que da al respecto.

Una muestra de error 404Como crear una página 404 en WordPress

Es sumamente sencillo. Dentro de la carpeta del tema que tengas en tu blog, existe un archivo llamado 404.php: ese es el archivo que debes modificar.

Las modificaciones son según tu gusto. Generalmente, en ese archivo se incluye una referencia al Header, a la Sidebar y al Footer. Si lo deseas, puedes conservarlas. Un archivo 404.php muy simple se puede ver así:

<?php get_header(); ?>

<?php get_sidebar(); ?>

<div class="error404">

<h1><?php _e('Error 404 - Not Found', 'blank'); ?></h1>

<h2><?php _e('The page you were looking for has either been deleted or moved.', 'blank'); ?></h2>

<?php _e('Do you want to search for it', 'blank'); ?>?

<br />

<?php include (TEMPLATEPATH . "/searchform.php"); ?>

</div>

<?php get_footer(); ?>

Todo lo que tendrías que hacer es modificar lo que hay entre el <?php get_sidebar(); ?> y el <?php get_footer(); ?>, incluyendo ahí tu propio código. Si deseas que tu página no tenga ninguno de los elementos habituales de tu blog, simplemente elimina todo y pon ahí lo que quieras que se vea.

Simple, ¿verdad?

Si no sabes como diseñar tu página, siempre puedes recurrir a alguna plantilla como las reseñadas aquí mismo para Photoshop.

Algunas páginas de error para fijarse:

La página de error de Apple

Escrito por Ivan

Profesor de informática y guionista de comics metido a dibujante vectorial. Los blogs ha redefinido los medios de comunicación, permitiendo que cualquiera pueda darse a conocer, compartir información, etc.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Esteban Rojas / Hace 8 años /

      Buenas recomendaciones, la usabilidad de la página en sí me parece lo mas importante, Francisco te falto poner la 404 de BlogandWeb 😛

      Saludos

      Responder a Esteban Rojas →
    2. Francisco / Hace 8 años /

      Es que la de Blog and Web como que no cumple con todo 😛

      Responder a Francisco →
    3. Rodolfo Llanos | www.soloingles.com / Hace 8 años /

      Es que la condicion es que sea usablemente divertido, algo “usable” pero que no divierte ni motiva al usuario deja de ser usable!
      Saludos, para agregar a favoritos este post!

      Responder a Rodolfo Llanos | www.soloingles.com →
    4. Pacoasen / Hace 8 años /

      muy curioso, se puede llegar a ser muy original si t lo curras;P

      Responder a Pacoasen →
    5. Francisco / Hace 8 años /

      Yo más que gracioso pensaría en algo “amigable”, claro, ahí también entra el humor, pero necesariamente es algo gracioso. Gracias por el comentario. 🙂

      Responder a Francisco →
    6. Pablo / Hace 8 años /

      Genial artículo, y las recomendaciones un ‘sobresaliente’.

      Yo descubrí la importancia de estas paginas 404, cuando me apareció la página de error 404 de Bloggea2.com. La que me ‘divirtió’, ‘tranquilizó’, y ‘ayudó’ a encontrar lo que estaba buscando.

      Un saludo

      Responder a Pablo →
    7. Villano / Hace 6 años /

      Hola…

      he editado el 404.php de mi plantilla y no funciona…

      sera posible porque estoy en un servidor local ???

      Gracias…

      Responder a Villano →
    8. Erick Rodríguez / Hace 5 años /

      Jajaja, artículo creado hace 1048 días ^^

      Responder a Erick Rodríguez →
    9. Mily / Hace 5 años /

      Llegué hasta aquí buscando como cambiar el aspecto de las páginas de error, pues las que vienen por defecto sin bastante feas. Gracias por el artículo, creo que es muy útil, y la foto de Einstein es muy original.

      Responder a Mily →
    10. sergio / Hace 5 años /

      He seguido todos los pasos y me da un internal server error…¿sabéis de que puede ser?

      Responder a sergio →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad