Inicio » Tutoriales » Guía para diseñar páginas de error

Guía para diseñar páginas de error

En este artículo recorreremos paso a paso una guía que debiéramos de tener en cuenta a la hora de diseñar una página de error 404. El contenido de esta página en especial debe ser encarado con sumo cuidado ya que de él depende que los visitantes continúen con sus búsquedas, o se retiren del sitio.

Tomaremos como guía varios artículos publicados en Internet por distintos autores y más recientemente de un artículo en ingles de ALA. Este artículo está armado con la intención de ser una hoja de referencia para cualquier desarrollador que necesite introducirse al tema.

¿Para qué sirve una página 404?

La página de error 404 es utilizada para informar que ha ocurrido un error al devolver la información que este ha solicitado.
Los motivos más comunes por los cuales se presenta la página 404 son los siguientes:

  • Link roto dentro del sitio: Este error es provocado por un descuido de la persona responsable de mantenimiento del sitio, normalmente suele suceder cuando se mueven páginas o archivos de lugar y no se actualizan los links en otras páginas del mismo sitio que apuntan a ellas.
    Un link roto desde un buscador: Algunos buscadores indexan los sitios automáticamente cada 2 o 3 semanas, por lo que si el responsable de mantener el sitio web mueve, borra o renombra una página y el buscador tenía un link hacia ella indexado, se producirá nuevamente un link roto hasta que el buscador vuelva a indexar automáticamente nuestro sitio.

  • URL mal tipeada: Algunas veces tipeamos mal las URL/direcciones de los sitios que queremos visitar. Tipeamos bien el dominio (ej:www.geekonline.com.ar) pero tipeamos mal la página en concreto (ej: www.geekonline.com.ar/inde.php) y por lo tanto, aparece el error 404 que nos informa lo que ha pasado.

  • Un formulario: Muchas veces al mantener un sitio web, se suelen cometer errores involuntarios y en ciertos casos, los scripts que controlan los formularios son borrados, movidos o renombrados. Cuando hacemos click en Enviar Información en nuestro sitio, este llama a un script y si este script no se encuentra, el error 404 se hará ver.

¿Cómo creo una página 404?

En realidad haría falta todo un artículo para explicar cómo se configura en el servidor una página de error 404. Hay muchos tutoriales en la web en donde paso a paso (y según el servidor en el cual alojen sus filas) pueden encontrar como crear una 404.
Tutoriales en español sobre configuración de páginas 404:

Hay que tener en cuenta que si estamos utilizando un servidor alquilado (que no se encuentra en nuestras oficinas/estudio/casa) debemos consultar con la parte técnica de la empresa a la cual pertenece el servidor, de lo contrario tal vez no podamos hacer funcionar el 404.

¿Qué debe incluir mi página de error 404?

Se han escrito muchos artículos al respecto y se han armado muchas discusiones también sobre cual es la mejor manera de mantener al navegante que se encuentra frente a una página 404. Algunos opinan que un error debe ser encarado con un poco de picardía y humor por parte de los responsables del sitio para aminorar el efecto negativo que puede producir en el navegante, otros que es indispensable remarcar cual fue el error para que sea corregido.

Por naturaleza las páginas de errores de los servidores webs son las ya conocidas "404 not found". Estas páginas violan los 3 principios básicos para los mensajes de error:

  • Debe estar escrita en un lenguaje no técnico.

  • Debe ser constructiva, ofreciendo pasos para que el navegante corrija el error.

  • Precisa, especificando cual fue el error con exactitud.

Las páginas de error 404 deben explicar al navegante cual fue el error y no quien lo cometió. Esta es una regla de oro que debe seguirse para no agredir al navegante acusándolo de inepto. A nadie le gusta que le marquen sus errores y menos a los navegantes, por lo que corremos el riesgo de perderlos.

Pero bien, ¿cuáles son las características básicas que debe tener una página 404?

  • Estética clara y limpia: No hace falta que el layout del error 404 sea el mismo que el de nuestro sitio entero. Puede hacerse una versión más liviana y limpia para no obligar al navegante a cargar todo el entorno si la información que en verdad esperaba ver no se encuentra frente a sus ojos. Hay sitios que optan por utilizar una página solo texto, pero es mucho mejor realizar una versión más sencilla y trabajar sobre ella.

  • Buscador: Es necesario que si nuestro sitio contiene un buscador, lo incluyamos en la página de error 404.

  • Una opción de reportar el error al administrador

También es necesario que tengamos en mente a todos los navegantes y no cometamos el error de suponer que ellos sabrán lo que significa Error 404. Es mejor dejar esta definición del error como referencia secundaria y enfatizar principalmente cual fue el error y como corregirlo inmediatamente.

Le pedimos disculpas…

Tomaremos el caso de IBM como ejemplo. Al ingresar mal una dirección en el sitio de IBM, este nos pide disculpas. Esto es un claro ejemplo de cómo los desarrolladores de IBM optaron por no acusar al navegante de haber cometido una equivocación.

Además, IBM nos da la posibilidad de reportar el error, o pedir información directamente. Esta es una buena solución y está orientada al usuario.
Porqué debemos obligar al navegante, usuario o cliente de nuestro sitio a seguir buscando? está claro que debemos ayudarlo a encontrar lo que busca, indicándole direcciones a tomar, informándole cual fue el error que se cometió, pero también es cierto que muchas de las personas que se encuentren con el error 404 no seguirán en la búsqueda, abandonarán el sitio y tal vez encuentren lo que buscaban en otro lugar.

IBM nos muestra como debe hacerse de la siguiente manera:

  • Nos pide disculpas por el error
  • Nos muestra de manera simple y limpia, las opciones que tenemos para proseguir
    • Nos da la opción de utilizar el buscador para encontrar el contenido que necesitamos.
    • Nos da la opción de llenar un formulario reportando el error y como respuesta, recibiremos el contenido que buscábamos originalmente en su web. Además de volverse a disculpar por la situación antes de llenar el formulario.
    • Nos permite utilizar un simple botón para *anónimamente* avisarles a los administradores que hay un link roto.
  • Nos permite ver las preguntas frecuentes (o FAQ)
  • Nos permite dirigirnos a soporte y descargas

Creo que está por demás decir que la gente de IBM se toma enserio al usuario "perdido".

Este fue un claro ejemplo de lo que se debe hacer para conseguir que nuestros navegantes, sigan su ruta en nuestro sitio.

¿Qué estética debe tener?

En la red existen muchísimos directorios de páginas de errores 404, pero uno de mis favoritos es Plinko, en donde podemos encontrar separados por categorías los errores y van desde sexys hasta el error 404 estilo Blair Witch Project.

Un buen caso de humor es Cannot find Weapons of Mass Destruction el cual hace referencia a la invasión a Irak cometida por el pueblo E.E.U.U.

Conclusión y cierre

Depende de la temática del sitio la página de error puede ser tomado de manera humorística o con seriedad, pero siempre debe cumplir su propósito, primero y principal, informarle al navegante donde está parado, luego informarle cual puede ser el posible error y para terminar, darle las opciones necesarias para que retome el camino perdido. El tema es libre, pero debe ser encarado con responsabilidad.

Si te gustó, compártelo:

Contenido relacionado