Ditching ‘Next’ and ‘Previous’ for Blog Navigation

06.22.07

Design This Site UX

One of the defining characteristics of a blog is the manner in which the content is presented. The home page is organized in reverse chronological order, and traditionally, the entirety of each entry is exposed in that view. The competing model of content presentation is one embodied by news portals: the articles are reduced to snippets and navigating away from the home page is necessary to read anything that amounts to prose. Both of these approaches also impose divergent conceptual models of the site’s organization. Whereas the news portal is taxonomy centric, the blog’s content has much more relevance in the context of time.

It is no wonder then that you will find “previous” and “next” links (linear navigation) on just about every blog, in the same way you will find links like “More articles in Politics” on news portals. One deals with time and sequence, the other with categories.

Having accrued enough posts to justify it, I decided to add linear navigation to my permalink pages.

The Accepted Solution

The most common approach to presenting these links has been to position the “previous” link on the left and the “next” link on the right. The “previous” link points to an older entry, while the “next” link points to a newer one. When not labeled with “previous” or “next”, the links rely on a guillemet to communicate that message. This approach is endorsed by the default templates of two blogging powerhouses: Six Apart and Automattic. In other words, millions of sites have unintentionally given their nod to this design pattern.

Example of linear navigation in typepad and wordpress

Since time is most often visualized as going from left to right, this approach is also logical on the visual level. The left link will take you to the the past, the right link, to the future. I think this is a good solution, and this is what I started with when I decided to add linear navigaton to this site. I am going to presumptuously refer to this as the accepted approach or accepted solution from this point on.

Scratching the Itch

After adding “next” and “previous” links to my permalinks, I still felt unsatisfied. Despite the fact that I frequently use linear navigation on other sites, I often find the experience marred by a good degree of indecisiveness. I’m never really sure where exactly I’m going: am I going to be taken to an older post or to a newer one?

I think the problem lies in a conceptual disconnect between the home page and the permalink.

On the home page, because posts are listed in reverse chronological order, the concept of “next” (as you scroll down the page) points to an older post. On the other hand, on the permalink, the “next” link typically takes you to a newer post.

Concepts of next and previous on homepage and permalink page

When I am reading a blog’s homepage, I am reading the newest posts followed by older ones. When I decide to drill down to the permalink (to read comments or view rest of entry), my instinct is to continue to browse in that order. In that situation, I instinctively feel that the “next” link should point me to the older entry.

However, when I’m not coming from the home page (search engine results or my feed reader), I typically want to read the newer entry. Perhaps this is describing a personal preference. (If presented with two options: to read an older post or a newer post, I feel the very nature of blogs makes the older post a losing proposition.) But regardless, in this scenario, the “next” link feels more natural pointing to a newer entry.

It is no surprise then that there are plenty of prominent sites that do the exact opposite of the accepted solution (i.e. by making the “next” point to an older post). This ignores tradition and does little to alleviate my indecisiveness.

Detouring to Blogger

Blogger, the other mega-popular blogging tool, has a slightly different approach. Rather than rely on little arrows, or the ambiguous “next” and “previous” labels, they simply use two links titled “older” and “newer”:

Blogger Linear Navigation

Google, who owns Blogger, mirrors the approach on their official blogs and also in Google Groups, where they are also sorting posts in reverse-chronological order (same problem space). Whether this is a product of legacy implementation or the final synthesis of quantifiable research, it can’t be discounted, as it’s unlikely Google would be doing something on that scale to their disadvantage. Personally, I like to entertain the idea that every decision at Google is answered with algorithmic, supra-logical precision (but sometimes with odd results):

Google advice[dramatization] Googlebot’s algorithm favors self-preservation to the detriment of this poor searcher.

There is little ambiguity with “Newer Post” and “Older Post” - they are great labels - but I think it lacks some of the elegance of the accepted solution:

  • Doesn’t surface the title of the posts
  • Presentation subverts the traditional visualization of time as moving from left to right

Adding Training Wheels

The solution I settled on was a simple combination of the two most common approaches: I decided to compliment the accepted solution of linear navigation with the hyper-precision afforded by the labels of “older” and “newer”.

When solving an interface problem, using words, or any kind of help text, is often viewed as a crutch to be avoided. To make the approach less like a crutch and more like training wheels, I muted the labels’ color to a light grey and positioned it outside of the linear flow of the link text. I retained the arrows and surfaced the post titles, while keeping the older post on the left and newer on the right.

Linear navigation on Ephram Zerb in 2007

As of this writing, the linear navigation appears below every post.

In the process of me surveying the web and trying to get an understanding of what is most common, I noticed that there are plenty of blogs that don’t have “next” and “previous” links. If there is to be one takeaway from this post: make sure to have such navigation to begin with.

I’d like to hear other’s experience with linear navigation. Do you find it intuitive? In what situations do you find it helpful? Which approach do you find most appealing? When do you find yourself using it?

« Older On Styling Links Within Content
Newer » Designing for Permanence

9 Comments

1Matt

Just a note, for paged navigation, meaning the next/prev links that take you from the home page, to the second page of posts, etc, we’ve switched entirely to older/newer terminology.

2Ephram Zerb

Matt, thanks for the background info. I have yet to really delve into navigating accross multiple pages, but undoubtedly “older” and “newer” will serve as a starting point for that design decision.

3Jonathan Nicol

I think the solution you have opted for gives the best of both worlds, and leaves little room for misinterpretation. I confess that without checking I was unsure which approach I used on my own blog, but a quick check confirmed that when browsing article abstracts (ie: on the homepage) I am using previous/next, and when reading a full post I have done away with any sort of forward/back navigation altogether (an option you hadn’t considered!). I couldn’t agree more that older/newer is more descriptive than previous/next, and in due course I will amend the wording of the links on my blog.

4Ramesh

Can you pls let me know how to get the actual titles of prev and next posts instead of the “Older post” and “Newer post” defaults which blogger gives?

5Artem

The older and newer way is more clear to me since I jump around blogs a lot nad each one is different. Older and Newer makes the flow easier to understand. Having one long page also is not a bad idea but after many months of posts it get’s long and finding specific posts becomes difficult. You should post more often!

6Joseph Hsu

While browsing through blogs I have noticed this too. I become reluctant to click either because i’m not sure which direction I am going.
Thanks for sharing!

7Justin

I wrote Restoring the reverse chronology with you in mind. You’ll see that I settled on “Older/Newer Posts” for the reverse chronological (i.e. homepage) navigation, and “Next/Previous” for permalink page navigation.

Because my titles can grow long (and it bothers me polluting Google with post titles on adjacent posts) I opted to just use the words Next and Previous as the link text, which have the added benefit of being a constant width if you’re surfing my archives. This of course is more meaningful if your posts are shorter and the next/prev links are positioned “above the fold”.

I notice that your homepage actually displays all your posts, so I’m curious how you’ll implement this in that context.

8The Fluther Blog » Blog Archive » “How’d they do that?” Pagination

[...] First we had to decide how it should look, and which side would be for “Newer” and “Older”. This was surprisingly non-obvious. We thought carefully about our UI, discussed this great article by Ephram Zerb, and came up with something we liked. [...]

9Brian Smith

Why put next/previous or older/newer links on individual entry pages at all?

Leave a Reply

required

required (will not be published)


required