TL;DR: While infinite scroll does provide a solution in some cases, it can be less than ideal for users.
Infinite scroll can be disorienting, uncontrollable, and can cause your users stress.
In this article, we will explain why you need to stop building websites with infinite scroll. But to start, let’s look at a brief history of scrolling.
To understand what scroll really is, let’s see where the term scroll comes from.
scroll (n.): c. 1400, “roll of parchment or paper”
Scrolls originally were used for when information became lengthy (like religious contents). So much content became difficult to manage, read and write.
When computers came into our lives we still needed a way to navigate through large pieces of content.
In the early years of the internet, UX designers invented/explored many ways of paging/scrolling the content. Before the web was popular, we were scrolling lines on our screen.
Horizontal scrolls made scrolling a tool not only for reading the content, but also a way to navigate on the computer screen.
Using scrolls to navigate the screen encouraged people to create windows. Using windows, you would be able to view multiple pieces of content at one time.
Scrolling solves a very fundamental problem we have while browsing webpages. However, scrolling can cause many issues for users and can negatively impact the user experience. Let’s take a closer look.
I’m going to try to define how developers and designers created experiences to navigate users in their webpages.
Let’s start by learning some back-end pagination systems:
This is the most known pagination system. In this technique, first, we have to find how many items we have to paginate:
-- All posts count
SELECT COUNT(*) AS total FROM postsAfter counting all the items, we have to calculate the pages. Let’s assume we’ll show 10 items per page:
-- First page items
SELECT * FROM posts LIMIT 10And if we want to skip to the page 3, we need to skip first 30 items using OFFSET:
-- Third page items
SELECT * FROM posts LIMIT 10 OFFSET 30And we will send the pagination information to the client as follows:
{
"pagination": {
"items_count": 100,
"current": 3,
"total_pages": 10
},
"items": [...]
}Big data made it hard to calculate the table count since it is constantly growing (think about Twitter). So, developers came up with newer techniques to paginate the data: cursors.
Every row must have a unique cursor. You do not have to count the whole table which makes it impossible to know actual page count:
-- Get extra 1 item to get its cursor.
SELECT * FROM posts ORDER BY id DESC LIMIT 11Assume every post has a unique cursor field (or its ID in this example) to help pagination. The client will have pagination information as follows:
{
"pagination": {
"next": 1234 // extra item's ID (cursor), null if end of data.
},
"items": [...]
}And you can ask for the next page using cursor:
-- Offsetting records using 1234 cursor
SELECT * FROM posts WHERE id >= 1234 ORDER BY id LIMIT 11Let’s take a look at some navigation techniques.
The experience: click-based
The technique: offset-based or cursor-based
This is mainly used to navigate blogs. This is the oldest version of infinite scrolling. Using this approach, the user may not know where the content ends.
The experience: click-based
The technique: offset-based
This is the most usable (according to me) navigation type. It uses offset based pagination which allows you to jump to the page you want, or go to the end or beginning with just one click.
Google uses this kind of navigation in search results:
The experience: click trigger-based
The technique: cursor-based — may also be offset-based but would be awkward
This is one of the newest pagination techniques, and it also uses the previous version of infinite scrolls.
In the example above, the user clicks the “Load More” button to see more content.
The experience: scroll-based
The technique: cursor-based — may also be offset-based but would be VERY awkward
Infinite scrolls are the newest experience of cursor based pagination techniques.
Hugh E. Williams claims he invented infinite scroll in 2005 on Microsoft.
Metafizzy also created a tool to help developers build infinite scrolls.
Up until this section, we have reviewed how we got here. Now let’s talk about why here sucks.
Footer is a very basic unit of webpage anatomy, just like a header. Sites keep some detailed information and links in the footer such as phone numbers, addresses, and help and support links. If users are searching for this detailed information, they mostly scroll down to find the footer.
With infinite scrolls, users can have a hard time trying to find the footer. Infinite scroll makes finding the end of the page impossible. Not being able to reach the bottom of a website can make the user stressed (which is not great).
The sites with an infinite feed (like Twitter) solve the footer problem putting this required information and links in the sidebar. The sidebar is a solution to this issue, but not a good one. Footer should stay on footer.
Social media applications work with time. The users’ intention is to navigate the past. In this case, infinite scroll makes the navigation easier. Here, infinite scroll is good for performance, especially in mobile.
But if you have an e-commerce, news, magazine, or a blog website, and the user’s intention is to move around the items or articles, infinite scroll becomes a nightmare for them. In a timeline-based list, people mostly don’t look for a date or unique moment. On item-based lists, the user wants to find an item. Infinite scrolls make your items almost impossible for your users to find.
Users generally do not like the UIs when they feel they cannot control it.
A scroll event is not very intentional to do something. People navigate the page, and if they want to call an action they mostly click or touch (known as triggers). They inform the UI about their decision. But scroll is triggered without any decision.
Infinite scrolls make the pages less controllable for the users. Users can also encounter jumping glitches.
Instead of infinite scrolling, put a “load more” button, which is a trigger. This will give control to the user. (I’d prefer old style numbered pagination but we assume we use cursor based pagination right now).
People navigate between pages, bookmark some of them, share pages with their friends, etc.
However, infinite scrolls cannot keep the state by its design. Users cannot share their current state — which also means you cannot track users’ actions using analytics tools.
If your back-end pagination technique is cursor-based, it’s almost impossible to allow your users to go wherever. If you have an e-commerce website, give users control to navigate to the products they want.
Additionally, if you have a “sort by” functionality in your listing, you must show the user a pagination. In an alphabetically ordered list, you mustn’t force users to scroll down to products starting with K. They will go mad with this experience.
You should allow users to see where they are. Users scroll for a time, and because it’s a stateless design, they do not know how many times the “next page” loaded. When they refresh the page, they will reset all the way back to the original page. The user will then have to scroll back down to find where they were before.
Infinite scrolls are nice in a few cases, but they are usually not problem solvers, but problem makers. UX people shouldn’t consider infinite scrolling as a silver bullet to solve their pagination issues. Stop building websites with infinite scroll.
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
Learn more →
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Making carousels can be time-consuming, but it doesn’t have to be. Learn how to use React Snap Carousel to simplify the process.
Consider using a React form library to mitigate the challenges of building and managing forms and surveys.
In this article, you’ll learn how to set up Hoppscotch and which APIs to test it with. Then we’ll discuss alternatives: OpenAPI DevTools and Postman.
Learn to migrate from react-native-camera to VisionCamera, manage permissions, optimize performance, and implement advanced features.
12 Replies to "Stop building websites with infinite scroll!"
Very interesting list of different techniques, but do you have any sources that back up your claims about ux? For example next and previous buttons being preferred over infinite scroll?
“Not being able to reach the bottom of a website can make the user stressed”
Do you have any information to back this claim up? Otherwise, it’s just your opinion.
“On item-based lists, the user wants to find an item. Infinite scrolls make your items almost impossible for your users to find.”
Good developers and PMs build things called “Search” features. Have you heard of them? If your e-commerce website doesn’t have a search feature, infinite scrolling is the LEAST of your problems.
“Infinite scrolls make the pages less controllable for the users.”
Your point is? What does “less controllable” mean anyway? Click on a next or prev button somehow gives more “control?”
“Users scroll for a time, and because it’s a stateless design, they do not know how many times the “next page” loaded.”
Why does the user need to know this? I love using Chrome, but I don’t need to know how it works.
“When they refresh the page, they will reset all the way back to the original page.”
A good developer can retain the state of any page.
Overall, this post is just opinion, and you make yourself look like a luddite. No one should believe a word you have said about “what the user wants” or what makes a user “stressed” unless you have some sort of UX study to back up your ridiculous claims.
“Do you have any information to back this claim up? Otherwise, it’s just your opinion.”
As a user, I get frustrated when a page continues to load forever the more I scroll for all of the reasons in the article. I will lose my place if I navigate away from the page, if I’m looking for a specific item on the page I won’t know how many times I have to scroll to the bottom for it to load, etc. While I can’t speak for everyone, the author references users, and I am a user who feels they way they claimed. So there is at least one data point to back it up.
“Good developers and PMs build things called “Search” features.”
Sure, but that doesn’t mean users will know the search feature is there, now how to use it, or want to use it. Having one feature that is intuitive doesn’t justify the existence of another one that’s counterintuitive. I work with a lot of elderly people who will spend 10 minutes poking around in every directory on their computer looking for a file, completely ignoring the existence of the Start menu search feature. They do similar things on websites. Maybe it’s a generational thing. The point is, though, that not everyone will do everything the same way, not everyone will know every method of accomplishing a task, and thus every method a person may choose should be easy and should make sense.
“What does “less controllable” mean anyway?”
Allowing the user to navigate to a specific point at will. Let’s say you read something interesting on page 12. You can just go back to page 12. Now imagine the same scenario with an infinite scroll page. You have to first remember where it was in the list, which is not represented by a number like 12. Then you have to scroll to the bottom and wait for new content to load. 12 times. And if you accidentally miss it and scroll past it you’ll just be scrolling forever, because you don’t know where it was supposed to be.
“Why does the user need to know this?” For the aforementioned reason. Makes it easier to find things they may want to go back to. If I found a product, for example, on page 16, and have since navigated away from the page, I may not remember the name of the product, but if I at least remember it was on page 16 that’s a starting point. Heck, I could even get back to page 16 from my history if I didn’t remember a page number. As opposed to an infinite scroll page in my history which would be completely useless because then I would be tasked with hunting it down in an endless mess.
“A good developer can retain the state of any page.”
And if they do, that’s certainly a step in the right direction. They don’t always do this. When they do, it may not store the position forever. Maybe you’re trying to access the page from a different device. You can’t find your spot, but you could have found a specific numbered page.
“you make yourself look like a luddite”
Spoken like a true developer, completely disconnected from how the user experiences the webpage. Not everyone who visits your page is going to have a strong understanding of how technology works. In fact it should probably be *assumed* that everyone who visits it will be a luddite, so that it can be designed in a way that is user friendly for all, regardless of experience level. Making a webpage that makes sense to you, but that is not intuitive to your users, is shooting yourself in the foot.
Since you don’t seem to trust the reasoning of points made without formal studies to confirm their validity, I would like to be very clear that nothing I’ve posted in my comment is claimed to be backed by scientific research. It’s just based on my personal experience as a user, and my experience helping clients understand technology (which is what I do for a living). Which is admittedly anecdotal, my only point is that there are at least some people in the world who agree with the points the author is making and I don’t think those points should be dismissed just because they don’t include surveys and citations.
Agree, I got annoyed by website which include these features.. Im visit just for read some articles, not to read endlessly..
and some people on this comment who wrote
“Do you have any information to back this claim up? Otherwise, it’s just your opinion.”
So your claim are fact?
Your comment has been the most accurate. I can not believe he said numbered pagination is preferred… I mean the only way I think is right to do this is when working on administration panel where a table is being used. Otherwise, blogs, articles, news feeds, etc. They all should be using infinite scrolling.
That’s why the developer should always implement some kind of search solution alongside with some advanced filtering to make it easier for the user to find what he/she is looking for.
I strongly disagree, infinite scrolling ALWAYS gets in the way in my experience.
Take blogs, if I find a blog and get invested in reading it back in time, infinite scrolling makes it really hard to find a place to bookmark to resume reading it later. Photo galleries are even worse, I’ve just spent the last 10 minutes trying to go back to where I left off browsing a friends photos because Facebook kindly unloaded the page while I was looking through some photos from 8 years ago. I’m actually here on this post because of how frustrated I was getting with it.
Flickr ruined their search function with infinite scrolling. I used do a search term and spend weeks looking down the results, now I can’t as it limits the results and doesn’t have page numbers where I could resume from. Fortunately photostreams still do.
Even on phones/tablets, there comes a point where having to constantly swipe gets frustrating where a simple tap on next or a page number would be so much easier and less cramp inducing. Infinite scroll is a quick a dirty solution that people don’t even realise has made things worse.
I had this fractionation for a while, and did not know the exact terms to describe it till today. I’m in fact searching if anyone else share the feeling… I think it’s crazy infinite scrolling takes over(change from) the pagination on many of web applications. Developers somehow assume infinite scrolling is always better, when not so. A lot of times I prefer to know where I’m up to for the overall contents I’m reading through, it’s very frustrating with infinite scrolling, which I can easily getting lost. With the pagination I can keep track of how many pages I have read or which page I’m up to, in case I need to return to the same site to resume reading, next day say. It takes so much more time for me to search for certain e-mails from few years back, until I gave up last night, because hotmail has been changed to infinite scrolling. I use to able to pin point by jump to certain pages to narrow down search fairly quickly with the pagination before the new design ‘improvement’ 🙁
I do fully agree with the author. Infinite scroll looks as the easiest way to use a web page at a first glance, but when You start using it seriously, bookmark it, save or do whatever beyond “just scrolling” it becomes a nightmare. The one important down-side of infinite scroll which is not mentioned by an author but reminded by Tony is that You can’t just “jump” forward. With paginated navigation You can move to next page or quickly jump many pages forward. With infinite scroll You need to hurt Your fingers and load Your net and RAM with a huge amount of data You just need to skip. Pure waste of time, bandwidth, energy and money.
I can say one SURE way to pi** me off is to implement infinite scroll on your website. Even worse are the sites that not only set the page to infinitely scroll but *ALSO* change the title and URL as I scroll. When I find an article from a search I want to read THAT article. If I see another interesting item linked from that page, THEN I’ll click through.
Setting up Infinite Scroll is certain to get a very angry email from me. And if I eventually remember your site is one of the major offenders, I put your site on my block list so I never have to see it again.
Brilliant Blog Post. For anyone interested in why Infinite Scroll is hacking our attention spans and disrupting our thought process – please read the book Stolen Focus by Johann Hari.
For me it can easily be explained as I am looking for something through a window but you never reach the end. Until you get bored of searching. It is all about dopemine hits taking over your brain and making us forget our intentions.
I found this post after trying to use Meetup.com, which uses infinite-scroll *AND* a footer. There was something at the bottom in the footer I wanted to click on, but every time I try to scroll to it before I could aim my mouse at it the page would add another 20 items to the event list. I’d scroll to the bottom again, and again before I could click on the thing I wanted it would add another 20 items. So frustrating I never want to use Meetup again.