There are a plethora of resources available to aid in your success on the web. From countless analytics and SEO applications, to thousands of articles and reports from our peers. For anyone who runs their own website we can use these resources to improve and fine tune the online experience we give our visitors. One oft-overlooked resource is the Internet Archive, which contains years of fine-tuned updates and improvements from the world’s biggest and most successful websites – and we can learn from them.
How can we have critical thinking without being able to quote and being able to compare what happened in the past?
What are the Internet Archives?
As you would expect from any kind of historial record, the Internet Archive houses information dating back years. But there’s a twist; these records are cached snapshots of websites, so you can actually visit webpages such as Google from as far back as 1998. This information is priceless (not to mention quite humorous) and it’s astonishing to see how design has changed over the years.
Check out this example from 1998 when Google was still in Beta!
All these amazing resources can be found on the waybackmachine over at archive.org. Simply type in a URL and start exploring. You can have a lot of fun seeing how some of your favorite sites have developed over the years (or am I just a huge nerd?) Regardless, a lot of time, research and money had gone into improving and tweaking these websites and we can observe this information for our own benefit.
How can we Learn From These Records?
A people without the knowledge of their past history, origin and culture is like a tree without roots.
We are always building on the knowledge of others, and I can’t think of a better place to apply this ideal than in the field of web design. By analysing the archives available to us we can see (through a certain amount of assumption) why certain decisions and changes have been made. This can help to not only see the natural progression of a website, but better understand the development process involved in bringing something like Google to what it is today.
By comparing the progression of many websites we can also see how design trends have changed over the years. Currently flat design is “in” and you can see how Webdesigntuts+ itself has changed to embrace this style.
Leveraging archives is essential in learning from past developments and mistakes, so let’s take a look at a process I often use.
Step 1: Choose a Website
It’s important to choose a subject to begin your research, preferably within the same field you wish to improve on. If you run a blog then choose a successful blog in a similar niche, if you have an online store then learn from the eCommerce masters. Of course, these are just examples.
When you encounter these sites as they are today it’s easy to think that they popped up from nowhere with overnight success, but the Waybackmachine will tell a different story. With archives we can begin to see the years of hard work put in to achieve their current position and their design progression along the way. So just how did they do it?
Step 2: Follow From the Very Beginning
I will use play.com as an example here. Being the desirable URL that it is, there is data running back until 1996. However, I came across its first instance as the eCommerce store it is today on 7th August 2003. The first thing I noticed is the iconic look and feel Play have maintained for years until being acquired by Rakuten back in 2011, at which point it underwent a much larger update and style change.
As we look at each incarnation of the site we must also remember that there are always the technological limits of the time at work, such as cross-browser support and reduced speeds.
Step 3: Analyse the Progression
By comparing how Play started to what it is today, you will find that the changes have been drastic. Let’s drill down and examine areas such as user-experience, functionality and aesthetics. I have found four snapshots for the large updates made between 2003 and 2013. So let’s take a look and begin to understand how each change has contributed towards the next.
2003
This is the very first version launched in 2003. Built with tabular markup, which at the time was common, and has a simplistic layout. A unique style has been developed to give strong brand identity. The large area in the center has clearly been chosen as the prime spot for internal advertising whilst the search bar is given little weight on the page.
2007
Four years later you can see from the number of categories that the product range has grown substantially. The main navigation has managed, however, to maintain the same format with a much needed design upgrade. You wouldn’t think it today, but heavy bevels were actually pretty trendy at one point..
The old center piece has been moved down to make way for a more prominent advertising section. Not having removing it completely indicates that it was actually doing well, but it was felt the area could be put to better use.
2010
Again the catalogue of products has expanded. The menu has grown substantially, becoming left justified to better fit all content. The original center piece (after losing its prime spot) has fallen from grace, becoming second best to the more prominent feature, ultimately being removed completely.
The search bar has finally been given more weight on the page, most likely due to analysis, perhaps heat maps and user feedback highlighting its importance. You can also see how the way people interact with a website has changed as on site search became more popular.
2013
Finally we have play.com today; this is by far the biggest update of all. The side bar has been removed completely and there is much more whitespace. The center piece has now stretched to the full width of the page after proving for years that it held an important role on the page.
The style of the site has changed completely and it has almost been totally rebranded. Some familiar colors remain, however, and it is easy to see that we are still on the same website. The search bar is now much bigger than before and a user trend has clearly been noted for this to happen.
Step 4: Gather Your Results
By looking at each step towards the final and definitive website we can take a lot away to learn from. We can see that search has become a crucial part of eCommerce, user interaction has changed and from this I can begin to make accurate assumptions. I believe that a user will already have in mind what they are looking for before they even get to the site, heading straight for the search bar. For this reason they will become relatively blind to most elements on the page. By making the main advertising section massively more prominent it can better catch a visitor’s eye, even subconsciously.
Bringing it all Together
Now that we understand the benefits of learning from archives we can add it to our arsenal of tools and resources available to us. By using archives alongside other tools we can uncover even more information.
With Alexa.com we are able to track the traffic of a site over the course of the last two years. By comparing this to archives we can often observe correlation. Often this can be a way to confirm our analysis of a page, be it good or bad. Sometimes a change could have had negative effects on traffic and we can learn from this not to make the same mistakes.
Don’t Jump to Conclusions
When seeing correlations between Alexa and Internet Archives you must be sure not to jump to conclusions. The demise of MySpace was not due to a design change, but the rise of stronger opposition.
Do your research in order to make sure your results are accurate.
Case Study: Disqus
Disqus is an awesome commenting system used across millions of websites (includiung Tuts+). Over the last year its popularity has seen huge gains. This would have been for a number of reasons, but at the time of its rise in traffic it just so happens that a large design update was made. This has surely contributed to the rise and we can begin to question why.
The Old Design
Here is the landing page of the site back in 2011.
You have just 10 seconds to engage users and convince them to take a closer look.
The overall design is solid, but the actual product is not well displayed. Without reading into it you would not have a clue what Disqus is or does. Dr Jakob Nielsen, a renowned usability expert noted that you have just 10 seconds to engage users and convince them to take a closer look. This means you need to get your initial message across as quickly as possible in order to convert visitors, here I am not convinced. Bring in the new design.
The New Design
Instantly you can see a huge improvement in aesthetics, the design is clean and simple.
The product itself is now clearly understandable and has been given a prime spot on the page. From this, users with no clue about Disqus can better see that it is an onsite commenting system. Although the previous graphic looked nice, it held little meaning and was rather distracting from the purpose. The call to action “Get this on your site” is also much more prominent now and better guides the eye towards it.
I believe that from this there is clear evidence that a design change has contributed towards the increase in traffic and a decrease in drop rate. We can take this information and use it as a guide towards our own decisions when designing a splash page or advertising a product online.
Conclusion
From these examples we can clearly see the benefit of learning from historic archives. They can form a crucial part of the research process in order to gain inside knowledge of the most successful websites around today.
It is important to do your research and use Archives as a tool alongside all other resources available. Remember that you can only make assumptions here and nothing will be hard fact. Archives can compliment your arsenal and improve the quality of your research.
I hope you enjoyed this article and thanks for reading!