Infinite scroll (or “endless scroll”) is a web design technique that automatically loads new content as a user scrolls down a webpage, presenting the user with a seemingly endless stream of content. (In some cases, websites will employ a “hybrid” version that displays a “load more” button once the bottom of the page is reached.) Some well-known sites that employ infinite scroll are Twitter, Facebook and Google Image Search.
Why do sites use infinite scroll? The idea is that it is better to automatically load in new content when a page reaches the end than to make the user click to a new page. This is thought to create a better, more seamless user experience, especially on mobile.
However, usability studies and real-world examples show that, like many trendy design choices, infinite scroll is not the best fit for every site.
So, when should we use infinite scroll? When should we use a hybrid? And when should we use no scroll at all?
Determining User Intent
Key to the success of your infinite page is user intent. Thus, when deciding whether or not to use infinite scroll, it’s important to ask, “What is a user doing on my site?”
Endless scrolling saves people from having to attend to the mechanics of pagination in browsing tasks, but is not a good choice for websites that support goal-oriented finding tasks. Hoa Loranger, Nielsen Norman Group
If a user is just exploring a site with no definitive goal in mind, they often enjoy the concept of infinite scroll. It allows them to “wander” the site to find what interests them and to discover content in a leisurely manner.
However, when a user is trying to complete a task or a goal, infinite scroll is much more likely to leave that user frustrated and unhappy.
Real-World Example: When Infinite Scroll Doesn’t Work
Years ago, popular e-commerce website Etsy switched to infinite scroll, thinking they would gain users and increase engagement. They didn’t. In fact, engagement went down — but why?
Well, it seems the majority of Etsy users are task-oriented. When Etsy gave them an infinite scroll experience, it created an exploratory page design which users found less helpful.
When a task-oriented user is on a site, they have certain expectations for how site interactions occur. Often, they are building a “mind map” of where items are in relation to each other, and this helps them in navigating the site. Infinite scroll breaks that map by removing pagination, breaking the back button and changing the meaning behind the scrollbar.
So, what are the issues of infinite scroll and mismatched intent?
The Issues With Infinite Scroll
Users lose control of their experience when infinite scroll is enabled, because it breaks several known and established patterns of user interaction. For instance:
Lost back button functionality. When content is consumed in an infinite stream, the back button cannot be used to navigate to previously viewed content.
Mapping problems. Finding where you were — or where the content you just clicked is located in the page — is very difficult without clear reference points.
Scrollbar issues. Visitors use the scrollbar to determine page length, which helps them to gauge their level of investment in the task. “Breaking” this functionality with infinite scroll can make them mentally fatigued.
Too much data. If you load in too much data, you can cause slowed browser response as the cache fills.
Inability to reach the page footer. Surprisingly, footer links are an often used method of navigating a site.
Overwhelming users: A page with no end in sight can cause the user to become fatigued and frustrated, as there is no point of completion. They can never finish their task, so there is no feeling of accomplishment.
When the user has a task-oriented goal, the loss of control, placement, feeling of endlessness and loss of reference points can cause stress. This stress can cause your users to feel the frustration of an unspoken, yet broken, user-site agreement. It’s sort of like if you got in the car and someone removed the brake pedal — things are not working as they should, and you have stuff to do!
Again, this only applies to certain types of sites. When exploring a site like Facebook, for example, users tend not to mind “losing their way.” After all, how many times have you started to look at one story in Facebook, only to find out you wasted an hour looking at cat videos and political rants as you explored the stream? The intent and the method fit. You are consuming content, not searching for an endpoint.
Endless Scroll, Hybrid Scroll, And Stop Points
We now understand what infinite scroll is, and we know that it’s important to consider user intent before deciding that it’s the best choice for your site. The question now becomes, what’s the best way to implement it?
Endless Scroll
True infinite scroll is, in actuality, an endless data scroll. The user scrolls, and it triggers a script that loads more and more content until you run out of content to load. This scroll type is to be avoided. Very few people are going to load page fifty or one hundred “pages” into their browser. In fact, most are unlikely to load more than a few.
Of every site we have ever run a live heatmap on, only 10-15% of your users even make it to the bottom of the first page of content. Given that, it’s unlikely that users encountering an endless scroll will spend hours scrolling. (If you think they do, check and make sure your scroll measurements are accurate in your analytics.)
So, if this is a less than desirable method for implementation, what is a desirable one?
Hybrid Scroll
This scroll type does not load data on every load point. Instead, after the first few content triggers, it sets a “load more” button type. This allows users to gain a sense of control over their experience and set visual stop points, helping to fight the sense of an overwhelming, endless experience.
Facebook, Twitter, and Google Images all use this method. Facebook uses time frames you need to click, Twitter stops loading tweets and Google Images only gives you a fraction of the images they have in their index. While all these would be perfect use cases of endless scroll, hybrid is, for them, the seemingly better choice.
About Stop Points
In my opinion, you must set stop and end points like Facebook, Twitter and Google Images. There is no reason to overload your user with 175 pages of content (true story) or load up their browser cache to the point of slogging it down to the speed of molasses in winter. No one is reading all that — and even if a few people are, it’s not worth the headache to the other 99.9% of your users.
Stop points help reduce some of the issues infinite scroll can create. Periodic endpoints let the user know they are done, reduce page load, and allow a user to reach your footer.
What About “No Scroll”?
Now the bigger question is, what if you didn’t need these methods at all?
People these days have become overly reliant on technology for content discovery. It is simpler to throw 100 stories in a queue than it is to properly curate a homepage.
Why does this matter?
Recently, we worked with a very well known publisher. During the finale week of Breaking Bad, they created an infinite scroll page for key terms related to “Breaking Bad Finale.” The publisher’s assumption was that this page should have performed very well — users would be heavily searching for these terms, and the page would have tons of content.
However, it didn’t work out that way. The visit count was unnaturally low and the bounce rate extremely high, so we did a bit of investigation. We noticed that the page had an amazing article about the finale and a comprehensive analysis of the show as a whole — unfortunately, it was buried eight stories down the page. The first story? How the Sex and the City and Breaking Bad finales were similar.
Now, I am sure this was probably an excellent piece as well. The site had excellent writers. However, if you are looking for a finale piece on Breaking Bad, then a piece featuring Sex and the City is not likely to keep you on the page. User intent and page design were incongruent.
Combo Pack
A combination based on user intent matching is the best of both worlds. Remember, there are typically different use cases within a site.
For example, you could manually curate your most important page sections, then let hybrid scroll fill in the rest. Or, you could implement infinite scroll only on pages with exploratory intent. This way, you are making sure your users get the best experience for their intent, not your convenience.
Remember: If you are relying strictly on auto load of infinite scroll, you are surely leaving traffic on the table. How much, you might never know.
Tread Carefully With Infinite Scroll
Infinite scroll can work well, but it’s not for every site. The best advice? Test a curated content page with proper site flow against your infinite or hybrid pages. In most cases, it is much more likely your curated pages will perform better, but it is important to test before making assumptions.
A final word of caution on the topic: This article was only meant to address the question of when you should use infinite scroll. It does not address the many issues surrounding the proper SEO and analytics measurement of this page type.
If you decide that infinite scroll is a good choice for your site and your users, make sure you read Google’s recommendations for properly optimizing a page with infinite scroll. This is critical as the scroll can kill your site SEO.
Final Thoughts
While reducing clicks can be good, the elimination of pagination for this alone is not a best practice. You need to make sure you are matching your user intent to your page design before adding infinite scroll.
Then, once you have added it, make sure you use the hybrid method with stop points and A/B test this against a properly curated page. Finally, whatever you do make sure to follow Googler John Mueller’s suggestions for proper SEO of these pages or you might tank your site.
Comments