A Whole Lotta Nothing Matt Haughey’s Personal Blog

Previous/Next and Back/Next pagination links considered harmful

One last UI nitpick I’ve been meaning to write down for ages, and it goes like this:

1. 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
2. You view those photos/posts then scroll down to get more
3. Your choices are labeled “Previous” and “Next” or “Back” and “Next”
4. 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).

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”

One reason to perhaps swap the direction of the links would be RTL languages.

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.

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.)

I always loved that little detail of metafilter. So much more usable… and at no cost.

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!

Absolutely the right thing to do.

Blentwell.com, one of my favorite places to find great dance music, uses this language exactly as well.

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.

You’re right, it does read much better, and without confusion. Gonna change the pagination link text on my own site as a result.

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.

Amen. (I’m looking at you, Gawker Media.)

Gmail has done what you recommend (I think) from the beginning, using Older and Newer (and Oldest and Newest). However… what always gets me is that they reverse the physical order, like so:

< Newer 1-x of y Older >

So I still get tripped up if I’m anywhere but the first page/view/set. It would seem logical to me, that if you start viewing at the newest messages, you’re at the end of the set, and can only go backwards, chronologically. To me, the most natural direction for that in LTR languages is left. But in Gmail, you have to click the link pointing to the right to go older. Hmph.

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 >

Yeah, you’re right Doug, gmail gets the direction backwards and that trips me up too.

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!

I noticed the exact same thing SYNCHRONICITY -> http://michaelfoody.com/?p=7

Good point, I’ve updated our own weblogging accordingly: https://code.silverorange.com/changeset/34569

This is always something that I have noticed and appreciated about MetaFilter. Bravo.

Even worse is when all that’s waiting at the bottom of the page is a link to the archives.

“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.

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.

Aza Raskin made some good comments about the pagination issue in his talk at Google, link:
http://www.youtube.com/watch?v=EuELwq2ThJE

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.)