Interesting design of "paged" content

Eli Cochran eli at media.berkeley.edu
Tue Apr 14 23:59:35 UTC 2009


Folks,
I stumbled on an interesting design today for chunking or paging  
content on a scrolling page. Puzzling at first but then very satisfying.

Most blogging sites and many news sites use long scrolling pages to  
display article after article. Treehugger, an "all things green" blog,  
has chunked their content into content blocks no taller than 600  
pixels. Along the side of the page they label each block with a number  
(x of y) and a link that lets you jump to the next chunk (Click to  
Jump). Blocks contain a whole article, or an excerpt, but no block is  
larger than 600px tall, except a single ad on each page which is still  
labeled but is shorter (more about that below).

As I said, puzzling at first. But then I found that I could very  
easily navigate through the whole page, one chunk at a time, using the  
jump links. I never even had to move my mouse since the jump link  
always showed up in the same spot after each jump. And when I sized my  
browser viewport to 600 pixels tall, I could navigate the page cleanly  
using the page up and down keys.

Except when I came to an ad. The ads still had the jump link but the  
ad blocks were smaller (by half) than the content blocks. Annoying for  
me since I had to move my mouse or reset my the scroll to use the  
paging keys. But brilliant for the advertiser as the ad is then on  
screen for a moment longer and has more of a chance to be seen. And as  
I said, only one ad per page, hardly a big annoyance.

Try it. See what you think. http://www.treehugger.com/

- Eli

. . . . . . . . . . .  .  .   .    .      .         .              .                     .

Eli Cochran
user interaction developer
ETS, UC Berkeley


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-talk/attachments/20090414/a4a1cbf3/attachment.html>


More information about the fluid-talk mailing list