Creando páginas de error 404 amigables para el usuario
Publicado el Lunes 19 de Marzo del 2007 @ 6:55 por Armonth.
- De: Jeff Atwood
- Fecha del original: 16 de Marzo del 2007
- Original: Creating User Friendly 404 Pages
Paso a traducir un texto bastante completo sobre cómo crear páginas de “Error 404″ amigables para el usuario.
Nosotros entendemos que significa 404: Página no encontrada. Pero el promedio de usuarios de Internet no tienen idea de que significa el número 404 o que hacer al respecto. Para ellos, es sólo otro mensaje de error ininteligible del ordenador. Muchas páginas 404 son barnizadas con escritura geek. Consideremos la página 404 por defecto del IIS:
La página 404 por defecto de Apache no es mucho mejor:
Internet Explorer 7 intenta escudar al usuario de estas páginas 404 pobremente construidas sustituyendo los mensajes de error de forma automática:
No está mal. Es desde luego una mejora sobre las páginas 404 por defecto de Apache o IIS. Pero se puede hacer mejor.
Vamos a parar de depender en el comportamiento por defecto de nuestros servidores web y navegadores y crear nuestra propia y personalizada página 404. Desgraciadamente, muchos sitios tienen páginas 404 personalizadas que apenas se distinguen de las páginas genéricas de un servidor web. Imaginad lo molestas que son.
Entonces, ¿qué se puede esperar exactamente de una página 404 personalizada y amigable para el usuario?. Aunque hay un sitio entero dedicado a documentar páginas 404 divertidas, el humor no es necesariamente práctico. ¿Qué podemos hacer para ayudar al usuario en este punto? Algunas ideas:
Elimina el 404
Sí, el código HTTP es el 404, pero no hay absolutamente ninguna razón para que tenga que ser mostrado en la página. Los códigos de error no son prácticos. Una explicación simple en inglés plano (N.T: o castellano o el idioma de la web) es todo lo que hace falta. Cualquier página 404 que tiene un 404 escrito si no es ya un completo fracaso, va por buen camino.
Notificate tú mismo de forma automática de los errores 404
Repite después de mí: no es el trabajo del usuario el informarte acerca de problemas con tu web. Si el usuario tiene que hacer click en un botón para notificarte acerca del error 404 que ha aparecido o tiene que rellenar un formulario para enlaces rotos, acabas de fallarles del todo a tus usuarios. Las notificaciones sobre errores 404 deben ser automáticas y con eso no quiero decir “espera sentado en mis logs hasta que tenga tiempo para mirarlos”.
Sugiero realizar informes detallados de forma semanal o mensual que luego sean enviados automáticamente por correo a los responsables para que puedan corregirlos. También recomiendo la notificación por email en tiempo real si aparece una avalancha repentina de errores 404, así tendrás la oportunidad de arreglar el problema mientras todavía sea relevante — antes de que todo el mundo se largue de tu página aparentemente inexistente.
Intenta encontrar lo que el usuario está buscando y ofreceré enlaces a posibles concordancias
No te limites a poner un panel de búsqueda en la página del error 404 y forzar al usuario a realizar una búsqueda. ¡Eso es escaquearse del problema!. En su lugar, puedes realizar automáticamente la búsqueda usando la url incorrecta como entrada de datos para mostrar los resultados en la página 404.
También puedes intentar corregir la URL, basándote en reglas derivadas de los diez o quince errores más observados en los informes. ¿La página termina el .htm en lugar de .html? ¿Está mal escrita? ¿Son tus URLs case-sensitive? ¿La página ha sido movida, renombrada o reorganizada en otro sitio? Es de agradecer tener un campo de búsqueda en tu página 404 para comodidad del personal pero forzar a los usuarios a realizar búsquedas debería ser la última opción.
Ofrece enlaces a los items más populares o más recientes.
Si alguien está visitando tu sitio, estadísticamente hablando, hay una gran posibilidad de que venga a ver la misma atracción que el resto. Aunque no estén, tu contenido popular es popular por algún motivo. ¿Por qué no mostrar enlaces a tus “grandes hits” en la página 404? De forma similar, si tienes un sitio que se actualiza periódicamente como un blog o un diario, muestra las últimas entradas o los últimos artículos en la página 404. Y por lo menos un enlace de vuelta a la página principal (main/home).
Ofrece una lista filtrada de enlaces relevantes y un usuario errante nunca estará a más de un click de distancia para escapar de su aprieto actual.
Mantén la página 404 simple.
Tu página 404 debe ser breve1, concisa y relevante. Piensa que ahora estás tratando con usuarios confusos que no encuentran lo que han venido buscando. No es bueno hurgar en la herida abierta spameando al usuario con una página 404 enorme, complicada y con un mapa del sitio entero. Por ejemplo, la página 404 de apple.com comete este error.
He encontrado que Jakob Nielsen, A List Apart y 404 Research Lab tienen también buenos consejos para hacer páginas 404 potencialmente amigables en lugar de las páginas geek con incomprensibles señales de fin del camino que suelen ser.
Desafortunadamente no tengo tiempo para implementar una página mejor de Error 404 en mi propio sitio. Todavía. Si estás buscando ejemplos reales de páginas 404 que hacen esto bien, puedo recomendarte la página de 1976 design o la useit.com. Lamentablemente, esta lista de ejemplos es extremadamente corta debido a los pocos sitios que cumplen estos criterios. He mirado páginas 404 de docenas de sitios la mayoría fallan espectacularmente sirviendo páginas 404 muy hostiles hacia el usuario.
Cualquier camino que elijas, nunca decidas ir por las páginas 404 por defecto. Reemplaza estas páginas con una personalizada que sea cortés, reveladora y sobretodo: práctica.
1 ¡Breve pero no demasiado!. Tu página personalizada debe estar por encima de los 512 bytes o de lo contrario Internet Explorer asumirá que es un mensaje 404 estándar del servidor y lo reemplazará con su propia versión amigable.
23 Comentarios (feed)
-
corsaria nos comenta:
A mí me gusta esta:
http://earful.bitako.com/123Aunque esta otra apunta maneras:
http://sigt.net/123:-)
-
kesar nos comenta:
Otro gran artículo es este: http://alistapart.com/articles/perfect404/
:)
gracias por traducirlo, está muy bien -
german nos comenta:
A mi me gusta esta. ja ja ja
http://www.noseencuentra.com/index.htm -
gu nos comenta:
Yo me construi la mia propia en mi servidor:
-
SimpleText nos comenta:
Esta es la que más me gusta: http://www.elpombo.com/404
-
SoDark nos comenta:
Yo tengo esta : www.sodark.es/?s=noencontrado.php
-
chencho nos comenta:
hombre, una oportunidad de mostrar mis página de error!! :)
Aunque la del priemer comentario es muy graciosa :)
-
Albert Barra nos comenta:
Yo sin saberlo tenia una creada.
-
Javier Soto nos comenta:
Esta pagina de error 404 es la que mas me gusta de todas las que he visto, est muy muy atractiva:
http://www.motosdeagua.es/una_pagina_cualquiera_que_no_exista
-
Álvaro nos comenta:
Mi 404 tampoco está nada mal:
-
Alaingonza nos comenta:
Buena entrada, voy a ver si modifico mi página 404.
Saludos
-
Edwin Aviles nos comenta:
Estoy cambiando la página de error 404, 404;2, 404;3 en IIS 6.0 por un *.aspx que debe tener una funcionalidad para tomer la Url original y procesarla para enrutar de manera inteligente a otro sitio.
cuando prueb local en IIS 5.* funciona y me muestra el Uri, AbsolutePath, OriginalString, PathAndQuery… and so on. pero cuando hago mi prueba en el IIS 6.0 y en la URL del IIS para cambiar el que esta por defecto no em funciona local me funciona con esta.
/ControlError/ControlError.aspx
pero no me funciona en el Servidor ..Les Agradezco si me puede ayudar con alguna solución.
-
Hernán Gabriel nos comenta:
He descubierto esta página porque estamos en pleno desarrollo a favor de la libre expresión y la libertad de comunicaciones.
La misma nos fue recomendada por un mail de la OIT para prevenirnos sobre los problemas 404.
Escribe un diseñador, no un programador.
Cualquier sugerencia de esta página o de sus usuarios es bien recibida.
Brindo mi mail: hernangbattiston@hotmail.com
abogamos por la libertad de educacion y conocimientos citados en la declraración universal de la ONU. si alguién siente lo mismo y es argentino (cuestiones de marco legal) no dude en comunicarse
Muchas gracias a todos. -
RuFuS nos comenta:
En este casi te mandan a paseo
http://www.belver.es/error/404.html -
Erica nos comenta:
Esta es mi pagina 404 :) http://aweba.itdmf.com/noencontrado
-
Hugo Armando Mejia nos comenta:
Esta muy bueno esa primera web de error me da dolor de cabeza con solo mirarla jejejeje, ca les dejo la mia un poco persoanlizada y amigable con el usuario.
-
Marvin nos comenta:
Hay varias paginas de las que dan que no tienen ya el 404
Acaso sus hosting murieron??
Jeje
Salu2
-
robaleche nos comenta:
Esto depende el tipo de web.
Si la web es del tipo “personal”, si estoy de acuerdo en que el page 404 sea simple.
Pero, si es del tipo “noticias, descargas, ventas…” deben mostrar su aviso de error, y debajo un estilo de “site map” para que el usuario se pueda orientar y no perder el animo de busqueda. (por citar tu ejemplo en apple.com)
-
Daniel nos comenta:
hola si que estan buenos tus consejos yo acabo de personalizar la pagina de error y asi me quedo.
-
Null nos comenta:
Te gusta mi página de eror 404?
http://www.documentoweb.com/error-404.phpMe basé en algunas de tus recomendaciones, pero más que nada comprendiendo a lo que quiere llegar el usuario. Me gustaría leer una respuesta para ver como piensas, porque creo que sabes mucho.
Saludos.
Null de DocumentoWeb.com. -
Armonth nos comenta:
Null no está mal, aunque no le veo el punto a tener que copiar y pegar las urls de dentro del textarea…
Edito: utiliza un <pre> imitando ese textarea con CSS (se le puede poner hasta que haga scroll, mirate el CSS de SigT) y así puedes poner esos enlaces en forma de enlaces (títulos “clicables”) en lugar de text plano.
-
Null nos comenta:
Lo que pasa es que el texto presentado en esa area de texto es directamente el urllist.txt para los motores de búsqueda, el cual programé para que se actualizara automáticamente editando el texto plano.
Me diste una buena idea y la comprendo totalmente, no se me había ocurrido tal cosa. Vamos a ver si a la noche o pasado mañana puedo explotar el archivo y transformar todos los textos en URLs mediante PHP.Gracias por la idea. Saludos.
PD: ¿alguna otra?
-
Null nos comenta:
ya, ahora si esta listo :P.