On pagination navigation  MAY 10 2011

Sippey posted a brief item on pagination navigation on "river of news" type sites, comparing the opposite approaches of Stellar and Mlkshk. I thought a lot about where to put those buttons and what to label them. There's no good correct answer. For example, "older" usually points the way to stuff further back in the timeline that you haven't read, i.e. it's new to you but old compared to the first page of stuff...are you confused yet? I focused on two things in choosing a nav scheme:

1. The Western left-to-right reading pattern. If you're in the middle of reading a book, the material to your left is a) chronologically older and b) has already been read and the material to your right is a) chronologically newer and b) unread. From a strict data perspective, a) is the correct way to present information but websites/blogs don't work like books. b) is how people actually how people use blogs...when a user gets to the bottom of the page, they want to see more unread material and that's naturally to the right.

2. Consistency. Once you add page numbers into the mix -- e.g. "< newer 1 2 3 4 older >" -- it's a no-brainer which label goes where. I don't think I've ever seen the reverse: "< older 4 3 2 1 newer >".

Also, I do whatever Dan Cederholm does. (But dammit, he does the opposite on his blog! Hair tearing out noise!!) That said, I like Sandy's suggestion of getting rid of the "newer" button altogether:

We put "Older" on the right, but did away with "Newer" altogether in favor of a link back to page 1. If they want to go back to the previous pages, people can use their back button.

http://mlkshk.com/p/212C

Or maybe put "newer" at the top of the page? Still a waste of screen real estate? Anyway, once I figure out how I want to do infinite scrolling on Stellar, those problematic older/newer buttons will go away. Huzzah!

Read more posts on kottke.org about:
Dan Cederholm   design   Michael Sippey   Mlkshk   Stellar   web development   weblogs

kottke.org

Front page
About + contact
Site archives

Subscribe

Follow kottke.org on Twitter

Follow kottke.org on Tumblr

Like kottke.org on Facebook

Subscribe to the RSS feed

Advertisement

Ads by The Deck

Support kottke.org shop at Amazon

And more at Amazon.com

Looking for work?

More at We Work Remotely

Kottke @ Quarterly

Subscribe to Quarterly and get a real-life mailing from Jason every three months.

 

Enginehosting

Hosting provided EngineHosting