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.

Dustin Cartwright

Dustin Cartwright is a UI/Web Designer & Front-End Developer from Baltimore, Maryland. He spends the majority of his time focusing on user experience research and is passionate about building things for the web.