Website Pagination 101

October 18, 20080 Comments
Facebook Twitter Pinterest Plusone

One of the most commonly overlooked and under-refined elements of a website is its pagination controls. In many cases, these are treated as an afterthought. I rarely come across a website that has decent pagination, and it always makes me wonder why so few manage to get it right. After all, I’d say that pagination is pretty easy to get right.

Before going into analyzing good and bad pagination, I want to explain just what I consider to be pagination: Pagination is any kind of control system that lets the user browse through pages of search results, archives, or any other kind of continued content. Search results are the obvious example, but it’s good to realize that pagination is also found on blogs (Previous/Next post links, which some blogs have), discussion boards and search engines.

The importance of pagination is subjective; it depends on the content as well. For Google or Yahoo!’s search results, pagination is pretty important because as much as they want to give you exactly what you search for in the first 10 or 20 results, there simply are plenty of times when you’ll sift through consecutive pages.   So pagination is content-sensitive, but interestingly the basic principles of good pagination apply no matter what the content or context is.

Rules for good pagination

Making good pagination is not a difficult thing. Really, you just want to remember the following basic guidelines, and you should be fine. We’ll look at a large range of examples after that, to see what we can learn from existing pagination designs found on popular websites today.

Provide Large Clickable Areas

This is a solid rule for any kind of navigational link, whether it’s a menu link or a pagination link, but in the context of pagination links this may be even more pertinent. Oftentimes, pagination is omitted from a design phase and ends up being stuffed somewhere in a corner above or below content areas, obviously not having been given much thought. One of the biggest problems resulting from this is that pagination links end up being small clickable areas, no larger than the page numbers themselves. To make them more effective and userfriendly, give them some proper visual design and give each link a large clickable area, that’s visually identifiable. By large, a good rule of thumb is “twice as wide as the number, and 1.5 times its height.”

Dont Use Underlines

Underlines for links are generally a good idea, as users are most familiar with links having underlines, but for pagination links as well as (obvious) main menu links, underlines are superfluous. People know that page numbers on the web are clickable (and if they aren’t, what are they doing there?)

Identify the Current Page

Make the current page immediately identifiable for the user; it should not be clickable, it should not have any kind of visual hover-state, and it should (ideally) be wrapped in an em or strong element. The current page should be significantly different in style from the other pages, so that a user can easily keep track of where he or she is.

Space out page links

Provide enough space between each page link so that a user can not accidentally click on the wrong page number. Good visual design will help make this easier.

Provide Previous and Next links

In virtually any context where pagination exists or can exist, Previous and Next links are useful to have. So offer them. But, separate them cleanly from the page numbers and give them sufficient distance or unique styling so that they can’t be mistaken as a page; this is particularly pertinent if you use arrows instead of text for Previous and Next.

Use First and Last links where applicable

When browsing page results outside of either boundary (or is that inside?), offer a First, a Last, or both First and Last links, whichever is appropriate. Keep it visible as a text-only option, no link, no clickability, but keep it in the design.

Put First and Last links on the outside

Nothing is more counter-intuitive than a Last link followed by a Next link. Look at stereo systems for example: fast-forward is followed by next track, because it is a superceding step. Time controls are ordered from the center out, and pagination controls are not very different from them (or in some cases, not different at all), and should thus follow the same basic rule. « First ‹ Previous Current Next › Last »

Filed in: Web Design
Tagged with:

About the Author ()

Paul is a regular 30 year old web bloke / programmer with a penchant for online marketing. This blog is a personal outlet, with an eclectic mix of articles.

Leave a Reply

Back to Top