How to use the infinite scrolling trend, the right way

Default avatar.
April 22, 2014
How to use the infinite scrolling trend, the <i>right</i> way.

thumbnailInfinite 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.

medium

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.

twitter

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.

tumblr

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.

Read Next

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…