Firefox released data from Test Pilot — their framework for collecting Firefox usage data from users that opt-in and install it — and asked people to visualize it. The data is represents one week of Firefox usage for ~270,000 people, and ~4,000 of them also filled out a survey with basic demographic information. I was interested in what usage looked like over time and by age group, so I pulled out Python, sqlite, and R for exploration and used Illustrator to clean it up.
Here’s the final version:
And here’s a version with my annotations:
How?
I used SQL to grab all the STARTUP, ACTIVATE, SHUTDOWN, and INACTIVE events from the ~4,000 users that filled out the survey. Then I parsed that with a Python script that computed how many users in each age group were online every ten minutes. I plotted that data with R (using LOESS for smoothing) and then tidied it up with Illustrator.
How can we make sense of this rich source of data and how do we best present this data to the user?
After brainstorming, sketching, and talking with other SI students, I came up with Timeline, a new way of displaying and interacting with web browsing history.
Need
Browsing history can be a necessity for a number of reasons, but one common motivation is needing to find something visited in the past but don’t having enough information to simply search for it, either using a search engine or the fulltext records of the browser’s history. Perhaps the user only remember that they clicked a link from Amazon.com, or that it yesterday morning between checking their email and doing research at work. These are the use cases that Timeline targets.
Instead of showing web history as a one dimensional list, Timeline includes additional contextual information to help people re-find the pages they were looking for. This information includes:
the time of day visited
the duration of the visit
the browsing path to each page
whether pages were opened in a new tab or a new window
whether the page was bookmarked
the “active browsing track,” or what pages were in focus and which were in the background at any specific point in time
Mockup
Here is a sample mockup of Timeline which shows the most important features. Click for larger image.
Video
Future improvements
Some probably necessities in the future:
Controls for resizing the time interval shown.
A search or filter interface (I’m imagining something akin to OS X’s search within System Preferences, where matches glow and non-matches are dimmed).
About me
I am a Master’s student at the University of Michigan’s School of Information, specializing in Human-Computer Interaction. I have a B.S. in Computer Science and Mathematics, also from UM. I enjoy designing and developing for the web because of its massively widespread influence.
