If our content were a building, the pagination would be the stairs and elevators. No one in their right mind would walk up 48 floors, just as no one has ever reached page 7 on Google. That is why pagination is so important that without it our content will be difficult or impossible to find.
Most websites implement a simple and intuitive pagination system, but others make use of pagination techniques that manage to ruin the user experience.
In this article we are going to talk about pagination for listings and search, and how different types of pagination can help or affect our website.
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.
|It is easy to implement.||If the user does not find useful elements on the current page, their interest in going to the next page will be drastically affected.|
|Maintains a very strict order.||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.|
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.
|It is easy to identify by the user.||Difficult to implement.|
|It allows skipping (generally) one, two or three pages backwards or forwards.||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.|
|Maximum flexibility, many options to generate our pagination and apply a design to it.|
|The user can know which page he is on.|
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.
|No user interaction is required.||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.|
|A caching system can be implemented that loads the following items in background, gaining speed when displaying them.||When many items have been loaded, the browser can be really slow.|
|Users are more likely to see a larger number of items using this pagination method, simply because they don’t have to click.||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.|
This method is similar to infinite scroll but the user has control over when they want to see more results.
|You can implement a caching system like infinite scroll.||It suffers the same penalties as infinite scroll.|
|Gets along well with the footer.|
|Can be easily replaced by a loading text when the user clicks, which improves the UX.|
Of course this depends on the content, but here is a brief summary of where we can use these pagination systems.
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.
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.
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.
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.
That’s right, there are many more pagination systems.
Some examples are:
[1-5] [6-10] [11-15] [16-20] [21-25] ... or
« Page 1 of 32 ». There is also touch pagination via a slider.
There are many original and new systems, some useful and some destined to fail. It is up to you to choose the most suitable for your website.