Humanised browsing history experiment

One of Nicolas Gallagher’s recent tweets piqued my developers interest a few days ago. He noted that vitra.com displays “A mini-history of your on-site browsing” within the footer of their site.

At first glance, the “mini history” looks like a basic common or garden breadcrumb trail but it is, in fact, a list of all of the pages you have previously visited on the site – which is a rather cool concept in my opinion and one of the better attempts at an alternative navigation system that I’ve seen in a long time.

I started to think about ways in which to visually break the list from it’s “breadcrumb trail” look & feel and also wondered how this functionality could be achieved without resorting to the use of server-side sessions.

Both of these questions were actually relatively easy to answer.

I attempted to humanise the list by creating a standard paragraph of text instead of the breadcrumb trail list and the server-side sessions were easily replaced by a Javascript solution – Thomas Franks fantastic Session variables without cookies (it’s worth noting that Vitra stores the browsing history data in a cookie and doesn’t use server-side session storage at all).

Creating a paragraph of text also gives us the opportunity to alter the wording according on the number of pages viewed – which manages to keep things fresh for the user on each page view.

Additionally, time spent on each page is also stored (a timestamp is saved onload and another onunload for the current URL thus enabling you to calculate the time spent on the page) meaning that the wording used within the generated text could also change according to the amount of time spent on each individual page.

Where would this be usefull?

Obviously, content heavy sites with complicated or erratic site hierarchies would benefit the most (think news sites like the guardian or Microsoft’s developer library).

It’s worth pointing out that this isn’t a replacement for the standard breadcrumb trail – I think the two systems would sit well together, a standard breadcrumb trail at the top of the page and the Humanised browsing history in a sidebar or footer for example.

Anyway, here’s a demo of the script in action – albeit, using static test data. View the page source to see how it was done.