Tuesday, September 29, 2009

Mozilla Labs Design Challenge: Weave Web UI -- History Visualizations

Overview

For this design challenge I chose to focus on new ideas for visualizing history data. What guided me through the design process were my own experiences of digging through history lists to find forgotten links. I asked myself what were the questions I dealt with when searching for a website I have encountered before, and what were the tools or approaches that might have helped me along. I came up with 4 interactive visualizations, each handling the subject thorough a different lens. These are just initial drafts, showcasing the general idea.


Beads


Beads looks into the amount of time spent browsing each website, which might be helpful since many times, pages that left an impact on us were pages that we spent more time on. The size of each bead represents the time spent on each page; the larger it is to more time we gave it. The color of the beads varies in saturation and luminance according to the frequency of visits to each website. Websites that are already in our bookmarks will appear in a very pale and transparent color. Sites that we only visited once will appear bolder and brighter. By clicking on a bead, the user can view the name and thumbnail of the page.


Keywords


Many of our browsing sessions begin with a query to a search engine. This could be very useful for us to start the hunt for that forgotten website we are searching for. Keywords rounds up these search queries by date and show us how many pages we visited in the following session, until the next search term was entered. When clicking on a keyword, the keyword row collapses to expose thumbnails of the relevant pages that followed. The keyword list can be browsed by date, or a specific keyword can be entered in search box to filter the results.


Flashback

Flashback offers exploration through a thumbnail display, which is in many cases a must have tool for browsing stacks of links. Much was already said about the effectiveness of user recognition when shown visuals, flashback aims for this while creating a toy like hypnotic experience. The field starts rolling automatically allowing the user to watch the running display of links, this can be paused or resumed. When dragging and holding the scroll handle to either side the field scrolls rapidly, and when leaving it, the field slowly draws to a halt while the handle snaps elastically back to its position.

Recap

Recap tackles the issue by summarizing the different actions and tasks carried out on each day. Was a file downloaded? Was I watching a streaming video? Was I commenting in a blog? Under each cell a corresponding dot will mark if one or more such actions were taken on that day. By clicking on the dot the list of the relevant pages is displayed.