How to use the infinite scrolling trend, the right way

Infinite scrolling has became a common design pattern in recent years.

With many high profile social networks adopting the solution, it’s come to be one of the most widely adopted patterns out there. Though however popular, every design pattern always has its own unique strengths and weaknesses we have to plan for.

Done badly, and infinite scrolling will wreck your UX and guarantee total failure as users desert you in droves. Get it right, and you’ll have an intuitive, popular and successful site.


Understanding why infinite scrolling drives engagement

When implementing a design pattern, it’s always critical to evaluate the pros and cons for each unique scenario. What resulted in more user engagement for someone else, may actually result in less user engagement from your own users.

For infinite scrolling in particular, it’s all about the type of content users are interacting with.

Being able to determine what type of content goals you have for your users will be able to provide you with insight as to which design patterns will work best in your situation. This applies to any pattern, but especially to infinite scrolling.

High engagement content

Content that seeks to grab and keep the user’s interest for a prolonged period of time, or seeks to be interactive, is simply not an ideal candidate for typical infinite scrolling. If your goal is to have your users read, like, and share each individual post, giving them dozens to work through at a time may seem overwhelming.

That being said, Medium has found a way to implement it successfully with content that wouldn’t typically benefit from infinite scrolling.

Instead of presenting the user with the next ten or twenty posts, Medium provides a single recommendation at the end of each article. This stays true to the high engagement function, but offers the browsability benefit that infinite scrolling brings. So while high engagement may be your goal, don’t let that deter you from making a creative solution of your own.


Low engagement content

Infinite scrolling is at its best with content that requires low engagement. Sites like Twitter and Facebook are spectacular examples of this. The typical user of these sites simply scrolls down the list, consuming content but rarely actively interacting with it. While these type of situations don’t score high on user engagement, they do end up keeping users interested for longer periods of time.


Uncontrollable variables in content type

While it’s sometimes obvious what type of content your website may have, what about those that aren’t so black and white? Tumblr is a good example of this, with content that could have high or low user engagement goals depending upon what type of blogs the user follows. While these situations are rare, they do pose a problem in that infinite scrolling would be beneficial only to half of the users. Interestingly enough, the solution in this case is to minimize a user’s options of interaction with each individual post. This allows for the high engagement users to narrowly focus on individual posts, and low engagement users to consume much more content without being required to interact as much.

It’s also worth noting that Tumblr does a fantastic job of allowing users to decide the value of content on an individual basis. Giving users the option to enable or disable infinite scrolling in their preferences provides further control over how they consume the content.


Hybrid scrolling solutions

Many places choose to implement a hybrid approach to infinite scrolling, prompting the user to load more content when they reach the end of a page. By doing so, they give back the control to the user to decide how much content to load – which is critical on mobile. This solution also helps with maintaining a consistent data load on the server. After automatically loading a predefined number of pages, a button would appear prompting the user to load more manually.


When Infinite scrolling goes bad

There are countless examples out there of websites using infinite scrolling, and more than a few do so to the detrement users. Dan Nguyen wrote an interesting article back when Etsy attempted to implement the feature. What ended up happening is Etsy went ahead with implementing it before testing their assumptions. Loading more search results, at a faster rate would seem to be a good thing at first… But when the content requires high user engagement—as is the case with shopping—things can quickly turn sour.

In this particular case, users are actively searching for something of interest. Attempting to find the perfect product out of a sea of choices. So when the user is flooded with an seemingly infinite amount of choices, they give up and seek other avenues to find what they’re looking for.


Best practices for infinite scrolling

As with any design pattern, there are best practices that are usually good to follow. These aren’t the laws of using the pattern; rather they are what the majority of successful implementations do.

  • Have a graceful fallback: Ensure that users without JavaScript aren’t left out in the cold. Design for old fashioned pagination first, and then use JavaScript to hide it and implement infinite scrolling.
  • Give a visual indication of loading more content: Providing users with a loading animation informs them of what’s going on. Without it, the page will seem to have hit a dead end on slow connections.
  • Keep back button functionality: Although many implementations forget this major detail, make sure to keep basic browser functionality. If a user browses away from your website and then travels back, they typically don’t expect to reload back at the top of the page.
  • Keep navigation visible: While users will primarily want to consume your content, they’ll also want to browse to other areas of your website as well. If they’re forced to manually scroll back up through hundreds of posts… They may opt to leave instead.
  • Lazyload content ahead of the user: The whole point of implementing infinite scrolling is to have it seem like an endless stream of content. While it’s important to have some form of a loading indicator, users will hopefully rarely, if ever, see it.
  • Links should open in a new window: This is a highly debated practice; it forcefully chooses for the user, but with the intention of helping them. Forcing links to open in a new window or tab prevents users from accidentally navigating away from the infinitely loading list and losing their place.
  • Footers may get in the way: Often times implementing an infinite scrolling solution means giving up the option for a website footer. While it’s definitely annoying to try and “catch” a footer when you’re automatically loading more posts, there are other options. For example, using a hybrid loading solution would allow you to keep a footer well within users’ reach.


In conclusion

While infinite scrolling can be a trendy feature that gives the user endless content options… It has to be used correctly.

While we want to expose the users to more content, we don’t want to detract from the value of each individual piece or have them feeling overwhelmed with information. After all, users are there for the content itself—not the fancy scrolling feature.

As you can see, Infinite scrolling itself isn’t inherently good or bad. But rather, its use could result in better or worse user engagement depending upon the content type being presented. With that in mind, we can attempt to predict where implementing it will be beneficial.

Featured image/thumbnail, escalator image via Shutterstock.

  • designcouch

    Good points all around. I have to admit that I’m not a fan of infinite scrolling in general, as it is most often done very poorly. Sites that attempt it hit one or two of your points, but never even close to all of them. You hit a massive pet peeve of mine too: chasing the footer. I’ve seen it so often that it is almost a joke – and if I end up doing it, I’ll more often than not leave the offending site immediately, never to return.

    • Dustin Cartwright

      Thanks! I completely agree with having to chase down a footer. It’s even more insulting that the sites doing it usually have a sidebar that could hold the footer links perfectly fine. While some websites use infinite scrolling in a trendy feature manner… Some websites (Facebook, Tumblr, Twitter) wouldn’t be what they are today without the feature. It’s a running joke that once you start browsing on Tumblr, you don’t realize you’ve looked through 500+ pages until you notice the sun coming up haha.

  • Dustin Cartwright

    That’s certainly possible. You would just return them to an anchor link. There are likely a more easy and user friendly solution, but off the top of my head you would use JS to link them to the ancor location, and then to the actual link location. This way, when the user hits the back button once, it loads them back at the anchor location instead of the top of the page. Many desktop browsers do this automatically though I believe.

    Having links open in a new window is a 50/50 practice. Some hate it, others loves it. For websites like Facebook or Tumblr, where the timeline/dashboard can grow to be thousands of posts long… It’s generally considered annoying to click a link and have it navigate you away in the same window ha.

  • Ralph Echter

    HTML5 history object could be a solution to solve this. Each item in the list could get its own URL or unique identifier upon scrolling. In theory it’s possible, now the implementation… anyone? :)

  • Rick Calder

    Most people that implement infinite scrolling do it because it’s a fad, and personally it’s one I really don’t like in most cases. They give no thought at all to the performance on slower computers or computers with less memory because most people are developing on very powerful machines, completely forgetting that the rest of the world isn’t viewing their site like that.

    I make a challenge to anyone that loves infinite scrolling. Find yourself a couple of year old machine, load your Facebook account and try and scroll back a few days. Watch what starts to happen, watch the scrolling start to lag, the pages not respond well. There is no way to see that content but to scroll for it, so if you go camping for a long weekend and you’re not running a newer computer, good luck catching up.

    Typical though, why would anyone care about users with lesser computers, lesser bandwidth, slower connections. Viva la crappy trends!!!

    • Dustin Cartwright

      You bring up a fantastic point that many people tend to overlook. Netbooks and cellphones are actually great for personal testing of these solutions. They both have very limited CPU power due to battery conservation, and usually low amounts of RAM as well. There are also optimization techniques to speed up infinite scrolling implementations as well… You could unload passed content (being sure to keep it’s height) to ease load on the browser DOM. The more control we give users over how they consume their content, the more successful an implementation should be I think.

      There is also something to be said about it being both a fad and a legitimate solution to a problem. Social networks have the most to benefit from having an endless stream of content. Could you imagine using Twitter or Facebook with ten or twenty posts per page, and having to click “next” dozens of times? Aside from those though, it’s a unique situation that requires a one-on-one approach, which many people ignore like you said. I recently had to decide if it would be beneficial to implement infinite scrolling on one of my own websites. When it comes down to it, breaking down the content like mentioned above is very helpful. But in the end, it’s always up to the users and the designers/developers. (:

      • Rick Calder

        Good points! As with most web development all these things are down to use case, I think the issue is when people start doing these things without thinking through why.

        You’re obviously correct, while FB or Twitter would be tedious to constantly have to click next, there are many cases where it’s used that isn’t necessary.

        When helping answer questions for new developers and designers one of the things I ask them is “are you doing this because you need to or just because you can?” It’s a question I feel is vital to good web development. If the only reason you’re doing something is because it’s possible, it may not be a practical choice.

  • Harish

    nice !