One of the cornerstones of successful web design is being able to easily navigate a page within a website easily with no surprises. These days visitors have a short attention span and an even shorter tolerance for a website not working correctly. We can’t really get away from it, in these days convenience is key and any way you can make your site easier to navigate and information a quicker read, the happier your visitors will be. This seems obvious on first glance, but in my travels online, it seems like many designers forget this simple mantra.
The Problem
Take for instance one simple place with a lot of room for improvement, the previous and next buttons. These buttons are pretty damned common on blogs and image galleries and seem pretty self-explanatory so you would think they were pretty much all the same, right? Not as far as I can tell. It seems obvious to me that we need a convention for this often over-looked and commonly last minute addition to the navigation.
Now, let’s get into the nuts and bolts of it. From what I’ve seen on most blogs, when you’re on the landing page, which you could technically call either the first or the last page, the button says Previous while the Next button is greyed out or not shown. Why? Well, when you’re considering the sequential nature of blogs, it makes sense to consider the latest post the last post and every post before it was “Previous” to it. This is logical, but doesn’t make sense from a navigation point-of-view.
A better way to approach this issue is to look at it as we would a magazine, newspaper, or book. As English speakers, we read left to right and when we’ve cracked the spine on any reading material, we flip the pages from our right to our left, unless you’re one of those people who flips to the last page to spoil the whole book for yourself, but that’s another story all together. If this is the case, if you imagined your blog like a magazine, and people were reading your latest post first, where would you put your latest post? The first page, right? If this is the case, then your viewers would go to the NEXT page, not the previous.
Also think about how you would list the pages of your blog, 1 2 3 4 5 and so forth. and it would probably look something like this:
PREVIOUSÂ 1Â Â 2Â Â Â 3Â Â Â 4Â Â 5Â Â Â NEXT
This seems obvious to me, but I still find myself in the middle of a multiple page blog and have to pause to think, do I click previous or next? What did I click before? Or I’ll click on next and it will take me to the page where I just was. This is way too much work for a visitor to have to go through and too much for someone to think about. It’s not about dumbing down, it’s about giving our viewers which we rely on and easier and more enjoyable experience. The less they have to think, the better they’ll feel.
A Solution
Frustratingly, WordPress defaults to « Older Entries meaning well intentioned designers take this cue and simplify it to simply Previous. We can’t really fault these guys, they meant well, but it’s a common mistake that takes the logic the WordPress developers had in mind and flipping it so it doesn’t make as much sense anymore.
There are a few ways to put the right code on your page, and they’re very easy.
The first and probably easiest way is suggested by WordPress. (They even mention the disconnect between the default and how it should function, imagine that!)
So here’s how it works:
At the bottom of the page you want this to show up in, put this code:
<div class="navigation"><p><?php posts_nav_link();Â ?></p></div>
You can wrap it in a div so you can apply styles to that div. This is a basic code, but you still have to add some pieces to make it look the way you want. Now, figure out what you want to separate the buttons, along with what you want the buttons to say, Next, Next Page, Click Here To Continue Through My Blog Of Multiple Pages, whatever. Now, here’s a breakdown of where to put these parameters:
<?php posts_nav_link('separator','prelabel','nextlabel');Â ?>
Here’s an example of how it would look with a vertical line character “|” and Next and Previous for the parameters:
<div class="navigation"><p><?php posts_nav_link('|','Next Page','Previous Page');Â ?></p></div>
It’s as easy as that. Now go forth and make your blog make more sense.
