I'm David Little, a user experience researcher and designer

Weave: visualising browser data

Posted: September 25, 2009

Mozilla’s Web Weave UI design challenge seeks to find solutions to the issue of visualising browser data accumulated across a number of devices, such as:

• Bookmarks
• History
• Tabs
• Stored credentials

The Mozilla Weave project aims to allow synchronisation of this information across different Firefox instances. However, this particular design challenge is looking at ways that this information may be shared across different browsing devices when access to Firefox isn’t possible, i.e. via a web page.

Details of my proposal follow. It has been in part influenced by the findings of one of the Challenge’s recommended readings: Jason Hong, Contextual Web History: Using Visual and Contextual Cues to Improve Web Browser History (PDF), and other existing web-based mechanisms for managing visual assets (e.g. Flickr).

One of the findings of the paper was that visual cues in the shape of thumbnail images of visited websites helped users to better identify sites in their browsing history: the most useful size of these thumbnails was found to be around 235 by 148 pixels (p.5). This visual approach to representing history is being used by other browsers, including Safari and Chrome.

My idea expands on the use of visual cues for browsing history and also applies them them to bookmarks, tabs, credentials and history. As the data in this example becomes visual, it also lends itself to being managed by tools similar to those for managing photos and other visual assets on social networking sites. The Flickr model of page layout and set (“folder”) management, mainly due to its familiarity to me seemed to be of particular use.

The prototypes presented have been created by Balsamiq Mockups and are deliberately lo-fi. However, they help to clarify some of my concepts. They leave aside logging in, Web Weave account management and help screens etc. and are broken down into the following screens:

• Bookmarks
• Browsing history
• Tabs
• Web accounts
• Preferences

Main menu

The main menu provides an overview visualisation of all stored data. All main headings, “Bookmarks”, “My browsing history” etc. can be expanded and hidden and show recent activity.

A search box enables users to search across all stored data (with the exception of passwords) — searches would also be filtered by data type (bookmarks, history, tabs etc.).

Both Firefox’s existing method of organising bookmarks and the bookmarking sharing service Delicious allow users to file bookmarks of websites and categorise these by tags (Firefox and Delicious) and / or sorting by folder (Firefox). Whilst this allows for cross-referencing of bookmarks, bookmarks are presented textually as the title of the website, its URL, user generated tags, and in the case of Delicious, a textual description.

My model presents the data visually, showing thumbnail images for each bookmark, alongside its metadata, some of which is automatically generated (URL, site title, date visited), other parts of which are user generated (tags). In this visualisation, all data can be edited in place (as with editing photo metadata in Flickr). Bookmarks can also be deleted via clicking on an icon with a suitable “delete” metaphor, and filed in one or more folders (like Flickr “sets”). The method for filing shown in the prototype was also influenced by Google Mail and Reader‘s method of associating emails / feeds with one or more folders.

The folders created by the user are shown to the right, much like sets in Flickr. These can be edited by activation of the relevant edit link. Users may wish to edit the folder’s title and thumbnail image, using either the thumbnail of a representative website or an image selected by URL or direct upload. A default placeholder image would be used in the absence of a selected image.

Browsing history

Firefox’s current “show history” option presents a textual list of previously visited sites, showing the following metadata: site title, tags and location (URL).

Jason Hong’s paper cites research that, although up to 81 per cent of web pages visited by users are revisits, web browser history functions are only used around 0.2 per cent of the time to initiate these visits.

In this model, browser history is visualised as it is to an extent in Safari and Chrome, but with more accompanying metadata and the ability to add the sites as bookmarks. Selecting the “Add to bookmarks” functionality allows users to add and amend site metadata and file the bookmark in an existing folder (or in  a a new folder).

The time periods selected for differentiating browsing sessions are kept as per the standard Firefox organisation, i.e. today, this week, then previous months. A calendar widget is suggested as an alternative way of browsing by particular day, with the page content updated dynamically as the user clicks through dates. Other sort options which might suggest themselves are: web site title, URL, the device the page was accessed on or by tabs.

Part 2: tabs, web accounts (credentials) and preferences.

‹‹ More writing