Using The Internet Archive’s Wayback Machine To Improve User Experience

Published:

By: Drew McManus

In: Design & Development, Web Tech

The Internet Archive’s Wayback Machine, which archives screencaps of your website, has been around for some time and it’s just as useful now as ever. Sure, it’s fun to see how some of the cringe-worthy designs from 2001 but go back within the last year and look for changes.

Outside of something like your homepage hero image, is anything different? If not, then you just discovered a problem that needs to be addressed and here’s how you can go about fixing it.

First, it is important to understand that the age of massive redesigns every few years is an antiquated approach for developing your web presence. If this is news to you, add this article by Louis Rosenfeld at SmashingMagazine.com to your reading list.

Next, if you have adopted a diagnostic driven, always tweaking approach toward your website, it pays to keep a visual record of those changes. This is where the Wayback Machine can come in handy if you don’t do this directly via manual screencaps (resources).

The goal here is to capture the subtle changes in layouts so as to make it easier to gauge if those changes are producing the sorts of results you’re after.

As an example, I recently wrapped up a metrics based assessment for my blog’s homepage and put the following changes in place based on what the data was telling me:

[twocol_one]Adaptistration homepage Pre Tweak[/twocol_one] [twocol_one_last]
Adaptistration homepage Post Tweak[/twocol_one_last]

[box]

[dropcap]1[/dropcap] Problem: social media badges in the header where causing issues on mobile devices.
Solution: relocated the social media badges from the header to the sidebar. Metrics indicated that even though conversion was good on desktop devices, the badges took up too much space on mobile devices, where they wrapped below the logo. The change was good pretense for upgrading the social media badge user experience by introducing new functionality that draws user counts in real time from the source platforms.

[/box]

[box]

[dropcap]2[/dropcap] Problem: as a byproduct of the change via item #1, there was now a great deal of awkward looking white space in the header on the desktop version of the site.
Solution: rearranged logo and top navigation. With the social media badges gone, there was room for a fuller, centered version of the logo, which works better on retina devices. The top nav menu was centered as well in addition to introducing a mega menu user interface. One added benefit of centering this content is it minimizes element shift across mobile to desktop viewing along with naturally moving eyeballs down to the content.

[/box]

[box]

[dropcap]3[/dropcap] Problem: share buttons below post excerpts forced line breaks on mobile devices.
Solution: reconfigured the share buttons. Metrics indicated that readers favor Facebook, Twitter, and LinkedIn so the Google+ button was moved inside the More button. This eliminated the problem of buttons forcing a line wrap when viewing the site on a tablet in either landscape or portrait orientation.

[/box]

[box]

[dropcap]4[/dropcap] Problem: a decrease in clickthroughs to the cartoon via its sidebar banner.
Solution: created a larger banner for the cartoon. The new image was designed with the same aspect ratio as the ArtsHacker banner above it. The new image includes expanded teaser content and a look that corresponds with the other nearby elements.
Bonus: the larger dimensions now allow the image to occupy 100% of column width on mobile devices.

[/box]

Additional changes include a new configuration scheme for social share buttons on Smartphone size mobile devices so as to eliminate line wrap issues as well as removing the post featured images (view). All of this puts more content on the screen and makes it easier for visitors to navigate.

Ultimately, this should provide a worthwhile case study for how you can go about improving your website visitor’s user experience.

wayback machine

[box type=”note”]Wayback Machine Tip: In addition to searching for archived screencaps of your webpage, you can also search for interior pages. If you haven’t changed up the URL permalink structure very often, you can go back through several years of interior page layouts.[/box]

Drew McManus
Author
Drew McManus
In addition to my consulting business, I'm also the Principal of Venture Industries Online but don’t let that title fool you into thinking I'm just a tech geek. I bring 20+ years of global broad-based arts consulting experience to the table to help clients break the cycle of choosing one-size-fits-none solutions and instead, deliver options allowing them to get ahead of the tech curve instead of trying to catch up by going slower. With the vision of legacy support strategy and the delights of creative insights, my mission is to deliver a sophisticated next generation technology designed especially for the field of performing arts. The first step in that journey began in 2010 when The Venture Platform was released, a purpose-designed managed website development solution designed especially for arts organizations and artists. For fun, I write a daily blog about the orchestra business, provide a platform for arts insiders to speak their mind, lead a team of intrepid arts pros to hack the arts, lead an arts business incubator, and love a good coffee drink.
Author Archive

Leave a Comment