If you watch web development trends, you should know about infinite scroll. Infinite scrolling takes the place of website paging. Normally, when you have an article that uses multiple web pages, you have a right and left arrow and page numbers that viewers use to navigate throughout the article. Separating your articles into separate web pages is called pagination. With infinite scroll, pagination is done automatically with Ajax, which is a JavaScript library that lets you asynchronously make calls to a database without reloading the page.

How Infinite Scroll Works

When you scroll to the bottom of a web page, an event occurs that can trigger JavaScript functions. This event is the starting point for infinite scroll. When you detect that the user has scrolled to the bottom of a web page, you then use Ajax to automatically query the database for the next page’s content. Ajax retrieves the data and displays it automatically when the user reaches the end of the current page.

The infinite scroll concept is easy, but it’s more difficult to actually put it into practice. A good example of infinite scrolling is Twitter. When you use your mouse scroll to move down the page, the next set of tweets appear without clicking any buttons or links. Twitter is one website that uses infinite scroll appropriately.

Infinite Scroll Pros and Cons

Infinite scroll has its pros and cons. First, it’s considered an easier navigation method for users. Users don’t need to click tiny pagination links, and they don’t need to wait for new pages to load. Because Ajax is asynchronous and runs while the current page is loaded, users never need to wait for pages to load. The result is that your bounce rate could be reduced.

Speed and convenience are infinite scroll’s advantages, but there are several disadvantages to counter the argument to move your pages the new code structure. First, infinite scroll renders the browsers scroll bar position useless. For instance, if you know that you found pertinent information in the center of the page, the scroll bar no longer reflects the center of the first page. Its position is related to the number of pages loaded as you scroll to the bottom of the browser’s page. Users often remember where they’ve found information on a page using the browser’s scrollbar, so it’s more frustrating to go back and review page information.

Infinite scroll also makes it difficult to use the browser’s back button and go back to the same place you were previously viewing. For instance, if you scroll down three pages and click the back button, clicking the forward button will bring you back to page one. You then need to scroll down again to view your previous location. This type of behavior is annoying for users.

Before you implement infinite scroll, you should do some testing. Some analysis from bigger sites such as Etsy suggests that infinite scroll actually reduces user clicks. Fewer clicks mean that your revenue will suffer. The best way to decide on web design is to implement page-layout testing called A/B testing. A/B testing lets you display different layouts to a percentage of your users. You then gather data related to user behavior and determine if it improves or reduces usability.

A/B testing can be done through Google Analytics. Google Analytics handles the experiments and data collection. The percentage of users who see the alternate infinite scroll layout is determined by you. You should run your tests for several weeks, even months, to determine if it’s best for your website. With A/B testing, you don’t make extreme changes and then find the need to roll back if you aren’t happy with the results.

Major changes to your pages and layouts should be handled with care. Always collect data before you decide to massively restructure a website. While many web developers will tell you infinite scroll is a better web design, it’s not good for all users. If you currently run an ecommerce store or have a strong user following, don’t just jump to the latest design ideas. Infinite scroll is a great way to handle paging, but it should be used properly to avoid losing your readership.

Photo by peddhapati