It’s hard to break the power of infinite scroll, which, in the early 2010s, became a design practice standard.
The idea behind infinite scroll is that it allows people to enjoy a frictionless browsing experience. They can surf the web and casually consume content without a pesky “Next page” button interrupting their flow.
What Is Infinite Scroll?
Without a natural stopping point, though, people tend to just keep going. Infinite scroll is designed to pull you in.
Aza Raskin would call it addicting. He would know; he designed it. Raskin told the Wall Street Journal that his intentions for creating infinite scroll were pure: He wanted to eliminate the user’s need to make another choice he thought they didn’t care about. If the user was already scrolling, he figured, they probably just wanted more content, so why not load it for them, and keep adding to it beneath? This made sense to others too, and the idea took off. Now, infinite scroll is ubiquitous on social media platforms, blogs and e-commerce sites.
While infinite scroll may offer users a smooth browsing experience, many designers believe there are better ways to navigate the web.
The Case for Infinite Scroll
Infinite Scroll Advantages
- Seamless mobile scrolling
- Serendipitous browsing
Infinite Scrolls Allows for Seamless Mobile Scrolling
Removing page numbers and buttons from the bottoms of pages in favor of infinite scroll might yield an elegant, seamless browsing experience for users. Especially on mobile devices, where users have grown accustomed to swiping with their thumbs, rather than pecking at buttons, to fetch additional content.
Infinite scroll Is Fun for Serendipitous Browsing
Infinite scroll is also an intuitive design choice when the main action of users is to casually flip through a social media feed. In this context, the timeliness of information is paramount, and each bit of information is of relatively equal importance. And there’s always a new update.
“If you were to paginate that information, it wouldn’t really make any sense,” Hugh Guiney, a UI and UX design consultant, told Built In. “By the time you go to page two, the page one results are there.” That makes infinite scroll — rather than pagination — a natural fit for social feeds, contexts where users typically don’t have a specific goal in mind.
Infinite scroll may also work well for chat-style applications, like texting or Slack, where users generally don’t have to locate specific messages or worry about seeing everything. “Those are really just moments in time, you’re dipping in and dipping out,” Adrian Roselli, a web accessibility and user experience consultant, told Built In.
The Case Against Infinite Scroll
Infinite Scroll Disadvantages
- Might contribute to social media addiction
- Risks accessibility violations
- Makes footers hard to reach
- Causes users to lose their place
- Slows down users who have specific goals
- Messes with user intuition
Infinite Scroll Might Contribute to Social Media Addiction
In 2019, U.S. Senator Josh Hawley introduced the Social Media Addiction Reduction Technology (SMART) Act. If enacted, the bill would outlaw social media platforms from using certain practices, including infinite scroll, which it calls exploitative of human psychology.
Questions surrounding the prevalence and impact of social media addiction remain up for debate, and more research is needed to make any definitive conclusions about how persuasive design, such as infinite scroll, may contribute to it.
Still, cautious designers may want to think twice before implementing a feature likened to slot machines.
Infinite Scroll Risks Accessibility Violations
Infinite scroll can make navigation especially difficult for users with disabilities. People who rely on assistive technology to help them access footers, sidebars and other relevant pages on a site may be hindered from doing so on interfaces that continuously load content. Infinite scroll runs the risk of alienating these users, and violating Web Content Accessibility Guidelines in the process.
Infinite Scroll Makes Footers Impossible to Reach
Roselli occasionally sees clients combine an infinite scroll with a footer at the bottom of the page. This is an all-too-common mistake, and it keeps “About” and “Contact” links out of reach, which creates headaches for users who are trying to access pertinent information — but can’t.
For a novice or a keyboard-only user, it’s incredibly frustrating to try to navigate to content that’s unreachable because more and more gets loaded along the way, Roselli said.
“It will drive them nuts.”
Infinite Scroll Can Cause a User to Lose Their Place
Suppose an e-commerce store uses infinite scroll to display all its products on a single page, rather than dividing them into pages that each display a dozen or so products.
When a user sees an item they like, they might click on an individual product to view it on a new page. And if they want to continue browsing, they will hit the “back” button, expecting to return to the same point they left off. Except in most cases, they won’t. They will return to the top of the previous page instead. And to get back to the point they were before they made the click, they have to scroll down again.
Savvy internet users sidestep this irritation by performing a control-click to create new tabs for items without losing their place in the scroll. But any design that relies on users to employ advanced tactics so they can avoid a frustrating experience needs to be re-examined.
Infinite Scroll Slows Down Users With Specific Goals
Infinite scroll can be a hassle for goal-driven users.
If a user visits a site and knows exactly what they want, but what they want is located way down an infinite scroll of content, they are still forced to flip through a bunch of irrelevant content first. There’s no way to quickly skip ahead to their target destination.
“If I’m on a product site, and I want pants, and that’s letter ‘p,’ I don’t want to have to scroll through the other 15 letters of the alphabet,” Roselli said. “Just let me tap ‘p’ and jump into that section of infinite scroll.”
Infinite Scroll Messes With User Intuition
Some blogs and news sites use infinite scroll too. They stack articles on top of each other on an endlessly scrolling page, often with each successive article creating a new URL in the address bar as the user scrolls down.
This may encourage passive users to stick around and read “just one more” article, which helps juice the site’s pageview and bounce-rate numbers — but it yields a frustrating experience for most visitors.
According to Guiney, this website design “breaks the mental model of the web.”
“For ages, it was just one URL per page,” he added. “Now it’s like n number of URLs per page.”
Internet users expect a sense of progress while they’re reading an online article, and a sense of finality when they complete one. But infinite scroll disrupts this, which leads to disorientation.
Guiney said that, on news sites that use infinite scroll, it’s easy for users to accidentally scroll past the article they read, copy the URL of the next article, and share the wrong article with their friend. Which is something that doesn’t happen on a site that uses pagination.
Alternatives to Infinite Scroll
Designers don’t have to add infinite scroll to their websites or apps. Instead, they can opt for one of two common alternatives: pagination and load-more buttons.
Pagination is probably the most obvious approach to organizing web content. It involves dividing content into discrete pages, each one populated with a limited number of items. It’s clear, and gives users what they expect. There are hardly any surprises with pagination.
It also offers users a sense of where items are located. A user who’s shopping for a hat on an e-commerce site, for example, might get to page four and realize that the pickings are getting slim, and recall that their favorite option was on or around page two. Returning to the location of that specific hat is a pretty simple task with pagination.
Load-more buttons are typically placed beneath a chunk of content and ask users if they want to see more results. Unlike infinite scroll, it doesn’t assume that they do. It gives them a natural stopping point, a choice to continue. And it allows users to access the footer if they need to.
Unlike pagination, load-more buttons don’t break the content up into discrete, numbered-or-alphabetized pages.
The experience of web pages with a load-more button slightly resembles that of ones with infinite scroll though. For instance, after the user hits “load more” several times, they have one large consolidated page of items, rather multiple pages of items. As a result, some downsides of infinite scroll remain: It’s still hard to return to your previous spot after clicking a link, and users still don’t get the sense of progress from being done with a page.
Infinite Scroll Best Practices for Implementation
It’s almost always the case that designers will want to avoid infinite scroll. But if they are determined to use it, Roselli said they should keep a few things in mind.
Don’t Place Content After the Infinite Scroll
Sticking a website footer beneath a sea of endlessly loading content saddles users with a Sisyphean task. They’ll get angry with you for this. And rightly so. Put important information in an easy-to-reach place.
When a User Hits the ‘Back’ Button, Let Them Return to the Exact Same Place
There’s nothing more frustrating than losing your place and having to scroll through the same content just to get back to where you left off. Code it on the back end to let users return to where they were.
Offer the Ability to Jump Ahead
Don’t make your users waste time by scrolling through content they know they don’t need in order to get to the stuff they’re looking for. Include buttons to let them skip to a certain letter or number.
Make It Work for Keyboard-Only Users
Build and test your infinite scroll in such a way that keyboard-only users and people who use screen readers can experience your page as intended. They shouldn’t have to hit the “tab” button a hundred times to get where they need to go. The solution may be to include an option to switch off infinite scroll, and enable users to use pagination or load-more buttons if they wish.
Test It First
“Before burning time on writing the code, figure out what problem you’re trying to solve,” Roselli said. If designers want to increase time on site and lower bounce rates, for example, they should prototype it, test it on a good cross-section of users (including users with disabilities) and see if the design actually supports the goal.
Whatever route a designer ultimately decides to take — infinite scroll, load-more buttons, pagination, or even just a search bar — testing it out first and gathering user feedback is the most important step.