Better Site Pagination

Pagination navigation is a set of links that allow users to navigate through paged content.

Pagination navigation is common on blogs and forums. It’s usually in the form of numbered page links that appear at the bottom of each page, and may also include previous/back and next/forward links, as well as links to the 1st and last pages.

Let’s look at why pagination is needed, things that make pagination difficult to use, and how to fix them (best practices).

The Reasons For Pagination

Most blogging and forum software enable pagination navigation by default for posts or topics that go beyond what a single page could reasonably contain.

The value of pagination (breaking content into pages) is understandable. A blog or forum topic could have many (even hundreds) of pages worth of posts or discussions. Trying to load all of this into a single page would cause excessive strain on servers, excessive load times in browsers, and would likely crash browsers, servers, and the user’s system.

So pagination of some sort is often needed.

WordPress’ Plugins and Themes directories make good use of pagination. It’s easy to use and setup in a way that’s easy to understand.

However, there are some problems with how pagination is currently handled on a majority of blogs and forums.

The Problems With Pagination

The problems with pagination has been touched on in an article on Smashing Magazine, but I wanted to expand on some of these points, as well as point out some problems that weren’t touched on at all in the article.

Pagination navigation, in theory, is used to help people continue reading through content or continue reading a conversation.

However, when little or no attention is paid to this navigation, then it becomes less useful.

I recognize that the following are mainly theme/skin-related issues, but they are issues nevertheless.

Links Are Too Small

If the links in your page navigation are so tiny that visitors feel like they’re playing a game of Operation, they are too small.

Yet a majority of blogs and forums have page link navigation that is so tiny that you need a magnifying glass to see it. This makes it difficult not only to see the links, but also to click on the correct item.

The frustration just gets worse on mobile devices.

Pagination Links Are Cramped

Many sites’ previous page/next page and first page/last page links are so close together that it’s difficult to click the correct link.

Many use < and > for previous/next page links and << and >> for links to the 1st/last pages. At small text sizes, it can be difficult to tell where one link ends and the other begins.

For example:

<<< 1 2 3 >>>

Now, I don’t care how many sites I’ve be through–this makes me stare at my screen far longer than I should in order to pick the correct link to go to the next page.

Pagination Links Don’t Appear as Links

Some sites remove text-decoration from page navigation links. I assume this is either a carry over from CSS link styles used in the rest of the site, or the desire to make the links look “pretty”.

The results however:

  • It’s more difficult to spot the navigation
  • Coupled with the previous issue, it’s almost impossible to distinguish previous/next links from 1st/last page links without hovering over them with your mouse (which is not an option for mobile device users)
  • The current page number of the page you’re on right now may not be obvious unless they highlight it in some other way. However, many systems simply do not make it a link. If so, you’re in trouble.

How To Fix Site Pagination

Make Limited Use of Pagination

Do you really need to list pages by number in your navigation?

Since numbered links do not add any kind of context or clue as to the information that appears on each page, numbering pages have limited usefulness.

You may find that letting people navigate to the previous or next page of posts is all they really need. There’s a good chance that your visitors are not even using the numbered links. Decreasing their options will make it easier for them to use your site.

Rand Fishkin wrote a nice article on when to use pagination and how it relates to SEO.

Rethink Pagination

Twitter and CoTweet are good examples of taking a different approach to pagination.

Instead of using pagination links to take you to other pages containing more updates, Twitter loads more content automatically when scrolling down the page.

CoTweet provides a full-width link/button that lets you load more updates onto the current page.

These approaches both solve the main issues that standard pagination attempts to solve–reducing server and browser load. Their solutions also bypass the usability issues of pagination as well.

WordPress Pagination Plugins

There are a number of WordPress plugins that provide a similar Twitter/CoTweet solution for loading more content.

Ajax Pagination Plugin

This plugin provides a button to load more posts onto the current page, similar to Twitter.

Twitter/Facebook Style Pagination

Another similar plugin that lets you load more content dynamically.

Increase Link Size and White Space

For pagination to be usable, link text should be at least as large as body text.

The margin and padding of each link should also be sufficient to make the separation of links clear and unambiguous.

More attention should be paid especially to link padding for mobile device users. Increasing the link padding and margins around links will make it easier for users to select the correct link.

Here are a couple more WordPress plugins to help you out.

Widget Pagination

Widget Pagination helps make pagination more usable and more easy to be seen by giving you various options for paging navigation. The default text size still seems a bit small to me, but a step in the right direction.

Better BuddyPress Pagination

Improves the default pagination in BuddyPress for forums and group discussions.

Treat Pagination Links As Links

The links in your paging navigation should always look like links or buttons to avoid confusion.

Making the current page number stand out will also make the pagination more usable. Some sites increase the current page number’s font size and/or embolden it.

Describe Actions

Instead of relying solely on icons or character entities to convey the action a link will carry out, we can include text.

For example, on, they use « Previous and Next » instead of simply the double quote arrows. This makes it very obvious what will happen when clicking each link.

Your Ideas

Agree? Disagree? What do you think about the pagination navigation? Tell us in the comments section.



Similar Posts: