Wolf’s Little Store

January 10, 2008

In search of the ultimate pagination

In my ongoing quest to make our content management system better, I set out to design the ultimate pagination. Here’s what I came up with after a lot of revisions:

The design elements of this pagination depend on how many pages there are.

Single page

If there is only one page, the pagination doesn‘t show up. The divs wrapping the pagination don‘t even show up because of some crafty PHP in our templating system.

2 to 7 pages

If there are two pages or more, the pagination shows up at the bottom of the page:

Notice that the previous and next buttons show up, even though there are only 2 pages. This is intentional: the greyed out “previous” button indicates that there is no previous page, while the “next” button is big and easily clickable 1.

1:
Big and easily clickable buttons

A number character is too small to click. Try clicking this link: 1. Unless you play first person shooters every day, you probably had a harder time clicking this than clicking, for instance, a regular link with words, not numbers.

Moving your mouse pointer to the page number you want should be easy, and the margin for error should be minimal. Thus, we must provide a larger clickable area than just the number character as a link. In the end it helps everyone - even those with perfect eye/mouse coordination. (See Fitt’s Law Applied to the web →

We can do so by making the anchor a block level element through CSS, adding some padding, and adding a border to indicate the clickable area. This clickable area is now large enough to click easily.

Most people will move through pages by clicking the previous and next buttons. These buttons are bigger than the boxes around the page numbers , so anyone using the website should be able to click them easily.

Full pagination

Now let’s show the full pagination again to explain how it works. We are at the first page of 20 pages in total.

Note the following:

  • The previous button is greyed out, as there is no previous page.
  • The user can navigate easily to the next pages, either by clicking the numbers or the next button.

Let’s move to page 2.

Note the following:

  • The previous button is now clickable - since there is a previous page [1].
  • The pagination always has the same width. Look at how the pagination looks navigating from the first, to the second, to the third page:

Figure A | Flow from page 1, to 2, to 3



Why is this important? The answer is fairly obvious: you don’t want your layout to jump around. If it stays in the same place, no matter what, it‘s easier to use: all elements are always in the same place. You already know where to click without even glancing.

2: A note on pagination use

In almost every case you will not know which page you want to go to, especially since pages changes as blogposts or news articles change pages over time. But it’s a good thing to be able to go to any page you want rapidly. Maybe you want to scan the website reading every fourth page. Maybe you want to read blog posts in reverse chronological order, which is far more useful when doing research.

Navigating through the pagination

The problem with first and last buttons

Most pagination designs solve the problem of going to the first and last page in a single click by adding first and last buttons, respectively on the left and on the right side of the actual pagination. Due to space constraints, the words “first” and “last” are indicated by « and » characters, while previous and next are usually indicated by < and > (or arrow images).

Your brain needs a little amount of time to figure out what’s going on, while a pagination should be a no-brainer. What does “«” mean? For us web designers, it obviously means first page. But not everyone is as computer savvy.

The obvious solution is using words instead of symbols. Everyone understands “first” and “last”. However, there‘s also our previous and next buttons. So our pagination looks like this:

(Note that this is a screenshot from an older revision)

Oops. Two problems with this:

  1. The four buttons take up a lot of horizontal screen space, which most web pages don‘t have (the example image is sticking out of the content area on this site too)

  2. Having four buttons instead of two adds a hefty amount of visual clutter

A logical solution: using an ellipsis to signify the “gap”

If you look at the pagination I designed, it doesn’t have first and last buttons. Here’s another screenshot so you don’t have to scroll up:

Instead, if you are at the first page, you will see 6 links followed by an ellipsis3. After this ellipsis, you see links to the last two pages. The ellipsis fills the gap between the visible pages and the first and last pages, depending on context.

What happens now is that your brain immediately spots the pattern. Since there’s only numbers involved, and no numbers with words, it’s really easy to see where you are and where you can go to. Your brain literally counts 1, 2, 3, 4, 5, 6, 7 … 19, 20.

It’s important to have 19, 20 at the end instead of just 20. This enforces the “counting up” in your brain.

If you are in a page in the middle you have an ellipsis on both sides. Your counting goes like this: 1, 2 … 5, 6, 7, 8, 9 ..19, 20.

If you are at a page near the end you have an ellipsis on the left side e.g. 1, 2 …16, 17, 18, 19, 20. Your brain is counting up or down, depending on how you work - the importance lies in the fact that the pattern is so obvious it’s easy to get for anyone.

Also note that the next button is greyed out when you’re on the last page.

Figure B | Last page

Since I don‘t have a research team like Jakob Nielsen, all of this is based on assumption on my side. Flickr is using a similar pattern and the pagination of Flickr is considered to be one of the best out there, so all I can conclude is: this is the way to go. Don’t use first and last buttons, use ellipses.

3: Ellipsis

Ever noticed how Microsoft Word converts 3 periods into a separate character? This character is called ellipsis. Almost everyone out there writes three dots, but if you know your typography, you probably feel this is a disgrace to the written word.

Here’s what Wikipedia has to say about ellipses:

Ellipsis (plural ellipses; from Greek ελλειψις ‘omission’) in printing and writing refers to the row of three full stops (… or . . . ) or asterisks (***) indicating an intentional omission. This punctuation mark is also called a suspension point, points of ellipsis, periods of ellipsis, or colloquially, dot-dot-dot. An ellipsis is sometimes used to indicate a pause in speech, an unfinished thought or, at the end of a sentence, a trailing off into silence (aposiopesis).

To write an ellipsis in the form of an HTML entity, use &hellip;.

Hovering

When hovering over the links, the background color, text color, and border color change to indicate clickability, as demonstrated in this image:

Link underlines

Faruk Ates states the following in his excellent Pagination 101 article:

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?)

When something is obviously clickable, there is no need for underlines. In a link-heavy area like menu‘s and pagination the underlines are visual clutterfigure c.

To compensate for not underlining the links, clickable links need to be in a box, and need to have the same color as body text (see next subheading). This is why the non-clickable links are greyed out, or black, indicating the selected page.

Figure C | Link underlines = clutter

Link colors

In his book Prioritizing Web Usability, Jakob Nielsen says:

In earlier years, we recommended that links be blue because that was the color people associated with clickability. But today’s users have seen links in many other colors. Other colors work just as well as long as they clearly stand out from the body text.

The colors of the links are blue, but can be fitted to the site‘s color scheme easily through CSS. In our test website where this pagination screenshots come from, the color of the links is blue, thus the same color is used for the pagination.

Visited pages

Obviously visitors want to know which pages they’ve already been to:

Here I’ve used the default style for visited links in most browsers (purple text). It’s always a good idea to provide styles for a:visited - unless you’re styling a web application. But that’s a story for later.

What if you have a thousand pages?

Or: the question of scalability

What if there’s a thousand pages? Then this pagination won’t cut it. This was designed to accomodate for max. 99 pages each containing 10-20 blog posts. This means a thousand or more blog posts before you need to rethink your pagination.

If you have this many blog posts, 90% of your content is going to be too old to be relevant. People should be searching your site by a search function, or browsing through categories, or browsing through monthly archives. It wouldn’t make any sense to use this pagination for such a plethora of content.

A final note

Even though I feel this design solution is an appropriate design solution to the problem of clear and usable pagination, remember to design for context. A pagination design that works for blog posts and content pages might fail miserably in a different context.

2 responses

Leave a Reply

Write in English, stay on-topic and polite.