One last UI nitpick I’ve been meaning to write down for ages, and it goes like this:
- You’re viewing recent photos/posts on a website and you want to read more, so you click the button at the bottom to give you a few more older entries
- You view those photos/posts then scroll down to get more
- Your choices are labeled “Previous” and “Next” or “Back” and “Next”
- Which do you choose? Why?
The problem as I see it is mostly a vocabulary one in the English language used to describe date-ordered output. Since I’m viewing recent content and I’m wanting to request older stuff, I tend to think of “Previous” and “Back” as representing the idea of “Older”. But most often the Back or Previous refers to the previous page you were on, which had Newer photos/post that you already viewed, so the “Next” option is used to fetch older entries. See how that’s cognitively backwards?
I saw this just hit me on flickr mobile (screenshot of page 2 of my photostream is shown below) and I’ve seen it on countless other blogs and web applications. I get tripped up on this several times a week.
My proposed solution
Never use the phrases Previous/Next or Back/Next that cause confusion in the first place for date-based output in your web application. Instead, explicitly make your labels for pagination say Older and Newer to make it abundantly clear to users. Here are some screenshots from MetaFilter, where I use it exclusively (and I always make Older point to the left, and Newer point to the right, which I’d say is optional but pick a consistent direction for both and stick with it throughout your webapp).
A Whole Lotta Nothing 
I always loved that little detail of metafilter. So much more usable… and at no cost.
LikeLike
I agree completely, and this has been a gripe of mine for some time. I use Older/Newer or other descriptive words like Joe describes. I wish we, by which I mean everybody who makes web sites, could standardize on whether left means Older or Newer, though.
(I just noticed that my Tumblr site uses Next/Previous. I’ll have to fix that.)
LikeLike
Agreed. Back/Forward and Previous/Next just don’t map well to chronological concepts, at least for me. It’s too easy to lose the metaphor and suddenly wonder if you’re going “back” in time or plunging “forward” INTO the archive. I’ve always used Older/Newer on my own site.
LikeLike
When I perform a search at an online store, I frequently have the option to sort the results by price and relevancy. It would be interesting to see links that have text similar to “Lower Priced Items | Higher Priced Items” or “Less Relevant | More Relevant”
LikeLike
One reason to perhaps swap the direction of the links would be RTL languages.
LikeLike
Yes! Previous/Next is unclear and subjective. I changed some of our site blogs to Older Entries and Newer Entries and had it changed on me by the editor. I chose not to make a fight of it, (pick your battles) but now I have somewhere to send them to ‘learn’ more!
LikeLike
Absolutely the right thing to do.
Blentwell.com, one of my favorite places to find great dance music, uses this language exactly as well.
LikeLike
You’re right, it does read much better, and without confusion. Gonna change the pagination link text on my own site as a result.
LikeLike
From your lips to God’s ears. There’s an entire sector of my brain that is squandered on having to simply memorize which orientation each of my favorite sites uses. Inefficient to say the least.
LikeLike
Argh. My example above used a 1 *and* Newer, which never exists. For clarity, I probably should have represented Gmail’s paging nav as:
< Newer x – y of z Older >
LikeLike
Amen. (I’m looking at you, Gawker Media.)
LikeLike
Amen!!!
I wish there was a better solution for search results too. Most of the time they’re not in chron order so older/newer doesn’t really work. “Next Page” makes conceptual sense, but it still seems confusing to me.
LikeLike
I noticed the exact same thing SYNCHRONICITY -> http://michaelfoody.com/?p=7
LikeLike
Good points, well made. If you’re building date-sensitive content, placing the most recent stuff at page one is so completely backwards it makes me grind my teeth every time I encounter it. While I enjoy websites like Ffffound, their pagination drives me up the wall because an image that I liked might be on page four the first time I see it, but page ten by the time I return. There’s no stability or consistency, and content becomes transient and hard to relocate.
Metafilter’s approach is so much more sensible, and it’s nice to find out who was responsible!
LikeLike
Yeah, you’re right Doug, gmail gets the direction backwards and that trips me up too.
LikeLike
Good point, I’ve updated our own weblogging accordingly: https://code.silverorange.com/changeset/34569
LikeLike
This is always something that I have noticed and appreciated about MetaFilter. Bravo.
LikeLike
Even worse is when all that’s waiting at the bottom of the page is a link to the archives.
LikeLike
“Next” and “Previous” links are acceptable if you also have direct page links (preferably with adequate visited states). So “Previous 1 2 3 4 5 .. 12 13 Next” works. I agree though, that “Next” and “Previous” links on their own are no good.
LikeLike
The terms “newer” and “older” aren’t entirely fool-proof, which I commented about, here. I think the key thing for least amount of confusion is consistency in ordering of terms (ex. older ALWAYS on the left of newer), which you stated above in your post (I just thought it was worth mentioning again), and made uniform throughout your site.
LikeLike
Aza Raskin made some good comments about the pagination issue in his talk at Google, link:
I like your solution, but I’m curious how it would work when you have thousands of items. Do you think it would be helpful to ditch pagination, and instead have links to archived pages? (Kind of like WordPress archives.)
LikeLike