Web Weave UI Entry

Mozilla Labs has another design challenge this fall: Web Weave UI. The purpose of this challenge is:

“Visualizing your browser data – How can we provide intuitive and useful visual representations of your browser data (such as bookmarks, history, tabs, stored credentials etc.) on a web page?”

In response to the challenge, here’s is my thought-about-too-long-but-finally-sketched-up-last-minute concept:

Web Weave Concept Sketch

Web Weave Concept Sketch (click image to see large version)

Not as polished as I’d like it, but I guess back-of-the-napkin works for the challenge as long as the idea’s there. Here’s more to explain the ideas behind the sketch:


Showing history and actions in a timeline view, using strings to represent different properties of visited pages. Strings can represent viewing by tabs, websites, and tags, or a combined single view of all visited pages. Strings can be sorted horizontally by different properties: title, most recently viewed, total duration viewed, most pages viewed, and so on. The range of the timeline can be adjusted to any start and end dates selected by the user, and viewed at different scales.

The Strings

Each string is made up of bars attached to a vertical line. Each bar is made up of coloured bands where pages were open and viewed. Colour variations in the bands indicate if the page was open, active, and if it has been previously visited. At points in the timeline where no page was open, the band is white. Gaps between bars represent timeframes where there was no activity in the string (set by a threshold value in view options).

When hovered over, each banded area in a bar displays a flyout of the pages represented by that string at that point in the timeline. The flyout has:

  • A title showing the indicating the name of the string and the point in time being viewed
  • A thumbnail of each page related to the string at that point in time, also showing the URL and title for each page (often this will be one thumbnail, but with multiple tabs and browser windows, more than one may be shown)

As the user moves over the band, thumbnails will update automatically, with no clicking required.

Each string can be pinned in a position to the left of the horizontal view when side-scrolling across strings occurs.

Timeline Selection

The Start and End date and times can be entered manually and adjusted through text boxes, a calendar picker, or via buttons for commonly-used time periods (e.g. today, yesterday, one week ago, one month ago).

The entire vertical scrollbar represents the total selected range. The scrollbar’s elevator can be moved up and down to adjust the timeframe being viewed. The elevator can also be stretched or shrunken by dragging on the handles on either end, causing the timeframe being viewed to zoom in and out, showing a shorter or longer timeframe, respectively. As the elevator is moved or stretched, the elevator’s endpoints indicate the timeframe being viewed in the current window. On the left side of the window, the range of time is also shown, with labels at predetermined intervals appropriate for the range being shown.

String Selection

Strings can represent various aspects of the browsing experience:

  • Sites: each string represents a collection of pages for a specific website domain, which is an often-used way to sort pages. It may also be the easiest way for the user to re-find visited pages he or she visits often.
  • Tabs: each string represents pages viewed under a tab in the browser. This option will most closely represent the browsing sessions in a visual manner.
  • Tags: each string represents pages with a specific tag assigned by the user when bookmarking pages. As pages could appear in more than one string simultaneously, this view would not allow the Show Followed Links option to be active.
  • Single string view: one string, combined of multiple side-by-side bars that just represent the maximum number of tabs open over the selected timeframe. Hovering over any bar shows a flyout with all thumbnails related to that point in time. Gaps do not appear between individual bars: gaps only appear when there is a lack of activity for the entire browser longer than the Gap Length setting

String Sorting

Users can select how strings are sorted along the horizontal axis based on the type of strings selected. Some common sorting attributes may include:

  • Alphabetically
  • Most recently viewed
  • Most times visited
  • Number of Pages viewed
  • Duration viewed
  • Duration open

Tunnel View

Below each string is an option (that also appears in a right-click contextual menu for each string), that allows the user to view the string in a full-window “tunnel view”. The tunnel view shows thumbnails of the pages related to the string along points in the timeline, including text-based information for each thumbnail such as time, title, and URL. Arrow keys can be used to move forwards and backwards in the tunnel. Pages are shown in the tunnel view at the point they are first viewed.

If the Show Followed Links option is on, the tunnel view will allow users to jump between strings as where links were followed. This is indicated in the tunnel view by blue dots along the wall of the tunnel. When hovered over, the dot will show the thumbnail, title, and URL of the link destination. If clicked on, the user is shown a view of the link’s related tunnel.

Viewing Options

A number of options are available to the user:

  • Show Followed Links: checkbox that toggles the visibility of which links were followed between strings. If made visible faint arrows between strings (but not within a string) are shown where links were followed.  This also affect the “tunnel view” by allowing users to turn into another tunnel where a followed link occurs.
  • Highlight Bookmarked Pages: checkbox that toggles the visibility of indicators showing when a page was bookmarked. The indicators are displayed as small stars slightly off-center from the bar.
  • Hide Skipped Pages: The user may wish to keep pages in history, but exclude certain pages or sites them from view in the timeline window. The user can setup a list of pages to skip, from anything under a specific domain name to specific pages.
  • Hide Pages Opened But Not Viewed: When using multiple tabs, the user may open many pages but never view them, essentially appearing as “false positives” in the timeline window. This checkbox toggles the visibility of such views.
  • Set Gap Length: the user may wish to change the gaps between bars to a shorter or longer timeframe. This option allows the user to do this, selecting an integer value and unit of time.

Tags: , ,