Saturday, January 04, 2014

The Scroll Bar

The scroll bar is the universal answer to the problem of showing more content than the "window" allows you to display. Be it a webpage, pdf viewer, word document, audio/video players: scroll bar is used everywhere.

Here is the problem:
The granularity of change possible with scroll bar has nothing to with the granularity of the content it is working on, but only the size of the content relative to the "window". For example when we read a physical book, the granularity of change is page. We are either reading page 42-43 or 44-45. On a web page with all the content of a book, the "granularity of change" would simply be a function of total size of the book. If the book is too long, one pixel might map to multiple pages. For a small book, one pixel might map to half a line.

Interestingly, list views in mobile applications don't suffer from this problem. The role of scroll bar is simply to give a sense of amount of data, the scroll is controlled by length and speed of touch.

For most e-commerce sites and specifically for the product catalog pages, the "granularity of change" is simply a row of images. For text it should probably be a line of text, for airline summary of flights it could be each row of information. If "granularity of change" can be explicitly told to the scroll bar, it could be more natural for users to interact with it.

Here is a picture of how it might look:
<------------<===========>--------------------------->
|            |           |                           |
Start     Previous      Next                       End

Looks similar to audio players - next / previous is "song".