{"id":18037,"date":"2017-08-14T11:32:43","date_gmt":"2017-08-14T06:02:43","guid":{"rendered":"https:\/\/blog.resellerclub.com\/?p=18037"},"modified":"2026-02-16T13:36:55","modified_gmt":"2026-02-16T13:36:55","slug":"pagination-vs-infinite-scroll-which-to-use","status":"publish","type":"post","link":"https:\/\/www.resellerclub.com\/blog\/pagination-vs-infinite-scroll-which-to-use\/","title":{"rendered":"Pagination vs. Infinite Scroll: Which to Use"},"content":{"rendered":"

I covered <\/span>pagination<\/span><\/a> in my previous article and <\/span>website scrolls<\/span><\/a> in an article I wrote in 2016. However, last week I had an interesting discussion with a friend of mine who also happens to be a web developer. The discussion was about if I were to build a website, would I opt for  pagination or infinite scroll and the advantages & disadvantages of each. In this article, I will document our discussion so feel free to eavesdrop \ud83d\ude42 <\/span><\/p>\n

To be more clear, pagination is the set of numbers you see at the end of a page that function to navigate the user to the next page of content.<\/span><\/p>\n

\"\"<\/p>\n

Infinite scroll is as the name suggests, a single-page scroll that goes on endlessly with no finish line in sight. Facebook, Instagram, Twitter, Pinterest all use infinite scroll and it\u2019s what we\u2019re used to.<\/span><\/p>\n

\"\"<\/p>\n

Many ecommerce sites use infinite scroll. But just because it\u2019s popular, is it necessarily better?<\/span><\/p>\n

Pros of Infinite Scroll<\/b><\/span><\/p>\n

Engages the user<\/b>: Because there\u2019s a lot of content to explore, there\u2019s a high chance you can get your user to stay longer on your website and thereby increase engagement.<\/span><\/p>\n

No waiting for preload<\/b>: As a user, I like that I don\u2019t have to wait for pages to preload and content is consumed instantly. There\u2019s no obstruction to my browsing.<\/span><\/p>\n

Useful when the purpose is only discovering<\/b>: Infinite scrolling is useful when you\u2019re not looking for anything specific but just browsing to discover new products\/ items\/ images.<\/span><\/p>\n

Super easy on the mobile<\/b>: In my opinion, infinite scrolling is a perfect fit for mobile. Scrolling is much easier and more intuitive that tapping or clicking, leading to higher engagement and smooth user experience. <\/span><\/p>\n

Cons of Infinite Scroll<\/b><\/span><\/p>\n

The scroll back to the start is annoying<\/b>: As a user keeps scrolling lower down on the page to find a product\/ item\/ image that he like better than the one he saw on the third fold on the page but fails to find it, he tries to go back to the one he liked earlier. However, hitting the \u2018Back\u2019 button only takes him to the start of the page and to his annoyance, has to scroll through the items all over again to locate the image he liked. <\/span><\/p>\n

I scroll a lot especially on ecommerce sites to compare products. However, scrolling back to a product I viewed 3 pages down can be annoying. Additionally, if I do not open a product in a new tab, clicking on a product and then hitting \u2018Back\u2019 takes me to the start of the page again. There\u2019s no way I can bookmark.<\/span><\/p>\n

The inability to determine the scrolling position causes confusion and possible frustration which leads to a negative user experience. <\/span><\/p>\n

Feeds on browser\u2019s memory<\/b>: Listing a never-ending page can be bad for your site\u2019s performance as it uses up the browser memory. Likewise, loading more  content will use up memory and bandwidth on your device. <\/span><\/p>\n

No endpoint in sight<\/b>: For a user who is looking for the footer for Terms & Conditions or Contact details or Privacy Policy, it can be quite frustrating to scroll and not reach the endpoint of the page. You could possibly lose out on leads this way too unless you\u2019ve taken care of that in another section on your site. I\u2019ve personally experienced this and after scrolling for a few minutes, just left the website out of frustration. <\/span><\/p>\n

Scroll bars on phone are irrelevant<\/b>: When scrolling through a website on your phone, on some websites, you might notice a scroll bar. Now, scroll bars are traditionally meant to indicate how much content is on the page, how much more you need to scroll to get to the footer etc. With infinite scroll, the purpose of the scroll bar is irrelevant. You scroll a bit only to find that the results have just doubled.<\/span><\/p>\n

Pros of Pagination<\/b><\/span><\/p>\n

The separators<\/b>: A lot of content can be overwhelming especially with text. This is where separators make things easier.  Pagination works to separate content into pages for easy content consumption. I like that the text content I\u2019m viewing is segregated for me on different pages. It\u2019s a pleasant user experience. <\/span><\/p>\n

Track & bookmark<\/b>: With pagination, I can easily keep a track of how much content I\u2019ve consumed. Think of Google results or a long read such as a report. The first page is the best results. I know looking beyond the 2nd page might not be worth my time. I can also easily go back to page 1, link 3 even if I\u2019m on page 11. <\/span><\/p>\n

Control<\/b>: Infinite scrolling as I mentioned above can be frustrating especially if you\u2019re looking for the footer or just the end of the page. Since pagination enables users to track and bookmark with ease, it provides a greater sense of control when the user are aware of the number of results available and determine if what they\u2019re looking for is there or not.<\/span><\/p>\n

Additionally, knowing how many pages of results enables the user to estimate how much time it would take to go through the results to find what he is looking for.<\/span><\/p>\n

Cons of Pagination<\/b><\/span><\/p>\n

Obstructing<\/b>: Pagination is basically an obstruction to my seamless viewing or content consumption because of the extra action \u2018Next\u2019. <\/span><\/p>\n

Has limited use case<\/b>: I mentioned in my <\/span>earlier post<\/span><\/a> that pagination does have limited use cases – relevant for search results like Google, for blogs sites & Amazon uses it to list their products. As compared to the infinite scroll which has many use cases, pagination is limited to lists.<\/span><\/p>\n

\"\"<\/p>\n

Can be confusing<\/b>: As mentioned in my <\/span>previous post<\/span><\/a>, pagination, if not implemented properly, can be confusing especially if double arrows are used. Users tend to misunderstand the functionality of the double arrows which are designed to take you to the very first \/ absolute last page. It\u2019s not uncommon to confuse the single and double arrow functionality. Yet a mistake could be a frustrating user experience.<\/span><\/p>\n

\"\"<\/p>\n

Check out my last article on Best Practices while designing pagination.<\/span><\/p>\n

When to use What<\/b><\/span><\/p>\n

Infinite scrolling is a fantastic option for websites or apps that display user generated content or images. Like I mentioned earlier, infinite scroll is more exploratory. <\/span><\/p>\n

Pagination is a great option for websites and apps that intend to aid user search or results. Pagination is effective for displaying listicles – of products, items, links etc.<\/span><\/p>\n

It\u2019s important to assess the purpose of the website you\u2019re building to be able to make a decision. Google effectively uses both. Pagination for search results and infinite scroll for Images. Perfectly executed both.<\/span><\/p>\n

Let me know which one you\u2019d pick in the comments below. <\/span><\/p>\n

P.S: Our discussion didn\u2019t conclude with us agreeing on one but can you guess which one Nihkil, the developer and I, the blogger picked? <\/span><\/i><\/p>\n

Reseller Club Hosting Services<\/h2>\n

Reseller Hosting<\/a> | Windows Reseller Hosting<\/a> | Cloud Hosting<\/a> | VPS Hosting<\/a> | Managed VPS Hosting<\/a> | Dedicated Server Hosting<\/a> | Windows Dedicated Server<\/a> | Managed Dedicated Server<\/a> | Linux Shared Hosting<\/a> | Windows Shared Hosting<\/a><\/p>\n

\n\t\t\t
\n\t\t\t <\/div><\/div>\n\t\t