A New Type of Scroll Bar (for PDF files)

Ever since I brought home my large 22" monitor, I've been trying to read more PDF files on the computer instead of printing them out on paper first. But there is something lacking in reading from a computer screen. The thing I miss most is that I lose a sense of place in a document. With the document printed on pages of paper, I get a physical sense of where I am simply from the feel of the thickness of the pages and from the physical act of turning a page. I can scan quickly through the document and find certain sections much faster than reading on the computer.

In comparison, a typical PDF viewer only gives you a very poor sense of place in a document via a scrollbar. This does not provide you with any way to scan ahead:

However, many PDF viewers also provide a thumbnail drawer, which allows you to scan ahead several pages:

However, this particular arrangement ends up with a rather convoluted user interface where you get 3 inconsistent markers for your position in the document: 1) the original scrollbar with full-view document, 2) the highlighted page in the thumbnail drawer and 3) the scrollbar for the thumbnails. Also, the thumbnail view only shows one highlighted page whereas the full view often falls between two pages.

Dragging the markers on the scrollbars provides a rather confusing and fragmentary experience. I have no idea where the thumbnail scrollbar is, or where the highlighted thumbnail will pop up, after dragging the main page scrollbar. This makes it impossible to use these scrollbars to give a visual sense of your place in the document

Then I realized that you can solve this problem by combining the scrollbars with the thumbnails together to give you something like this mockup:

The idea is that we can use the thumbnail view itself as the scrollbar, which I call the thumbnail bar. With this arrangement, the part of the thumbnail displayed in the full page view becomes the marker of the scrollbar. This provides a clean and simple integration between the full page view and the thumbnails.

Nevertheless, you don't want the thumbnails to be too small, so you won't be able to display a lot of thumbnails. To compensate for this, I add a third bar, which I call the document bar, which provides an ultra-compressed view of all the thumbnails in the document. By using appropriate coloring or shading, we can color the part of the document shown in the thumbnail bar and the full view. This combined-thumbnail view can become the marker for the document bar.

Finally, moving around the document is simply a matter of dragging the smaller versions of the page view around in the thumbnail bar, or dragging the combined-thumbnail view in the document bar.

In both the document bar and the thumbnail bar, we keep the contiguous vertical arrangement of the individual pages to convey the spatial sense of page in a nice linear fashion. And if we can animate all three together when dragging, then we can viscerally relate the document at all three levels of detail – page, thumbnail and document.