marharytakaplia
Marharyta Kaplia
Copywriter
Updated on
Other

Pagination vs Infinite Scroll vs Load More Explained

Nothing is perfect, so even after reading our article, you will not be able to determine which type of navigation is impeccable. Because each has its own strengths and weaknesses, and each is good for a certain sphere. We can’t claim that something particular will solve all the problems with navigation on your website. But, looking ahead, we may say that you will work it, combining pagination, infinite scroll, and Load More button properly.

Let’s get down to business.

Table of Contents

Pagination

Number pagination

To understand what pagination is, it is enough to remember how the paper books look. 📚 The possibility to turn each page one by one is the essence of pagination. Now, imagine how you can implement it on the websites. The roll with the written text had to be unwound for a long time to find the necessary information. Without pagination, long web pages look the same. So, pagination breaks a large array of data available on the site into separate pages for ease of use.

Humanity invented several types of pagination:

  • Direct — the list of digits (page numbers), where each digit is a link;
Direct Pagination
  • List of ranges, where each group of digits sends the user to the page on which these materials are located;
  • Reverse listing, where pages go in reverse order — from new to old. Therefore, the numbering looks like this: 40-21, 20-1;
  • Dots (or dots in combination with digits);
  • Letter pagination, where the articles, products, categories are grouped by the alphabet.
Letter Pagination

None of these types have particular advantages over others. Choose the one that fits the website and its purpose better.

Where to apply pagination?

Page-by-page navigation is used on almost all websites. Yet, this type of navigation is the most common for the online-stores, where people come to buy a specific item and don’t want to lose a sense of control. It is understandable because the product range is huge, and opening page after page is more convenient. Crocoblock offers a Products pagination widget that is a part of JetWooBuilder plugin, so you can add pagination to your online store easily.

At the same time, most modern ecommerce sites more oftenly use a combination of Load more and pagination to keep users on the page as long as possible.  Also, >50% of online shopping is done on mobile devices today, and pagination is not convenient on mobile devices.

Pagination is also a good solution for blogs with a large number of articles. Depending on the settings, 5, 10, or 20 publications are placed on one page, and the rest is transferred to the next page. Surprise, Crocoblock also has convenient tools for blogging — pay your attention to the Pagination widget; you can add it to Product archives or publications to separate the array into clear-cut pages. JetBlog plugin includes a Post Pagination widget that is perfect for blogging purposes.

Partially, pagination is also found on the websites of companies offering some services. You might not meet it in the main sections where the service is simply described. Yet, the companies’ websites have blogs, news sections, etc., where you can find page-by-page navigation.

Generally, using pagination is up to you and your needs, but it is more about the type of items you present. Car parts probably require pagination because every product in a catalog is super specific, and the user is searching for a very specific item as well. For t-shirts, it’s better to have a lazy load or Load more cause you want to show the customer as many t-shirts as possible.

Some best cases for the approach

Google Search

Google Search Pagination

Using pagination, Google gives the possibility to remember, where the most relevant search result is located.

Amazon

Amazon Pagination

Pagination works well for online stores and apps. The users need the opportunity to return to some particular page and find the item to compare or to buy it.

Udemy

Udemy Pagination

Shutterstock

Shutterstock Pagination

Pros of pagination

Clear item positioning  

Page-by-page navigation allows the user to remember the location of an item. The visitors might remember the approximate location, but the numbered links will help them get to the necessary page faster.

Pagination is good for commercial sites and applications. When the users shop online, they need the opportunity to return to where they left off and continue shopping.

Attributed control 

Infinite scrolling is like an infinite game — you will never reach the final boss to fight with. 👾 When users know the number of available results, they can make a more meaningful decision instead of digging into an infinitely updatable list. According to the study Psychology of Human-Computer Interaction by David Kieras, “Reaching an endpoint provides a sense of control.” It correlates with the paradox of choice. When people have limited but relevant results, it is easier for them to decide whether there is what they are looking for or not. Also, the total number of results helps the users to estimate the time they will spend searching for the desired information.

Good conversion

Pagination works well when the user looks for something specific in the results list. The example of Google Search can be the best representation of the pagination pros. Finding the best search results will take a second or an hour, depending on the subject. But when you end searching Google, you know the exact number of search results. It is up to you to decide when to stop and how many results to go through.

Cons of pagination

Additional actions

To get to a new page, the visitor, at first, must find a target link (for example, “Next”), then put a cursor on it, click and wait for the new page to load. The issue is that most websites display a limited number of results on one page, so the users need to make more clicks to get the desired info. If to make pages longer without compromising pagespeed, you’ll display more content or goods and allow the visitors to reduce the number of actions on the website.

Infinite Scroll

Infinite scroll navigation type

Infinite scroll is a mechanism that turns content into a single stream. Infinite scroll is a quintessence of the user’s browsing behavior (I apologize for using the word “quintessence,” for now, it is my favorite big word). 🤓

As you scroll through the page, new blocks appear. Infinite scrolling gives the deceptive impression that the data has no limits. Well, they have. However, you will need to scroll for a very, very long time to find those limits.

This method of uploading data is not that versatile and flexible. You can’t just add it to a site or app to join the trend. It is necessary to carefully analyze the features of the project, consult with specialists, put yourself in place of the target audience, and test the display on different devices.

Where to apply infinite scroll?

Mostly, social networks and online media use this type of navigation because their primary purpose is to engage visitors and make them forget about everything on Earth except for the feed…

So, infinite scroll suits best for entertainment sites. You just scroll, and scroll, and scroll, and when you do this, the time (and your life) starts to disappear. However, this pattern is terrible for e-commerce. Imagine you’re trying to find those shoes you saw 30 scrolls ago? Therefore, it is mainly used in the field of entertainment.

Some best cases for the approach

Pinterest

Pinterest Infinite Scroll

Infinite scroll is vital for discovery interfaces — like the one Pinterest has — when the users don’t search for something specific. They just look through a bunch of different pins to find what they like.

Twitter

Twitter Ifinite Scroll

Instagram, Facebook, YouTube

Facebook, Instagram, and Twitter demonstrate the advantages of the infinite scroll to the fullest. Obviously, the visitors will never reach the end of the screen or read all content the feed proposes. It would seem that at least Instagram users have a chance to see the bottom? After all, their feed consists of the friends’ and bloggers’ posts, which cannot be endless… But no. Once your friends’ content is over, Instagram’s cunning algorithms offer you similar posts.

YouTube is one more giant in the field of entertainment that uses infinite scroll. It got the best of this type of navigation. Combining it and its algorithms of recommended video, YouTube literally forces the user to continue to scroll down, searching for fresh videos. Let’s be honest: we all felt the effectiveness of YouTube’s tricks.

SnapDeal

SnapDeal infinite scroll

This online-store is a quite good example of infinite scroll used for e-commerce. At least, it shows the number of items the user sees. In combination with a wishlist, this approach works well.

Pros of infinite scroll

Improved behavioral factors

Previously, I pointed out that infinite scroll has become popular due to widespread use in social media. A person quickly dives into the information stream and forgets about time. The site seems to “challenge” the visitor and says: “Stay longer! We have a bunch of fascinating posts and even more cat videos.” What is pleasant, you don’t have to wait for the page to load.

Infinite scroll is almost a must-have for discovery interfaces. When the user is not looking for something special, they just need to look through plenty of items to find what they like.

No extra actions

When using page-by-page navigation, you must constantly click on blocks. Infinite scroll facilitates interaction. You can flick the wheel of a mouse or use a keyboard. No lengthy page refreshing and other issues. This feature will work only if the developer optimizes performance. And remember that infinite scrolling must be smooth.

After all, it is much easier to scroll than to click. For a long section of continuous content, scrolling is much more natural than cutting text into several separate screens or pages.

If you use cursor and mouse clicks, each portion of the content update requires an additional click and time to download the page. In case of infinite scroll, content updates are carried out continuously; only one action is needed.

Perfect for smartphones

The smaller the screen, the longer the scroll. The popularity of mobile browsing favors scrolling significantly, so it is the familiar ritual for almost every person on the planet. On desktops, scrolling content using a scrollbar is convenient, but the user does not have a sense of control because it jumps all the time. Another thing is a smartphone — you walk through the display from top to bottom and watch the magic. As a result, users receive a truly responsive interaction with the interface regardless of the device used.

Cons of infinite scroll

Compromising performance

Paradoxically, infinite scroll affects performance both positively and negatively. First, the user sees a limited amount of content, so the section is loaded quickly. As you scroll, the number of blocks increases, the load increases, and the page becomes “heavier.” If you have multiple tabs open on your computer or smartphone, you may not have enough system resources.

Loss of control

When using pagination, the user has complete control over the situation. He goes to the page, analyzes the content, and decides where to go after. When using infinite scroll, the only option is to scroll further to see new entries. Good if the developer has added a “Back to top” button. If not, the user will have to use the mouse to get back to the beginning.

Location search

If the infinite scroll is implemented on a commercial site that sells goods, it will be difficult for the visitor to navigate. If the scrollbar is hidden, the visitors will not understand where they are. And the user will feel the desire to close the tab. It is good if he added products to the cart or wishlist in advance. Otherwise, the business will lose the customer-to-be.

Footer loss

Infinite scroll brings the most damage when there is useful information at the bottom of the page. For example, to save space, online stores often remove the contact information from the header. Imagine users enter the catalog, activate filters, and begin to analyze products. Then they need to clarify the configuration. There is no online consultant on the site, and to find the phone number, they need to see the footer. In this case, infinite scroll will ruin the impression and become a repulsive factor.

Load More

Load More navigation

The Load more button is the button at the bottom of the page that allows you to see other results according to your search. Once you reach the bottom of the page, it will appear, signaling that you can download more content. Load More is like the ugly third child that no one talks about, and when they remember him, they compare him with his brother Infinite Scroll and sister Pagination.

Where to use Load More?

Well, everywhere. Strangely, this navigation pattern doesn’t get the deserved attention since it is used by one of the largest search engines in the world — Google. They use it on mobile devices and in Google Images (and perhaps elsewhere, but I think it’s enough).

The Load More button works well in e-commerce. It is a simple navigation type that does not interfere with the user; it asks: “Want to see more results?” Load More makes the website usability clear and intuitive. The visitors usually prefer to view more goods with the Load More button, even if the online store has pagination. Still, since loading additional items requires active selection and interaction with the site, Load More is inferior to infinite scroll.

Some best cases for the approach

American Eagle

Load more navigation type

Skechers

Load more navigation type

Pros of Load More

The main advantage of the Load More button is that it adds results rather than replace them. The user has the opportunity to return to one of the previous products instantly, simply scrolling the page up, and not wondering where the needed item remains.

Besides, the Load More button is a better solution for smartphones. With a small screen size, it is difficult to tap page buttons properly. Also, each transition leads to the loading of a new page that annoys and mobile visitors. So, the Load More button is more mobile-friendly in comparison to pagination. You can see it for yourself by trying Read More widget by Crocoblock.

Uploading new items to the current page by clicking on the button creates the effect of endless scrolling and increases user engagement. And the button allows the user to control this scrolling.

Cons of Load More

As in the case of pagination, the users are engaged in some extra actions. Also, like with the infinite scroll, it is difficult to find the previously viewed result again. At least, this pattern has an “end,” and it will not continue to upload content endlessly, like Pinterest.

SEO Perspective

Pagination

To face any issues with crawling or indexing paginated content you need to have at least 100000 pages on the website. If you do have, you need an SEO expert to analyze if all of your pages are crawled regularly and whether they are indexed or not. And if there are some issues then run a bunch of experiments to improve the way Google treats your paginated content.

If your website is smaller than that, it will be hard for you to mess things up in such a way that Google can’t crawl all your content. Follow this guide to understand technical requirements for Pagination. Some of the key points:

  • Each pagination page must have a self-referencing Canonical attribute;
  • Every page must have unique URL containing the number of a page;
  • A page must have unique Meta Title containing the number of a page;
  • Pages must be available for crawling and indexation;
  • Implement prev/next attributes (yes, you still want to have them even after Google informed us they are not used for crawling).

So, basically, treat those pages like any other page on your website. The good news is that all WP plugins or pre-built pagination solutions are SEO-optimized by default.

Infinite Scroll

Google showed the website owners a way that saves infinite scrolling and provides robots with the ability to index content. The essence of this method is as follows: creating a page with infinite scroll, the webmaster must combine the content into blocks. Each block has to have the characteristics of a full web page — unique URL and meta tags. In this case, the users see a page on the screen that can be scrolled indefinitely. And search engines “see” a series of pages and access them easily.

So, how to be sure your infinite scroll does not harm your SEO optimization? Simply check if the URL switches to something like these:

  • example.com/catalog/?page-2
  • example.com/catalog/?page-3
  • example.com/catalog/?page-4

while you scroll your listing. If it does, Google will know how to treat your content. If it’s not, you need to revise your solution for infinite scroll or it’s settings.

Load More

From the user’s perspective Infinite Scroll and Load more buttons are different because they require different behavior. But technically, the only difference is the trigger — click on the button in the first case, and scroll the second. So, the settings for both must remain the same. When you click the Load More button on the website, the URL must switch on the background. Otherwise, there is no warranty Google will reach all the content hidden under the Load More button.

Ok, now you have all the knowledge to avoid technical SEO issues with pagination, Infinite Scroll, and Load More methods. But are there good and bad solutions for ranking your content in Google. Yes and no. No, because, in theory, they are all equal and Google doesn’t benefit any of them by default. And yes, because each method leads to different users’ behavior on your website and it can influence your ranking. Think about, what suits your catalog the best and what will make users stay longer on your website. Is it static navigational links of pages or automatically loading content without any distractions? If you have an answer to this question, you know what is better for SEO.

UX Perspective

Pagination

Today, leading online stores apply pagination that simplifies the website use, and it is justified. Imagine that one page contains the entire product range, several thousand products. Of course, you can do it (but why?) because the internet page has no boundaries. But don’t forget that the connection speed is limited. Therefore, the more items the page has, the more time it needs to be loaded. In this case, pagination is used to improve site usability and increase page loading speed. At the same time, a large number of pages in the catalog section discourages the user from viewing goods and looking for what is needed among a limitless set.

Of course, by the number of pages, visitors can determine the number of items presented in the catalog/category more accurately. Numbering allows you to go several pages forward or back in one click. Nevertheless, visitors use “next” or “back” buttons more often.

Pagination Next and Back Buttons

Pagination makes it difficult to compare goods on different pages visually. With this catalog organization, it is reasonable to implement the “Add to Comparison” or “Compare” feature.

Infinite Scroll

Design is primarily about understanding and predicting the needs of the user. Very often, infinite scroll misleads users and makes them sit on pins and needles. Here are just some of the questions that users ask themselves while scrolling:

  • How many posts do they have in the feed?
  • How long will it take me to see everything?
  • Am I actually looking for what I want?
  • God, when is this all over?

If the user wants to find something specific on your site, then with infinite scroll it is almost impossible. When the visitor cannot return to the material that he saw a couple of minutes ago, UX will be extremely unsuccessful. There are no sorting, filters, or navigation items to find a specific piece of content quickly. For people, it will be much easier to remember that the content they need was on page 8. Next time they will go there in the shortest way without winding down.

With pagination, you can at least navigate this endless field of content by page numbers. But when the user scrolls down only to see how the abyss of content opens in front of him, he is covered by the unbearable existential horror.

The scrollbar is also useless: its slightest movement can sometimes lead to significant changes in the content. Plus, when the visitors use scrolls for their intended purpose, for example, to get to the footer, they will be surprised with loading new content and throwing the scrollbar back in the lane. Honestly, these are some tantalum flour.

Navigation is one of the critical factors of a good, fit UX. Infinite scroll changes the established navigation, and not for the better. Imagine, that you need to bookmark some piece of content from the bottom of the scrolling feed? Can you do this? No. It will be necessary to bookmark the entire page and violently scroll to the necessary fragment. That’s why most advanced entertainment platforms offer a possibility to save content to highlights. For example, Pinterest, Instagram, and Twitter provide users with rather convenient tools for saving liked posts.  

Load More

Baymard Institute study showed that users view more products in the catalogs with the Load More button, so it is like the golden mean between pagination and infinite scroll, or, at least, the lesser evil.

In different situations, users reacted differently. Therefore, to achieve the best result, try to follow the rules:

  • Categories — use a combination of Load More and lazy loading;
  • Search — use the Load More button, ideally with dynamic search-based numbering;
  • Mobile devices — use the Load More button, but display fewer products by default.

The appropriate combination for listing items in categories will be the combination of the Load More button and infinite scroll in the form of a lazy load.

Lazy Load Navigation

For small and medium categories, lazy loading allows you to view the entire range of products easily. For longer lists, the Load More button makes it easier to view more products. It is a “healthy break” in scrolling, which gives the user easy access to the footer and filters. One of the weaknesses of lazy loading and infinite scroll is that the page height is extended continuously. New items are refilling the list, again and again, increasing the scroll bar. The combination with the Load More button solves this problem — it gives the user access to the footer without any jumps. Lazy loading will continue to load goods, but in this case, they do not increase the list.

The Good, the Bad, and the Ugly

Here you can decide which navigation type is good for you, which is bad or ugly. Because nobody can say ambiguously something like “Use Infinite Scroll and be perfect!” There is no ideal navigation type that satisfies both SEO and UX requirements. The best thing you can do is to analyze all the factors thoroughly, understand your website’s goals, and combine pagination, infinite scroll, and Load More to find the lesser evil. And the less ugly navigation type.