How to choose the right pagination method

The textual (Previous / Next)

It is probably the most common of all as it comes by default in Wordpress. It consists of the typical buttons / links to go back and forward, no mystery.

In favor:

• It is easy to implement.
• Maintains a very strict order.

Against:

• If the user does not find useful elements on the current page, their interest in going to the next page will be drastically affected.
• It is impossible to skip results. For example: jump directly to page 3.
• It is not known how many pages there really are, there may be 7 or 500.
• It is not possible to know which page you are on through the pagination.

The numeric (1 ... 5 6 7 8 9 ... 13)

This pagination technique has many variants. We can see it integrating the "First / Last" links and/or integrating the "Previous / Next" links.

This is the method used by Google although they do not include a "First / Last" (nor do they need it).

Under no circumstances should the pagination be like: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 .... I have even seen them with numbers from 1 to 409.

It is also not very useful to include the textual "Previous / Next" links since the contiguous numbers already do this function.

Another way to take advantage of this pagination method is to omit the "First / Last" links and always keep the first and last page visible like: 1 ... 5 6 7 8 9 ... 57.

In favor:

• It is easy to identify by the user.
• It allows skipping (generally) one, two or three pages backwards or forwards.
• Maximum flexibility, many options to generate our pagination and apply a design to it.
• The user can know which page he is on.

Against:

• Difficult to implement.
• If the first and last pages are not included or are included without numbers, it is impossible to determine how many pages there are at a glance.

Infinite scroll

Tricky subject. It became so fashionable that a common thing was to try to get to the footer but the infinite scroll always loaded new data.

Its biggest penalty is that if you click on a link and then go back, you lose the position you were in. This can be solved by adding to the URL an anchor (like /articles/#3) that changes dynamically as new pages are loaded. Thus, reading the URL we can skip the number of elements needed. That is, if we show 20 elements per page and we have that URL, we will show the elements from the number 60. The problem is that the first results will be skipped.

In favor:

• No user interaction is required.
• A caching system can be implemented that loads the following items in background, gaining speed when displaying them.
• Users are more likely to see a larger number of items using this pagination method, simply because they don't have to click.

Against:

• The user cannot save a position on the page, nor can the user go back to where they were by using the browser's "Back" button. This can be corrected as we saw above, but it increases the difficulty of implementation.
• When many items have been loaded, the browser can be really slow.
• Impossible to skip or go to the last page.
• Can't tell what page you are on. Although you can add something like: "Showing results 61-90", it wouldn't make much sense because you can't get there directly.
• You don't get a sense of order about the elements.
• It doesn't work well with the footer.

The "Load more" button

This method is similar to infinite scroll but the user has control over when they want to see more results.

In favor:

• You can implement a caching system like infinite scroll.
• Gets along well with the footer.
• Can be easily replaced by a loading text when the user clicks, which improves the UX.

Against:

• It suffers the same penalties as infinite scroll.

Textual

An example would be a comic book or a series of articles, why would we want to jump to page 7? If you have an order, this pager is probably the most effective.

Numeric

This is the one we will use most of the time because it is the most flexible and widespread. An example would be a web of articles or photographs, where we don't care if we see page 2 or page 20, since both have the same interest. In this case giving the user this possibility is a good idea.

Infinite scroll

Surely 90% of the times we think of this technique will be a bad idea. The other 10% could be websites like Facebook or Twitter where we are not looking for anything in particular, we just want to spend some time scrolling and seeing news, jokes or photos of friends.

Infinite scroll would not work in an online store, since the user is not browsing for entertainment but looking for something specific and expects to find it and know where it is. In an online store, if our products are sorted by price and the first results show products worth 150€, maybe the user decides to jump 4 pages at once to get to a lower price range. In this case we would use the numeric or some other variant.

Another option to use infinite scroll would be a multimedia website. Since we can see images much faster than reading text, being able to load new elements without having to click and wait would be a great advantage for the user.

Load more

The interesting thing about this technique is that it can be used on its own or in conjunction with infinite scroll. One example that I think is great is YouTube. On the subscriptions page, the second page loads via infinite scroll but the following pages need the user to click "Load more", which avoids some of the problems of infinite scroll such as the browser using too much memory.

On its own, this pagination method works just like the infinite scroll but gives the user control over when they want to see more results.