Deciding When To Use Infinite Scrolling: Know Your Content and Users

Written by Tuesday March 12th 2013

If you’re thinking about adding infinite scrolling to your site, there are a number of factors that you need to consider before making any decisions. Make sure you have a strong understanding of the kind of content you share and the people who are viewing it.

Infinite scrolling is a trend that’s becoming more and more popular across the web. While it may work seamlessly on some sites, it’s ineffective and frustrating on others. If you’re thinking about adding infinite scrolling to your site, there are a number of factors that you need to consider before making any decisions. Above all else, you need to have a strong understanding of the kind of content you share and the people who are viewing it. Let’s talk about some of the pros and cons of infinite scrolling.

Pros of Infinite Scrolling
One of the most beneficial features of infinite scrolling is that it lends itself wonderfully to sites that are image-heavy. Sites that feature content consisting largely of images are very engaging to users, and the ability to infinitely scroll through this content makes it very easy to lose track of the amount of time you’ve spent on a page (which is great for you as a site owner!). Consider how easy it is to get lost on Tumblr blogs, Pinterest, Instagram’s photostream, and even Google’s Image Search results. Infinite scrolling allows for much greater content exposure because it provides a constant stream of instant results, without the user even thinking about it.

Another advantageous feature of infinite scrolling is its seamless integration with touch screen devices. Small pagination links are more challenging to click from your mobile phone or tablet, but infinite scrolling makes viewing additional content simple on any device. As web browsing continually shifts away from the desktop and onto smaller devices, this feature is definitely a good asset. Infinite scrolling is helpful and convenient when reading information that displays in a feed style, like Twitter or Facebook. Pagination would make this experience much more time consuming and frustrating.

Cons of Infinite Scrolling
However, where infinite scrolling lends itself well to image-heavy sites, it does just the opposite on text-heavy sites. Pages that feature a lot of text require more time to digest the content, making infinite scrolling unnecessary and very off-putting for your users. Infinite scrolling has also shown negative results on e-commerce sites, like it did on Etsy. Users had a difficult time finding their place in the search results stream after returning from a specific product page. There was also a major decrease in how often users “favorited” products and the amount of purchases they made. The decrease in the amount of purchasing could be due to overexposure. If your users are seeing too many products at once, it becomes overwhelming and more difficult to narrow down the best results, so they may ultimately decide to not buy anything. Also, with the ability to keep scrolling to look at more and more products, it becomes difficult to navigate back to the original product you liked and would have purchased.

There are a number of other issues that infinite scroll presents, though some do have workarounds. The loss of pagination can cause users to lose their sense of orientation or location on a page. Additionally, you can only view posts in a sequential manner, rather than being able to skip to a specific page. When enlisting this feature you lose your footer, which is a real issue for some sites. You can, however, lock your footer in with fixed positioning or require manual input to load more pages, instead of automatic page loading. Infinite scrolling requires more JavaScript (JS), which can slow down or be altogether unsupported by older browsers, and can present SEO problems. One way to resolve these issues would be to build your page without JavaScript, using pagination, then have the JavaScript remove pagination and implement infinite scrolling. This way, the site doesn’t break for users without JS enabled, search engines can crawl the full inventory of results, and those that do have JS can enjoy the enhanced experience.

These benefits and drawbacks are really important to think about. Consider the type of content that you share. Is your content mostly text or mostly images? Is your site an e-commerce site, a social media platform, a blog, or something else? Infinite scrolling lends itself well to image search and display sites, as well as live-feed style social media sites. Twitter, Facebook, Tumblr, Pinterest, and Google Image Search effectively implement infinite scrolling. E-commerce sites or text-heavy sites generally don’t benefit from this feature. Etsy, Google’s primary search results page, and Amazon briefly tried infinite scrolling and removed it after experiencing negative results. Blogs can present somewhat of a gray area when it comes to infinite scrolling, and produce mixed feelings amongst users. Overall, stick to what you know. You know what content you produce and share with your users. Consider it carefully, and implement changes only if it makes sense for what you share and who you share it with.


About Hannah Volz

Hannah is a designer at Brolik Productions. In addition to designing for the web, she has experience with branding, traditional print design, and package design. When she isn't scouring design blogs, Hannah likes exploring new places around Philadelphia and coming up with weird nicknames for her cat.

Like what you just read?

Sign up for updates whenever we post a new article.    

2 Comments

  • Kind of disappointed this post doesn’t infinite scroll ;)

  • David says:

    My main beef is when doing a google search and directed to an ‘infinite-scroll’ page, there’s no way to search this ‘infinite space’ for the text that I was originally searching for!

Leave a Reply

Your email address will not be published. Required fields are marked *

s7iNua

Please type the text above:

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

infinite-scrolling