SALES / SUPPORT : 844-261-1206 (Mon-Fri, 09:00-17:00 EST)

Infinite Scrolling: When And When Not To Use It

By Eva Barnes , Jan 3 2017
Infinite Scrolling

Featured Image: iStock/enjoynz

Infinite scrolling or endless scrolling is a web design technique that lets visitors scroll through a large amount of content without any stopping point in sight. The way is works is it simply refreshes the page once you reach the end, giving the illusion of infinite scrolling. Traditionally, websites used the pagination method to break apart large chunks of content, but recently the web broke away from this and embraced infinite scrolling. This technique has gained a lot of popularity over the years, especially since the rise of mobile-first design. What designers and users like about infinite scrolling is the freedom of interactivity. The most notable websites that use this technique include Facebook, Twitter, Google Image, Flickr, and Tumblr. Highly interactive websites are taking the web by storm and infinite scrolling seems to be popping up everywhere. Websites focused on discovery allow the user to scroll through a hug list without any interruptions, which ensures a smooth user experience. It is tempting to implement infinite scrolling on all your websites; however, there are major cons that need to be considered.

infinite loop
Image Source

In this post, we look at what infinite scrolling can accomplish, its pros and cons, and learn best practices for implementation.

Pros Of Infinite Scrolling

  • It is the ideal interface for smartphones and devices with less screen real estate
  • It focuses the user’s attention squarely on the content so bounce rate and average time on page increases
  • Displaying vast amounts of data and items is easier and more convenient
  • It allows the website to display new content as it goes live in real time
  • Your page load speed is not significantly affected by infinite scrolling
  • Infinite scrolling, when done properly, makes for an incredibly seamless and smooth browsing experience.

Cons Of Infinite Scrolling

  • Infinite scrolling means finding a specific item is tougher and the user feels a bit lost.
  • A way to filter the data must be included in order to enhance usability and discoverability
  • Another issue of concerns with infinite scrolling is the footer conundrum. Should you put a sticky footer or eliminate it altogether? Designers don’t have a definite opinion this.
  • Users are less likely to focus on making concrete decisions and simply view the glittery content, this drives down conversion rates
  • Users will have trouble skipping over sections of content
  • Infinite scrolling relies heavily on JavaScript, this makes it less future-proof than expert designers would prefer

Should You Use Infinite Scrolling?

The answer matters on what kind of website you are designing. If your website mostly has visual content, go ahead and use infinite scrolling. Images are easier to scan and process, therefore the users won’t have any trouble. Another factor you need to think about is whether the user is looking for something specific, for example if an online store implements infinite scrolling; the click-through rate would drop due to users being too distracted. If your website content is primarily user-generated and website is optimized to drive conversions, infinite scrolling will be suitable. The bottom line is the context of the content matters when making web design decisions.

Must-Follow Rules For Implementing Infinite Scrolling

Have you decided to use infinite scrolling for your blog, website, or ecommerce store? It might look simple, but the implementation details can be a bit tricky. Follow these rules and best practices to ensure you get all the tiny details right.

  • Place the most important content at the top to give your visitors immediate access to relevant data.
  • To avoid making the user feel lost or out of control, place a progress indicator (scroll bar or similar), a map or menu that shows how far along the user has scrolled.
  • If you are using filters, implement a sticky header to let the user remain oriented while scrolling
  • Keep your users better oriented by placing some sort of landmarks that help differentiate amongst viewed content.
  • Infinite Scrolling
    Image Source

  • Try a combination of infinite scrolling and traditional paginated views. You can do this with a ‘Load More’ button or display page numbers as shown in the example below. You can even combine infinite scrolling and pagination with the right mix of HTML, CSS and JavaScript. Check out the following example from CodePen:
  • Keep the content interesting so that the user doesn’t feel like their efforts were futile
  • Add a fixed footer as the content scrolls through to give a sense of structure.
  • Add animated effects such as sliding menus, popups etc. only if they are necessary
  • Don’t assume that everyone will have JavaScript enabled, implement regular pagination first, and then implement infinite scrolling.
  • Provide a visual indicator that lets your user know that content is being loaded, otherwise they will think they have reached the end, assume your website is slow, and leave.
  • Web Page speed
    Image Source

  • Keep the back button functionality active, no user wants to start over from the top and repeat the scrolling effort.
  • Keep top-level navigation visible at all times, if your menu is too unwieldy, use a compressed version.
  • Force links to open in a new browser tab in order to maintain the infinite scrolled content

Great Examples Of Infinite Scrolling

1. Woodwork

Woodwork
Image Source

2. Rule Of Three

Rule Of Three
Image Source

3. Shamballa Jewels

Shamballa Jewels
Image Source

4. DistanceToMars

DistanceToMars
Image Source

5. Deviantart

Deviantart
Image Source

6. Krystalrae

Krystalrae
Image Source

7. Why Interactive

Why Interactive
Image Source

Conclusion

Infinite scrolling works best for websites that are highly focused on user-generated content, such as Facebook, Tumblr, Twitter, etc. Visual-heavy websites can also take advantage of this technique. However, the traditional technique of pagination is better if the goal is to provide functionality to the end user.

About The Author

Eva is a marketing major with a keen interest in web design. She is also an explorer and loves to dig into web trends from mobile apps to visual communication and everything in between. Feel free to send her your web design queries or blog related feedback in the comments below.

Leave a Reply