Collated Path Project Page

[ Description | Screenshots | Demos ]

Description

The Collated Path is a one-dimensional interface element that is used to manage things in a workspace, like web pages in a web browser, or revisions of a document in a word processor, or recently received email in a mail program; anything relevant to the task at hand. It is designed to provide the user with a better glimpse at the content or meaning of the data than traditional elements like hierarchical trees or lists by altering the way the interface looks according to some property, such as the last time accessed, or priority. Items in the Collated Path are represented as "pages" in a line, which are positioned and scaled relative to each other's value. So if we were displaying web pages from a browser's history, the most recently accessed would be the largest and positioned furthest to the right, while the least recently accessed would be smallest and all the way at the left. You can see examples of the Collated Path in the screenshots section. Comments and feedback are welcome.

People Involved in the Project

Natalie Jeremijenko [website, email ]
Christian Niles [email ]

Screenshots




This image shows how position and size need not be related. The pages are positioned in equal intervals while their sizes differ based on random data.


The image above is a sample from the Picture Australia image achive. The search results being displayed are for "kangaroo".


Demos / Download

Download the Demo

Demonstration software is being made available to allow people to play with the path and see it in action. However, this code, like the project itself, is still in preliminary development. You will need Java 2 installed in order to run the demos.
After downloading this file, you will need to unzip it using a program like WinZip on Windows, Stuffit Expander for Macintosh (also works on windows, linux, and solaris), or GNU gzip.

How to run the software

After downloading and extracting the ZIP file, a directory named collatedpath will be created. Inside this directory, double-clicking on one of the following scripts will run the corresponding demo:
(Attention MacOS users: no testing has been performed on the Mac, and scripts have not been provided. If you are running MacOS X however, the unix shell scripts should work fine.)

Sorted.sh
Sorted.bat (Windows)
A simple demonstration which shows elements in the path in sorted order. The data uses randomly generated numbers. The curve has been added to emphasize the larger elements.

Mixed.sh
Mixed.bat (Windows)
Displays a path whose elements have been generated ranomdly, as in the Sorted demo, but they are no longer sorted. It demonstrates teh difference between position and size.

PictureAustralia.sh
PictureAustralia.bat (Windows)
This demo allows you to search the Picture Australia photo archive. Enter a search term into the box and press "Search". It may take a few seconds for the initial pages to be loaded as teh search is being performed.

DragDemo.sh
DragDemo.bat (Windows)
One application of the path is as a bookmarking tol that allows bookmarks to be organized into "piles" by the user, much like a pile of papers on a desk. This demo allows pages to be positioned by moving them around the path. Their size however is fixed (generated randomly in this case, but in a real application it would be based on some other value, such as popularity), and the pages cannot be moved.

Navigating the Collated Path

The Collated Path allows you to navigate through the items in various ways. This is done by allowing the user to zoom and pan items in the path. You can navigate using the following methods:

Standard Zoom: Click on an area outside a Page, and drag the mouse up to zoom inwards, or down to zoom out. The pages will all be scaled equally, relative to the point on the path that was clicked.

Panning: Pannign allows the path to be moved left or right. While holding down the CTRL key, click on an area outside a Page and drag the mouse left or right.

Position-Only Zoom: While holding down the SHIFT key, click on an area outside a Page and drag left to spread the pages out, or right to scrunch the pages together.