Advertisement
  1. Web Design
  2. General

Aprendiendo de los los Archivos Históricos de Sitios Web

Scroll to top
Read Time: 9 min

Spanish (Español) translation by Cristian Marroquin (you can also view the original English article)

Hay muchos recursos disponibles para ayudar a tu éxito en la web. Desde incontables análisis y aplicaciones SEO, para miles de artículos y reportes de nuestros colegas. Para cualquiera que tiene su propio sitio web podemos usar estos recursos para mejorar y afinar la experiencia en linea que le damos a nuestros visitantes. Un recurso no muy utilizado es el Internet Archive, que contiene años de actualizaciones y mejores de los sitios web más exitosos - y podemos aprender de ellos.

¿Cómo podemos tener pensamiento crítico sin ser capaces de citar y ser capaces de comparar que pasó en el pasado?

Brewster Kahle, el fundador de Internet Archive


¿Qué es Internet Archive?

Como puedes esperar de cualquier historial de archivos, el Internet Archive es el hogar de información de hace muchos años atrás. Pero hay algo; estos archivos contienen la caché de sitios web, lo que te permite visitar sitios web como Google de 1998. Esta información no tiene precio (sin mencionar que es cómica) y sorprendente de ver cómo el diseño ha cambiado al pasar de los años.

Checa este ejemplo de 1998, ¡Cuando Google era aun una versión Beta!

historic-archives-google-1998historic-archives-google-1998historic-archives-google-1998

Todos estos recursos sorprendentes pueden ser encontrados en la maquina del tiempo de archive.org. Simplemente escribe en la URL y comienza a explorar. Puedes divertirte viendo cómo algunos de tus sitios favoritos han evolucionado a través de los años (¿o solo yo soy un gran nerd?). Independientemente, un poco de tiempo, investigación, y dinero se ha invertido para mejorar estos sitios web y podemos observar esta información para nuestro beneficio.


¿Cómo Puedo Aprender de Estos Archivos?

Las personas sin conocimiento de su pasado, origen y cultura es como árbol sin raíces.

Marcus Garvey

Estamos siempre aprendiendo del conocimiento de otros, y no puedo pensar en un mejor lugar para aplicar este idea que en el campo del diseño de web. Analizando los archivos disponibles para nosotros podemos ver (a través de cierta cantidad de presunción) el porqué ciertas decisiones y cambios han sido hechos. Esto puede ayudar no solo a ver la progresión natural de un sitio web, pero mejorar el entendimiento del desarrollo del proceso envuelto en traer algo como Google a lo que hoy en día es.

Comparando la progresión de muchos sitios web podemos ver cómo el diseño ha cambiado al pasar de los años. Actualmente diseños planos son "populares" y puedes ver cómo el mismo Webdesigntuts+ ha cambiado para abrazar este estilo.

historic-archives-webdesigntutshistoric-archives-webdesigntutshistoric-archives-webdesigntuts

Aprovechando estos archivos es esencial para aprender del desarrollo del pasado y de los errores, así que echemos un vistazo a los procesos que a veces uso.

Paso 1: Elegir un Sitio Web

Es importante elegir un tema para comenzar tu investigación, preferiblemente dentro del mismo campo que deseas mejorar. Si tienes un blog entonces elige un blog exitoso en un área similar; si tienes una tienda en linea entonces aprende de los maestros de eCommerce. Por supuesto, estos son solo ejemplos.

Cuando te topas con estos sitios como son ahora es fácil de pensar que saltaron de la nada con éxito de la noche a la mañana, pero la maquina del tiempo nos dirá una historia diferente. Con los archivos podemos comenzar a ver los años de trabajo duro puesto para lograr la posición que tienen ahora y su progresión en diseño a lo largo del camino. ¿Cómo lo hicieron?

Paso 2: Sigue desde el Comienzo

Usaré play.com como ejemplo aquí. Siendo la URL deseada que es, hay datos desde 1996. Sin embargo, me di cuenta que su primera instancia como la tienda de eCommerce fue el 7 de agosto de 2003. La primera cosa que noté es que la apariencia y sensación icónica se ha mantenido por años hasta ser adquirida por Rakuten en el 2011, al punto que se sometió a una gran actualización y cambio de estilo.

Como vemos en cada encarnación de este sitio debemos también recordar que hay siempre limitaciones tecnológicas del tiempo de trabajo, como soporte de navegadores y reducción de velocidad.

Paso 3: Análiza la Progresión

Comparando cómo Play comenzó a lo que es ahora, encontrarás que los cambios han sido drásticos. Vamos a examinar áreas como experiencia del usuario, funcionalidad y estética. He encontrado cuatro capturas para las grandes actualizaciones que se hicieron entre 2003 y 2013. Así que veamos y comencemos a entender cómo cada cambio ha contribuido hacia lo siguiente.

2003

historic-archives-Play1historic-archives-Play1historic-archives-Play1

Esta es la primera versión lanzada en 2003. Hecha con un marcado tabular, que en aquel tiempo era común, y tiene un diseño simple. Un único estilo ha sido desarrollado para darle identidad de marca. El área grande del centro ha sido escogida como el punto más importante para publicidad mientras que la barra de búsqueda tiene poco peso en la página.

2007

historic-archives-Play2historic-archives-Play2historic-archives-Play2

Cuatro años más tarde se puede ver que el número de categorías que el producto ofrece ha crecido sustancialmente. La navegación principal ha cambiado, para mantener el mismo formato con una actualización que se necesitaba. No pensarías hoy, pero un biselado pesado era lo popular en algún punto.

La pieza principal del centro ha sido desplazada hacia abajo para hacer espacio para una sección de publicidad más prominente. No habiéndolo removido completamente indica que lo estaba haciendo bien, pero se sentía que podía ser incluso mejor.

2010

historic-archives-Play3historic-archives-Play3historic-archives-Play3

De nuevo el catalogo de productos se ha expandido. El menu ha crecido sustancialmente, siendo un justificado a la izquierdo para adecuar todo el contenido. La pieza original del centro (luego de perder su punto principal) ha caído de la gracia, siendo segundo mejor a la característica más prominente, últimamente siendo borrada por completo.

Se le ha dado más peso a la barra de búsqueda, más que todo por los análisis, quizás por el tráfico y comentarios de los usuarios resaltando su importancia. Puedes ver que la manera en la cual las personas interactúan en un sitio web ha cambiado de manera que la búsqueda se ha hecho más popular.

2013

historic-archives-Play4historic-archives-Play4historic-archives-Play4

Finalmente tenemos play.com como lo es hoy; esta es la actualización más grande de todas. La barra lateral ha sido removida completamente y hay mucho espacio en blanco. La pieza central se expandido al ancho completo de la página después de probar por años que cumple un rol importante en la página.

El estilo del sitio ha cambiado completamente y ha sido totalmente rebautizado. Algunos colores familiares permanecen y es fácil de ver que siempre estamos en el mismo sitio web. La barra de búsqueda es mucho más grande que antes y la influencia del usuario ha sido notada para que esto pasara.

Paso 4: Reúne tus Resultados

Viendo cada paso hacia el sitio web final y definitivo podemos tomar mucho de lo cual aprender. Podemos ver que la búsqueda ha sido una parte crucial de eCommerce, interacción del usuario ha cambiado y de esto puedo hacer presunciones precisas. Creo que un usuario tiene en mente lo que está buscando antes de acceder al sitio web, yendo directamente a la barra de búsqueda. Por esta razón ellos se harán relativamente ciegos a muchos elementos de la página. Haciendo la sección de publicidad más prominente para que puede llamar la atención del visitante, incluso subconscientemente.


Tráelo Todo Junto

Ahora que entendemos los beneficios de aprender de los archivos podemos añadir un arsenal de herramientas y recursos disponibles para nosotros. Usado archivos al lado de otras herramientas podemos descubrir incluso más información.

Con Alexa.com somos capaces de hacer seguimiento del tráfico de un sitio web al pasar de dos años. Comparando esto con los archivos podemos observar una correlación. A veces esto puede ser una manera de confirmar nuestro análisis de página, sea malo o bueno. A veces un cambio podría tener efectos negativos en el tráfico y podemos aprender de esto para no cometer los mismos errores.

No Saltes a la Conclusiones

Cuando se ve la correlación entre Alexa y Internet Archives, debes asegurarte de no saltar a conclusiones. La caída de MySpace no fue por el cambio de diseño, sino el nacimiento de una fuerte oposición.

Haz tu investigación para asegurarte de los resultados son precisos.


Caso de Estudio: Disqus

Disqus en un sistema grandioso usado en millones de sitios web (incluyendo Tuts+). Cerca de los últimos años su popularidad ha visto ganancias gigantescas. Esto ha sido por un número de razones, pero al tiempo de su incremento en el tráfico solo parece que una actualización en el diseño fue hecho. Esto ha contribuido al incremento de su popularidad y podemos preguntarnos el porqué.

historic-archives-disqus-charthistoric-archives-disqus-charthistoric-archives-disqus-chart

El Viejo Diseño

Esta es la página principal en el 2011.

historic-archives-disqus1historic-archives-disqus1historic-archives-disqus1

Solo tienes 10 segundos para atraer usuarios y convencerlos de echar un vistazo más cerca.

Jakob Nielsen

El diseño en general es solido, pero el producto actual no mostrado correctamente. Sin tomar tiempo para leerlo, no tendrías ninguna pista de lo que Disqus hace. Dr. Jakob Nielsen, un experto renombrado notó que tienes solo 10 segundos para atraer usuarios y convencerlos de echar un vistazo más de cerca. Esto significa que necesitas dar tu mensaje inicial lo más rápido posible para convencer visitantes, aquí no estoy convencido. Veamos el nuevo diseño.

El Nuevo Diseño

Instantáneamente puedes ver una mejora grande en estética, el diseño es organizado y simple.

historic-archives-disqus3historic-archives-disqus3historic-archives-disqus3

El producto mismo es ahora entendible y se le ha dado el enfoque a la página principal. De esto, usuarios que no saben lo que Disqus hace pueden ver fácilmente que es acerca de un sistema para comentar en los sitios web. Aunque el gráfico previo se mira bien, tiene poco significado y era un distractor para el propósito original que tiene. El llamado de acción "Obtén esto para tu sitio" es más prominente ahora y las guía a los ojos hacia ello.

Creo que a partir de eso hay clara evidencia de que un cambio de diseño ha contribuido hacia el incremento de su tráfico y a disminuye un poco la popularidad. Podemos tomar esta información y usarla como guía para nuestras decisiones cuando estamos diseñando una página o publicidad para un producto en linea.


Conclusión

De estos ejemplos podemos ver claramente el beneficio de aprender de los archivos históricos. Pueden formar parte crucial del proceso de investigación para obtener conocimiento de los sitios web más exitosos actualmente.

Es importante hacer tu investigación y usar Internet Archives como una herramienta entre todos los recursos disponibles. Recuerda que puedes hacer presunciones aquí y que nada será un hecho malo. Los archivos pueden complementar tu arsenal y mejorar la calidad de tu investigación.

Espero que hallas disfrutado este artículo. !Gracias por leerlo!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.