User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
So I'm reading some blogs and I get to the bottom of the page when I see a graphic similar to this:
<< Newer Posts Older Posts >>
This makes sense to me. But then, quite often, I'll see it reversed!
<< Older Posts Newer Posts>>
This issue is compounded even further when the labels are changed:
<< Next Previous >>
It really, really makes me want to rip my hair out. What is the correct logic when specifying this type of information?
The text should largely depend on the actual content itself. Is it time sensitive, like news, or is it content that will be relevant no matter when it is viewed? If it's time sensitive, it makes sense to use older/newer. If it's not time sensitive, previous/next seems like a better fit.
However, I would argue that adding page numbers would increase the understandability of your pagination because they would give you a starting index that's readily apparent and they would also provide more context for your pagination. Much of the confusion in the above methods results from either not knowing where you are, not knowing where you've been, or both. Page numbers help mitigate that problem, especially if you make it clear which page number the user is currently viewing.
As far as which should come first, older/newer, it depends entirely on your sort order. Again, however, adding page numbers here greatly minimizes the confusion.
What's more, for both usability and SEO purposes, you should provide more than just older/newer or next/previous.
Consider:
Suppose your blog is about business news. Which is most usable?
Or let's say your blog isn't time sensitive. You instead publish business articles like best practices about marketing, hiring, strategy, etc. Which is most usable?
I find Older/Newer to be clearer. On blogs that use Previous/Next without additional indicators, I'm always unsure whether Next means "show me the next thing that was posted" (the next newest set of posts) or "show me the next thing that I haven't read" (the next oldest set of posts). I've seen both in use.
I prefer « Older Posts — Newer Posts ». In my language/culture this is consistent with paper journals (the ancestors of blogs), graphs, and timelines. I do actually read the link before I click it (which probably makes me an outlier), so the order isn't as important to me.
Seen on Popular Engines
Current Top 5 of the Technorati Top 100
It looks like some version of « Newer Posts — Older Posts » is the winner in this bunch, for whatever that's worth. I'm not sure I'd actually want to copy some of these sites, but they are popular, so they probably represent what many users are accustomed to.
Amongst the sites listed that use Previous/Next, the convention is that "Next" is equivalent to "Older".
<blog>.wordpress.com/page/5/ you can't click your way to the content on page four directly.
For L>R languages it should be Previous on the left, Next on the right. You're going 'forward' and 'backward' and this is the direction people read and turn pages.
To quote Luke Wroblewski:
both Previous and Next could be thought of as primary actions and their placement should match the left to right motion associated with paginating a set of information.
Time is usually represented from left to right on graphs so I'd suggest keeping with that. I.e. 'previous' on left and 'next' on right.
Next and Previous are unclear -- if at all poss labels should be qualified to indicate what they are relating to. Next Page, Next Most Recent or even better, how about Next (Jul 21).
If you are using labels like "Older" and "Newer", then I don't think it really matters much. However, I think that using "Older" and "Newer" is incorrect, and "Next Page" and "Previous Page" are better labels. The reason for this is that most people associate links displayed like this as paging links, and as such, they expect it to work like this:
<< Previous Next >>
This is the opposite of your last example.
This follows the paging mechanisms used by searches (both site-level and search engines), so the user experience is well known.
I understand that the default for most blog platforms is to use the "older/newer" paradigm, but that actually leads to confusion. I can't count the number of times when I've clicked the "newer" link and been confused on a blog by seeing the list of posts I had just looked at. Why did I get confused? The "newer" link starts with 'N' and so does "next". I (like most users, I'm sure) are so used to seeing "next" and "previous" that that link starting with 'N' automatically gets associated with the next page of results, even if that's completely wrong.
Back to the order of "newer" and "older", I actually think that for blogs, the example that confuses you:
<< Newer Posts Older Posts >>
makes more sense, because then at least the link on the right (pointing "forward") is the link to the next set of posts that you haven't already viewed.
UPDATE: Adding some additional information:
Take a look at the default for Wordpress (using their official blog as an example):
http://wordpress.org/news/page/3/
If you scroll all the way to the bottom, you will see Newer/Older displayed just as I lay out here. Now, take a look at the URL: page/3/
What URL would you expect to see when you clicked on "older posts"? page/2/ or page/4? If there's any ambiguity here, then the links are poorly named.
What would you expect to see on page/4/? Would you expect to see older or newer posts? On a blog, you expect to see older posts. Since the number is increasing, then the "Older" link definitely makes the most sense to be on the right, since that's how the paging design pattern works (Don't believe me, look at this site, google, anything you want).
Because people clearly understand that the display of a blog does not follow an oldest to newest pattern (although comments and answers on this page seem to contradict that), and people DEFINITELY understand the paging pattern ("forward" takes you to the next page) it makes more sense to not even display older/newer. Hence the reason that next/previous are a better option. If a user is on the above URL, and they click Next, they definitely would expect to see page/4/ (already resolves the ambiguity issue). And because in general, users DO know that the front page of a blog has the newest posts, they know what they are going to be getting when they click Next from that page.
<< as back and >> as forward, but the time relationship is unique in the blog setting.
Along the lines of Hisham's answer, another way would be to have a vertical scheme:
^ Newer - Older v
That would maintain some kind of mapping between posting date and the typical "temporal direction" of blogrolls.
Blog articles being chronologically ordered, it does not seem backward to use 'Older | Newer' instead of 'Previous | Next'. In fact, it's even more appropriate from a semantics angle. So here, it's 'Semantics VS Convention'. Personally, I would dare use 'Older | Newer' as I think it has gained enough acceptance not to miss sleep over possible user confusion.
Regarding the other question: whether to use 'newer | older' or 'older | newer'... Assuming the language is LTR, I'd say it depends how the post age correlates with the reader's interest. The following example may help illustrate my last statement:
Would one open up a blog to relate an event while experiencing this very event, anti-chronological order seems more appropriate - that is, having the home page display the latest article, and the pager being 'Older | Next'. Should this blog be stopped ('archived') at the end of the event, perhaps reversing the order could be an interesting choice.
To add a physical action / technical note as to why a programmer would not asses the UX but give what the system gives.
Normally the default way data list is returned from the database is with the most relevant or newest record first. To use MySql syntax this would be record number 1 (or [0] in array). So the query will be first 20 results or LIMIT 1,20. To get the "next group of 20" you are effectively going down 20 or two the right.
You are going back in time or less relevant. A western mind and without thinking too much, a user wants the latest story and then goes back in time to look for previous references. This is how we quote past texts in writing as well. It would be hard to think about I have spent time reading but within this source there might be future articles that are better so I will look into the future (well why wasn't I reading that one).
So the next set of the results is page 2 showing 21-40 or LIMIT 2,20 and so you are "paging" right.
Second point is the physical, reinforcement of that. The best place for a link to action is bottom right as we read top left to bottom right so this going back in history to PREVIOUS> or OLDER> is in a good place to hit on the right. If its is on the left which makes sense for the words you are in effect covering the page with your hand to click bottom left and that does not feel comfortable.
The only time I tend to flip this is for label tags on sliders/carousels/rotating lists of things that in effect you always are in the middle of as they go in a circle, so NEXT> makes sense.
(My bad: I completely missed that it's a blog. See comments)
To me, the first one makes the most sense because it's how you read a book. "Next" or "Newer Posts" would go on the right because, unless it's Hebrew or Arabic, you always turn the page on the right to go to the next page.
Not quite related, but in a talk at the Business of Software conference, Don Norman gives the example of a remote that has up/down arrows. Which button would make the most sense to go to the next or previous channel? The video is worth watching for UI and usability folks.
If they are listed down chronologically wouldn't you do something like this?
Title of Post 1 11/10/2011
Title of Post 2 11/08/2011
More Posts >>
I feel even though they are dated older, I'm still moving to the 2nd page of items, or moving through them like I would next through a list of pages, or through older email or something.
