To Infinite Scroll or Not to Infinite Scroll: Where We’ve Come So Far

Today we’re delving into the most relevant facts on how infinite scrolling turned out to become such an acclaimed technique all over the web, and why, despite its popularity, it’s not yet all that widely adopted in web design.

This feature appeared at a point in the history of the Internet when the amount of information to be presented on web pages increased, and the speed of connections allowed the reader to access and transfer information at greater rates. The question of infinite scrolling on web pages is one of the aspects involved in the user experience design, and isn’t as cut-and-dry as you might think.

2 Million+ Digital Assets, With Unlimited Downloads

Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

See More

Beginnings and Popularisation

At Google, it’s called continuous scrolling and can be also be referred to as endless scrolling. Briefly, infinite scrolling is a technique to make the browser auto load new content when the user reaches the bottom of the page so that it is not necessary to look for pagination buttons to go to a next part; the whole thing will appear just by rolling the mouse wheel.

This technique is notably used in the news feed page on Facebook; the images search results page of Google and the Twitter timeline. An interesting up-to-date example published for reference purposes can be seen at the Isotope jQuery plugin demo page.

hexaedro

hexaedro.eu takes advantage of horizontal infinite scrolling to illustrate evolution of mankind

One of the first references to this kind of scrolling was made back in 2005 by Bill Scott (Director of User Interface Engineering at PayPal) in his article Death to Paging! – Rico LiveGrid Released.

It was developed to present a very large table of data in a single view to the user before he had to go to a following section, and it was first referred to as the scrolling live grid. The article included a pros and cons section, some design considerations and formulated the elements of the question in clear words: paging vs. infinite scroll.

The technique was refined and started to be very popular on the web, causing a sudden explosion of enthusiasm about it. One year after Scott’s article, announcing the scrolling live grid, it was possible to find online texts vilifying the page-chunking phenomenon and praising the new scroll with the motto “Don’t force the user to ask for more content: just give it to them.”

By mid 2008, the term infinite scroll already had its own life and a site with the same name devoted to explaining in detail how it works. The site offered also a handful of plugins to enable continuous scrolling on WordPress themes, pages via jQuery libraries and “autopagerize” add-ons for Safari and Chrome which could automatically add the scrolling function to normal sites.

“Don’t force the user to ask for more content: just give it to them.”

Even in 2012 the technique is still presented as an innovation “to your heart’s delight” along with the implementation of responsive design. From a more analytical point of view, this was one step further on the separation between the initially printed existence of content and its electronic counterpart. After all, the notion of a web page comes precisely from the material world of newspapers, magazines, and books with real paper pages.

Thomas Baekdal explains the relationship between printed pages and texts displayed on digital screens in Dissolving that Print Mentality. Baekdal basically settles the issue with a kind of formula: format first or content first. In his analysis Baekdal states that the limitations of the printed media should not be transferred to the digital screen.

Apple also paid some tribute to the scrolling tendency. One of the major features of the new iBooks 3.0 was the possibility of scrolling the books vertically. Now the reader could forget about the page turning effect and read their bestsellers by finger flicking. That was precisely an implementation of the “get rid of the dancing bear” motto of Baekdal: to allow the reader to be freed from the old physical book paradigm. Fortunately, there was an option to decide between the traditional page turn theme or the continuous scrolling one at will, so the old-fashioned reader would still have the opportunity of mimicking true books within their device.

Why Avoid this UX Improvement?

One of the few exceptions to the rule of embracing infinite scrolling was the case of Dan McKinley at Etsy where a practical piece of research using the A/B testing methodology showed that the technique was not working as expected.

In fact, infinite scrolling was removed from the site after the number of clicks on favorites decreased and the search function was not used anymore. Notwithstanding a possible bias on the method used to evaluate the reactions of the users, it is clear that infinite scrolling was not maximizing activity by itself, or at least that the usual public of the site didn’t agree with the change.

Google is another example where endless scrolling did not succeed to be fully implemented. Only the image search has infinite scrolling, and even there, the scrolling is limited with the “show more results” button.

distance to mars

one of the most creative uses of infinite scrolling is depicted in the site distancetomars.com

The Benefits

More than being merely a fancy feature, infinite scrolling has various advantages that make it worthwhile in many cases:

  • The uninterrupted attention a user maintains when more content is provided automatically is at the core of the attractiveness of the infinite scrolling. The reader will not have to stop to think where to find the next button or which number of pages should come, following an improved attention.
  • In psychological terms, infinite scrolling seems to trigger automatic responses based on curiosity and the alleviation of the expectation produced while waiting for new information, which causes a kind of excitement and willingness to continue scrolling to see what comes up. This psychological mechanism deserves sufficient comprehension as the initial advantage can turn into a problem. For example, the findings of McKinley suggest that endlessly scrolling the search results page somehow shocked or confused the users, overloading them with more and more information to the point that using the search was avoided.
  • Template designs can benefit with more cleanness, more room for content and less distracting elements like the list of numbers for paging.

The Downsides

Of course, there are also a number of issues with infinite scrolling that should be considered:

  • Page loading time increased: It’s obvious that the extra content to be appended at the bottom of a page needs more time to be downloaded. Users with dial-up connections or poor mobile data plans will have a reduced ability to browse effectively that page.
  • Memory usage: Browsers, both on desktop computers as well as on mobile devices and tablets can potentially run out of memory and crash, specially when the page loads tons of images.
  • The increased loading time together with more system memory required and processor usage could inevitably result in choppy, jumpy unpleasant navigation.
  • Browser compatibility: Since infinite scrolling belongs to the realm of responsive web design, it depends on libraries and plugins that may not be fully compatible on older devices or browser versions.
  • Both seeing the footer disappear and being unable to reach can be a “traumatizing” experience for the user. Also, all the content of the footer, and therefore, the function of the footer itself will vanish.
  • Lack of orientation and spatial reference: In a paginated scheme users can set a simple visual reference to orient themselves through the content of the page and mark the places where something of interest is found, so it’s possible to quickly return there later. There could be users who feel lost or confused not knowing where they really are or missing what they were looking for.
  • Loss of the user’s last position in the stream of data, when the refresh or the back button is pushed. Since the infinite scrolling aims to show large amounts of entries, it should be implemented also a way to retrieve the actual position in the list, to avoid frustrating situations. Most of complaints against endless pages refer to these two last points as the users were losing control over the page they visit.
  • Bookmarks tend to be useless since a point of interest won’t be marked on a discrete page but floating somewhere in the flow of entries.
  • While it’s not necessarily a bad thing, rankings could vary greatly on search pages since those results confined after page number 2 will then appear on page number one just by scrolling down long enough.

That’s why, despite their high popularity, infinite pages are not always the best option for every site or even for the same site viewed in different devices.

A Few Workarounds

Developers constantly find workarounds for these inconveniences, making infinite scroll more effective. The well documented case of the new LinkedIn app for iPad provides a good case study about problems and solutions when implementing the infinite scroll.

The application had to have infinite scrolling in a central list to show news and big pictures; this created the need of a convenient way of handling all the elements without affecting the performance of the scroll. HTML5 and CSS tricks were combined to get the final result of an app that shows the content smoothly without crashing.

Undoubtedly this enhancement of the user experience still has a fair way to evolve, but users already enjoy a better browsing experience — particularly when it comes to navigating pages with lots of information, graphics and text.

Repository Zone

Infinite scrolling is here to stay, so it is advisable to know different methods to make it work:

Enhantsy: The handful of people who actually liked the implementation of infinite scrolling on Etsy.com can re-enable it on their page by installing this plugin from the page Enhantsy. The plugin offers several other functions in addition to restore continuous scrolling in all pages of Etsy.

WordPress Solutions: Blogs are perhaps the favorite candidates for infinite scrolling. Maybe a small proportion of users cannot still deal with the semi-transparent floating footer that WordPress places when infinite scrolling is enabled, but for the large majority who likes the technique, Infinite-Scroll is a plugin that will activate the endless scroll mode in most of WP themes and requires little expertise or coding skills. The Jetpack plugin also offers infinite scrolling as one more between dozens of functionalities. Tuts+ has posted a tutorial on how to achieve infinite scrolling using jQuery; this tutorial is directed to the courageous tinkerers willing to implement infinite scrolling by entering the code themselves.

Discussion and Recommendations: StackOverflow offers plenty of tutorials about any conceivable aspect related to infinite scrolling.

Mobile Alternatives: Infinite scrolling works well with mobile devices due to the nature of their touch screens. It is possible to get the effect on Android by using Android-Binding. Methods for image scrolling used in apps are also available, for instance, to work on iPhones.