It's not a big problem, but one that caught me today - when looking at a page on the web, our indication of it's length is the size of the scroll bar slug in our browser window (if it's small, the page is long). I followed a link to this page: QuickSilver - A Better OS X In Just 10 Minutes. 10 minutes I think... okay, I can spare that, at which point I look at the scroll bar; the tiny scroll bar slug tells me there's about half an hour of reading to be had on this page!

My assumption about the article's length was wrong however, because upon scrolling I saw about 80% of the page was comments. Had I been able to tell what portion of the page was article and what was comments, I would have happily started reading without that first sanity check.

A Solution

The mock ups below show a way of visually representing a page's contents. The user will be able to see what the page contains in relative proportions, much like section tabs in a real life document binder.

A long blog post, over half the page is made up of comments. The proportional division of Article, Comments, and Post new comment sections is indicated next to the browser scroll bar

A mouse cursor hovers over the comments section

The visual page content also act as a form of navigation through the page, clicking on the comments portion will take you down to the article's comments.

The comments are now shown on the page, with the Comments section highlighted next to the scroll bar. The scroll bar slug is positioned at the beginning of the section

The Post new comment form is shown on the page, with the Post new comment section highlighted next to the scroll bar. The scroll bar slug is positioned at the beginning of the section

This could be achieved through anchor links on the main headings and JavaScript, measuring the page's length and the vertical position of each anchor heading. A table of contents (a list of links) would be generated below the navigation in the source, then positioned using CSS - inline styles would be added by JavaScript to give correct sizes.


Tom 2D Forever says

13 April 2008 - 6:40pm

Fun idea.

Additionally, if the user were to scroll down manually, those sections would have to somehow highlight themselves in the same way that they would after you click on them. Would that be an issue?

tdhooper says

13 April 2008 - 8:19pm

Very good point, no it wouldn't be difficult to achieve - a listener could be set for the page scroll event that update the display as necessary.
This would in fact reinforce the concept without you having to interact with it to see how it works - which is nice :)

SU says

17 December 2008 - 9:33am

Love the redesign Tom.

Thiago Santos says

14 January 2009 - 7:05pm

Great idea!