Paging is separating out content to multiple pages, and it is a really common task for websites. The problem is that like oh so many things on the web, it is rarely done well. Come with me on this journey (rant?) on the correct way to implement paging.

Each page should have a “Next” and “Previous” button. If you are referring to chronological content, such as blog posts, use “Newer” and “Older” to be more specific. They should be the most prominent part of the paging area, since anyone interacting with that area of the page will most likely be going back and forth through the results.

There should also be a list of the pages in between the next/previous button.

Here is an example from Bubble Burster website:

An example of using Newer and Previous buttons

Here I am using WP Page Numbers.

When the page is at the beginning or the end, leave the Next/Previous buttons in place, but disable the one that is no longer valid.

Example of a disabled Newer button

“First” and “Last” buttons should be 1… and …(last page number) because they are smaller than the entire word and more obvious than a symbol. This is best described by a picture:

An example of using the first and last page number for first and last

Here you see that the first and last page numbers are present, even when they are many pages away from the current page. This replaces the need for first and last buttons and is a bit more obvious what they do. Clicking 1 goes to page 1. Just like clicking page 3 goes to page 3. You may not think about these kinds of things but every user has to learn how to user your interface and even if it only takes 10 seconds to understand what clicking “First” does, it is one more thing that makes your interface easier to use.

Also, it is more common for a user to want to go back or forward than to the first page. This is because they will only go to page 1 once (that is unless you have some really addictive content on page one that people keep trying to stop looking at but just can’t resist). If they were to go through your content page by page though, they would be hitting the “Next” button every page.

Finally, put a little padding on the numbers. This example is a little big and bubbly (for a big and bubbly site) but realize that you are putting a dozen links right next to each other. And while I’m at it, put a little effort into the appearance. Don’t just through raw links on a page, that’s ugly.

Filed under: User Experience, Web Development Tags: WordPress