You’ve all seen the pages. The endless pages. As you scroll down, the page keeps growing and growing and growing longer and longer; forever. Or at least until you run out of products or the user either finds what they want or becomes bored. We see this becoming more common on Home Pages for a handful of intro pages, but most especially on product listing pages whether they’re in grid or list view.

Why? And is this always a good thing?

The why seems fairly clear. Over time we’ve learned from usability, (both user observations and analytics), that users are OK with scrolling. Sure, the old thoughts still apply regarding having critical initial content “above the fold,” but for certain content types it seems perfectly appropriate to scroll along. (Just for the quick history lesson: “above the fold” originally came from the idea of folding newspapers to read what’s most important at the moment. For web pages or mobile, it’s more simply what a user would see first in the initial top of the viewport without scrolling.)

This method has obviously become a common design pattern. As of this writing, this little web site itself uses similar methods on the Home Page. And with Angular.js seemingly the code flavor of the year, scrolling has become even more common in the other case; which is most often for long lists of things, especially products.

So? Is this always a good thing?

Mostly yes. With a handful of caveats. The infinite scroll method likely became more commonplace thanks to Twitter, Facebook, Pintrest and perhaps a few others. As users became more attuned to simply scrolling down, it has become a common user gesture not requiring much explanation. As well, hardware devices from mice, to trackpads, to touchscreens and mobile screens using swipe gestures have all come together at the same time to make this a useful user experience pattern.

User Experience Issues

•  KYC = Know Your Customer: Do you have a true purpose for doing what you’re doing or are you just going along with the latest design craze? Only you can answer that.
• Pro: Great for Touch: On any kind of touch screen device, (and probably for voice activated devices), simple scrolling is a super easy way to get through content. A swipe gesture, a verbal “down” command, maybe one day even an eye movement, quickly allows for movement through content.
• Pro: Tons of info easily accessed quickly. People can generally read fairly fast. And they skim even faster. Infinite scroll lets you put a whole lot in front of users very fast.
• Possible Negative: Loss of Critical Company Info: Does trust matter a lot for your site? It usually does for eCommerce. Only a fraction of users may go to About Us pages. However for lesser known commerce sites, users may check About Us sections to determine just how real you are. I’ve seen a lot of web sites that use infinite scroll that end up hardly ever being able to get to a footer. In other words, unless the site also has a top navigation link to About Us or Contact, it’s hard for a user to even find more information about the company. Maybe a user WANTS to buy from you, but they can’t even easily find out a) where you are, b) your shipping and return policies, c) whatever else they may care about. So make sure if you use the infinite scroll, (especially on landing pages that could be a user’s first experience with you), that you offer alternative navigation to About Us or other sections.
• Negative: Loss of bookmarks / back buttons. While this straddles the technical, use of infinite scroll methods, (depending on how implemented), risks loss of some basic browser navigation functions.
• Negative: Potential for being lost and overwhelmed. In a paging system, users will usually get a solid sense of place. (“I’m on page five of thirty. I may be annoyed by having to click-click-click, but I know where I am.”) With scroll, I can get lost pretty quickly. And will bookmarks work? Maybe. Maybe not well.
• Negative: It just might not be at all right for your content type or user base. Your call. Question. Decide. Test. Test. Test.

So as is often the case, we get back to the same place… whether the UX pattern is good or bad depends on what you’re trying to do. And your users. You had best test, just like anything else. Etsy’s Dan McKinley has a nice video and slide deck on how an implementation of infinite scroll didn’t work for them. And perhaps even more interesting is Dan Nguyen’s discussion of the UX failure on Etsy. (Side note: Very impressed with McKinley’s boldness in honestly discussing Etsy’s experience with this experiment.) Is infinite scrolling right for you? Consider some of the criteria as laid out by the Nielsen Norman Group.

Technical Issues

• SEO. Search Engine Optimization may suffer with infinite scroll. While there are of course multiple search engines out there and their robotic crawlers will catch up with technology, most are properly concerned first and foremost with the Great and All Powerful Oz Google. Google might not always see all the information on an infinite scroll page or know how to link to it. Folks using Angular.js often use infinite scroll and run into this issue. Which is of course a great irony given that Angular came out of Google. There are methods you can use including Google’s recommendations to make Ajax pages crawlable. But the point is, you’d better use them, (along with sitemaps), otherwise your pretty UI / UX may not get indexed. And therefore not found where it otherwise might have been. And thus, all your pretty features / functions won’t hardly matter.
• Shebang: The exclamation point character ! is also referred to technically as a ‘bang’ going back to old typesetting days. The sha or she comes from… well, I’m not sure; you can read about it here. In any case, when using things like escaped fragments in Angular, there can be a variety of unintended consequences from messing up browswer history to others. Here’s a good writeup on such issues and some potential solutions. The point? Use whatever you like, but make sure you’re aware of consequences and if needed make sure you deal with any fallout.
• AngularJS: It just needs more consideration since so many seem to be moving to this framework. Consider:
  •  The Basics of JavaScript Framework SEO in AngularJS
• Analytics: Whether using Google or something else, once upon a time, life was easy. Click. Pageview. Let’s count that. With Ajax, just what is a page becomes a question, but you can decide that for yourself and throw Virtual Pageviews or Events as you see fit. With infinite scroll, you have to implement something such that you have a clue as to what users are doing. Chances are you’re going to use Virtual Pageviews. Which is fine. But the bottom line is you better do something otherwise you won’t know what’s happening. There are plug-ins and jQuery libraries to help you manage such things. You had best have this as a line item in your feature backlog. Virtual Pageviews alone might not cut it though. What’s your funnel towards desired goals look like? It’s possible you’ll want to develop a schema for page or content types and throw that meta info to analytics along with the page view. This way you can build custom reports and funnels to see if this technique is helping or hurting goals. (Which matters a lot more than whether or not anyone thinks it’s pretty.)

Bottom Line

Infinite scroll is potentially a wonderful user experience. Just not for every content type or every user cohort. Sensible thought should be put into whether it’s appropriate for your application and then you must test. One challenge here, (as indicated in the Etsy case), is that it can be potentially expensive to test this. You have to be ready for that cost and perhaps most importantly, make sure whatever you do is properly instrumented for analytics such that you can understand any impact. And be emotionally ready to deal with the consequences if things don’t work out. This is easier if you had a solid plan, accounted for the gotcha’s and included analytics.