On pagination navigation

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!

• Dan Cederholm
• design
• Michael Sippey
• Mlkshk
• Stellar
• web development
• weblogs