Hacker News new | past | comments | ask | show | jobs | submit login
Stop Infinite Scrolling (hackernoon.com)
362 points by kiyanwang on Sept 11, 2019 | hide | past | favorite | 200 comments



The article puts forth 10 reasons to think twice before implementing infinite scrolling, but many of them are just a variation of the final reason: Terrible user experience.

For the sake of argument, there are several very successful websites that use infinite scrolling in one way or another. Facebook, Instagram, Twitter, Reddit just to name a few. Is infinite scrolling on these sites disorienting the user? hard to navigate? rendering a "terrible user experience"? One could certainly argue that the data says otherwise.

The article doesn't even suggest that there might be situations where infinite scrolling might befit the site. I'm not a big fan of infinite scroll but black-and-white rants like this often leave out the vital context and nuances in the topic they aim to analyze.


Facebook's is compounded by the mysterious newsfeed algorithm - if you're infinite scrolling a limited set of items in chronological order it wouldn't be as bad. But I've seen things in my newsfeed and then not been able to find them again if I accidentally closed or reloaded my tab.

If you noted who posted/shared it you can find it on their profile, but if all you noticed was the headline or image on a shared item it might as well be gone forever once you lose your place in the feed.

I wouldn't say that's the main reason I don't check my Facebook feed anymore, but it's one of them.


Yep facebooks algorithm could be totally superceded by "I would like to see .... [ ] only friends [ ] mostly friends, some lists [ ] random [ ] don't care, use your AI/algorithm choose one of the above.


infinite scrolling of a limited set of items wouldn't be very true to the name ;-)

I agree with the problem of finding something again in a long, cryptically ordered list of several hundreds or thousands of items. Not sure a paginated facebook feed would solve that issue though


I mean limited in terms of quantity posted per day; my understanding of Facebook's system is that across all of my friends (or maybe even friends of friends?) there's a lot of stuff posted, and Facebook only picks a subset of to actually show me. I don't know how they decide which things appear in my newsfeed and I don't know what order they're in.

Compared to Instagram where I see every single thing that someone I follow posts (might be because I follow so few people on it). If I want to go back and see one of the posts again, I scroll back in time and eventually find it.

For losing posts on Facebook I’m not talking about trying to find something from a month ago, I’m talking about things that I swear I saw yesterday and now I can’t find it.


I often loose things I saw a minute ago by a misclick on a group page or something like that, and when I come back to the feed it’s just gone.

Like, I follow some newspapers on fb, an often they only show up once per day, reload the feed and it’s vanished.


> infinite scrolling of a limited set of items wouldn't be very true to the name ;-)

This is actually what facebook does when you're offline. When it runs out of content to show, it cycles round and shows you the same content again.


The infinite scroll is one of the reasons those websites are so addictive. My lizard brain has a hard time closing the tab when I "haven't reached the end of the page yet."

So it may be 'good' for keeping people on the site. But in the grand scheme of things I'd rather the page had a bottom.


This. These sites don't use infinite scrolling because it is a great user experience they do it to keep people on their site. They do it to keep people engaged. The addiction. Most of those sites would actually be better with pages in terms of user experience, but that isn't the experience they are going for.


I think Instagram does a fairly good job of trying to have both. When you've scrolled through all the new posts, you get a green "You're all caught up" break point. You can continue scrolling past it if you want.


Infinite scrolling in Facebook, Instagram, Twitter, and Reddit doesn't exist to improve the user experience, but to make these sites addictive. Different priorities here.


Yea, I dislike infinite scrolling because I'm a user, but these sites love infinite scrolling because there is no barrier to continuing to browse, in ye olden days there would be a load time when clicking onto the next page - in the modern world performance is likely not a concern or the next page is already loaded and just swapped out in the current view - but it is still disorienting to the user as that action will usually shift their view.

Interestingly the approach I think works the best (except for the poor input experience on anything that isn't a touch screen) is infinite horizontal scrolling since the footer and header elements remain expectedly stable while not overlapping any information the user wants to view... horizontal scrolling is very poorly supported by input devices and using the scroll wheel to move left/right makes the user think too much.


> in ye olden days there would be a load time when clicking onto the next page - in the modern world performance is likely not a concern or the next page is already loaded and just swapped out in the current view - but it is still disorienting to the user as that action will usually shift their view.

Oh, but there is a visible load time still. Unless you're browsing on a supercomputer with infinite RAM, after a minute or two of scrolling Facebook you'll realize the performance drops fast with the amount of feed you've loaded, while the load times increase. In my experience, both the page slowdown and load delays are about O(n) with respect to the side of the feed, but I haven't measured it precisely.


> Infinite scrolling in Facebook, Instagram, Twitter, and Reddit doesn't exist to improve the user experience

In the case of reddit, infinite scrolling is one of the most common reasons I hear used to explain why other users opted out of Reddit's new UI.


yup, infinite scrolling = infinite ad impressions

the problem is people who cargo-cult Facebook and use infinite scrolling in their business apps which don't have ads


Facebook's feed is horrible. People are lost all the time with it, and it's a huge impediment for the site to be used for anything remotely serious. Ditto for Instagram, but expectations here are more aligned with nothing serious ever getting on the site.

Twitter would be better without infinite scrolling, but nobody ever cares about messages down the line, so it's not that bad. I have never noticed that Reddit does it. Is it on the new design only? This may be one of the reasons people do not use the new design.


I'm not certain if the new design does it. The old one certainly doesn't, but RES[1] adds the functionality, and has a large user base. I often mix up native features and what RES has added

[1] https://redditenhancementsuite.com/


Well there are some arguments to be made that Facebook, Instagram, and Twitter are terrible for their users. I am going to assume you are familiar with these arguments because you are on this site. Perhaps infinite scrolling contributes to whatever is so powerfully bad about these sites for their users, if indeed those arguments are correct.

Which I have a strong suspicion they are.


> many of them are just a variation of the final reason: Terrible user experience.

If we're playing Architecture Astronaut, that's true of every possible issue. Compiler crash? Security hole? Deleted all user data? All merely variations of "terrible user experience".

> several very successful websites that use infinite scrolling in one way or another. Facebook, Instagram, Twitter, Reddit just to name a few.

Yes, all sites which first took several years to build up a massive user base and benefit greatly from network effects. Most websites are not Facebook. 20 years ago, it was "But Microsoft does it!" -- and the response was "But you're not Microsoft."

I'd love to find out how many people use "old.reddit.com" specifically to avoid infinite scrolling.

> Is infinite scrolling on these sites disorienting the user? hard to navigate? rendering a "terrible user experience"? One could certainly argue that the data says otherwise.

What data, exactly? Yes, I do think it's disorienting, hard, and terrible, and I hear similar complaints all the time. If I had a nickel for every time I clicked something by mistake in Facebook, or clicked "back" and wasn't taken back to what I was looking at before, I'd have ... a big ol' jar of nickels, anyway.

> The article doesn't even suggest that there might be situations where infinite scrolling might befit the site.

You're right. These are 10 reasons it's bad for users. There's one obvious one that benefits the site: because there's no obvious stopping point, it's great for sites that want to be addictive. People eat more if they have a infinite bowl [1], too. If there's any user benefit to infinite scrolling, I have not heard it.

[1]: https://www.ncbi.nlm.nih.gov/pubmed/15761167


>For the sake of argument, there are several very successful websites that use infinite scrolling in one way or another. Facebook, Instagram, Twitter, Reddit just to name a few.

Comcast is a very successful company. Do they have a great user experience?


Sorry, not a US citizen here so no experience of Comcast, although I've heard they're not very popular in that regard.

What I meant was that some of the worlds most popular sites employ "infinite" scrolling, and it kind of makes sense on those sites.

If they have a great user experience? That's highly subjective. I guess they had a lot better user experience than their failed competitors.


>I guess they had a lot better user experience than their failed competitors.

That's like the logic that Microsoft Windows must be great just because it's the most-used operating system. You're completely ignoring all the other factors that are involved in a company or product getting to a dominant position.


I’d say that Facebook’s feed is very difficult to use, and often finding an item that you were looking at earlier in a session can often be very difficult, if not impossible.


My issue is that infinite scrolling, especially on media rich websites, leads to a massive increase in RAM usage for no real increase in functionality.


Infinite scrolling depends on Javascript. NoScript prevents it.

FaceTwitGram may depend on IS; I don't know, I've never used a FaceTwitGram account. Reddit seems to work fine without Javascript.

If I'm forced to enable Javascript for some specific site, I enable it for that site, then (if that's not enough) for it's companion sites, CDN and so on. By this time the site has already caused me resentment.

If that's not enough, then usually I've already gone somewhere else.

Way too many sites will give you a blank screen just because JS is disabled. But if you insist that I totally drop my pants and enable ALL scripts, you really have to have a compelling reason (e.g. buy product unavailable elsewhere, um err can't think of any other compelling reason; luckily neither my bank nor the taxman mandate 3rd-party scripts).

Some UI gimmick such as infinite scrolling is certainly not a compelling reason.

The purpose of infinite scrolling is to retain the eyeballs of mobile users - to stop them navigating away from your site. I am old, my eyes are dim, and my fingers are shaky; I use my mobile phone primarily as a phone, and never as a browser. Younger folk may have a different experience.


I find noscript way to aggressive. I think ublock has a much nicer compromise version.


Each to his own. I guess I'm just an aggressive dude:-)


There's a difference between good user experience and addictive user experience, and it's not always good.


eg, flickr.

infinite scroll limits the amount of data downloaded over mobile, without forcing you to "click" to next page.

it used to be absurdly user hostile but now it's limited to 2 loads before it stops and you are presented with a page index.

it's a great compromise with a great underlying UX reason.


That sounds more like lazy loading than infinite scroll.


Reddit has infinite scroll? I still see Back/Next - and three prompts to install their App


There's a plug-in called RedditEnhancementSuite (RES) that adds infinite scrolling with the URL bar being modified. RES has a pretty large userbase and it's well done so OP probably uses it and just forgot what's base Reddit and what's RES.

The new redesign also adds infinite scrolling.


The app boasts infinite scroll as a “feature”


Just because successful websites do it doesn't mean it's a good user experience.


> leave out the vital context and nuances in the topic they aim to analyze

Seems about par for the course for a Hacker Noon post. They're not meant to be read, they're meant to pad the career of the author.


My favorite example I discovered recently is the Coinbase prices page. You can’t get to the links in the footer (or their big “enter your email to learn more” CTA which I’m sure their marketing team works hard on) because it keeps loading new pages when you scroll to the bottom of the page. Presumably they will eventually run out of pages and you’ll be able to see the footer.

https://www.coinbase.com/price


I've come across dozens examples of this issue. It's absurd these features make it into production.


It stops at 1972. I thank my flywheel scroll button for that.


other issues aside, isn't not being able to reach the footer on infinite scrolling pages solved with a sticky footer?

it can even be sticky at 2X or 3X the screen hieght so that it doesn't get in the way of the freshest/most important content near the top of the (very long) page.


theoretically yes. effectively anyway.

in practice, I don't think I've ever seen a sticky footer that didn't flake out somewhere. it's always broken weird screen sizes, or mobile, or one browser, or after a browser update. or it hides content because someone forgot to add padding. or it jumps around because they're using absolute position for some insane reason.


Out of curiousity, I did persist and scroll all the way to the buttom. It took a few minutes - 1972 separate cryptocurrencies can appear in that table


Haha. I think it's one reason why I have No Script installed on my browser -- To protect me against poorly designed websites (to a degree at least).

Infinite Scrolling is not bad, but you have to design the page for it instead of jamming the feature in later. Otherwise, it hurts.


That's absurd! Everyone knows you're supposed to open up Developer Tools, then throttle network to 2G and then scroll, if you want to see the footer.

I thought this was common knowledge, guys. /s


A tax on fast internet, lol. I have no problem getting to the footer links on first scroll. I then get around five seconds to study the links before it disappears and I have to scroll for another five second view.


What happens if you turn off Javascript for this website in the browser, or use a client that does not interpret Javascript?


Initiate scroll can’t work without javascript enabled....


Not to mention one misclick that brings you to a different page will instantly make you lose all scrolling "progress", on some fast-paced websites without a chance to find the original position again.


Even in some case scrolling back to the top makes you lose the progress. And that happens automatically when you do a Ctr-F and start typing, the matching of the first character you type will likely be at the top of the page.


Even worse is how infinite scrolling breaks Ctrl-F searching. Most websites no longer render the offscreen content to improve performance, so the content you scrolled past (and the content you haven't gotten to yet) is no longer there for searching.


> Most websites no longer render the offscreen content to improve performance

Which may now be obsolete. Over the last year firefox has implemented some amazing flexbox layout computation improvements that make appending to a flexbox with many elements (>5k) stay fast. It only re-computes the changed ones.

Of course you need to do some profiling to check that you don't accidentally deviate from the happy path by introducing changes that touch all elements.


That's probably just a poor implementation on those websites. I thought the ability to search across larger content using Ctrl-F is one of the major advantages of infinite scrolling over traditional pagination.


> Most websites no longer render the offscreen content to improve performance

I noticed when trying to screenshot a Twitter thread in Firefox that twitter does this, on the mobile site at least.


You can still implement this by updating the URL dynamically as you pass the (invisible) page delimiter. I’ve seen infinite scrolling news sites implement this.


Yup. And you can implement something that loads all the content up until that point when the user presses F5 in the middle of the page. And you can implement smooth scrolling that takes into account your sticky header. And you can make your pagination based on the ID of the last seen page item instead of based on count.

The question is, is this the best use of your time? Are you willing to invest more time in it when you give it to the user? Because the user will do something you haven't thought of, they will break it, and you will need to fix it.


You can, but that means if a user scrolls through a page and decides to share it by copying the URL they'll get a link to the page they've just scrolled in to rather than the one they've just read which is very likely to be wrong. It's something that makes me much less likely to share links.


To be fair, this only happens due to programming bugs on the website. You can easily store the scroll position in the HTML5 pushstate API. The big websites like Twitter and Facebook get this right.


Famously, imgur gets it wrong. After 10 images you can click "load more images" to see the rest of the album, but when you return to the album you have to click it again.


Imgur does lots of things wrong, it's really really horrible to use, especially on mobile.

Although to be "fair", that's probably largely intentional crippling of the site to push users towards their app.


I just tried Twitter on my iPhone and it fails as described if I manually put in a new URL and then go back from there. Google gets it wrong in their search results. When it’s that common to have this bug I’d say it’s fair to just consider it to be part of the technique.


Facebook does not get this right. I end up in a random place with content I haven’t seen is the back button all the time. It’s one of the things I hate most about the UI.


What about techcrunch, where if you scroll all the way down in an article it automatically re-directs to the main page.

This is so annoying to me that I have JavaScript and cookies disabled for techcrunch just to circumvent this nonsensical behaviour.


That's just as heinous as those news sites which load the next article when you scroll to the bottom of the current article. It appears to sometimes be part of the article you're reading and then your on another page trying to figure out what the hell happened. I really don't know how these so-called designers get paid to confuse their readers and customers.


Related bonus: On many sites, if you try to print the article you've just read to the bottom, you can't print that article, you can only print the next article, and even scrolling back to the top won't fix it.


oh my god yes! I've ran into this same problem and thought i was going crazy. cant remember if i was printing or just saving the articles to somewhere, but i kept getting a completely unrelated article.

how does someone mess up their website that badly? i dont even know how something like that is possible


They get paid because the bounce rate they’re being evaluated on at performance review time goes way down.


The designers get paid to increase ad views and “engagement” and are doing their jobs well.


My "favorite" infinite scrolling fail is when there is a footer on the site, and it keeps being pushed down by the infinite loading of new data, such that you can't reach any of the links the footer contains (like, you know, "About" or things like that).


Was wondering that and then told myself, come on, nobody would be that evil, the whole idea is nonsense. And you're suggesting there are websites out there that actually do that?


Google (image search) and Facebook (news feed) have both done this. Last time it came up I was able to find a screen shot of one of them but not the other, let me see if I can dig that up.

I don't think they did it deliberately, but I'd bet someone said "We could increase engagement if people didn't have to click anything to keep seeing more content" and nobody bothered to think about other design consequences of automatically expanding the content downward forever.

EDIT: A screenshot of Facebook's in mid-2013 is shown here under the "Unreachable" header https://www.smashingmagazine.com/2013/05/infinite-scrolling-...

Or straight to the image: https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42...


I have seen this multiple times. It's almost certainly out of ignorance, and not intentional. Just someone trying to implement a slick UI without really thinking it through.


Not evil, but stupid.



Old Navy does this. There's a limit; 3 or so "loads" finally gets you to the footer.

https://oldnavy.gap.com/


Plenty. Most likely because they first have a footer, then someone says "MUST IMPLEMENT INFINITE SCROLLING", and then you get that.


Came here to say just this! It's even better when you actually might want to click on something on the footer.


Bonus points if you go on to click on the footer, the infinite scroll kicks in, and your mouse cursor ends up on a link in the newly loaded text, which you end up clicking on. (Or video content, or whatever ends up doing something because you clicked)


And then you click to go back and it doesn't resume where you were before, and instead dumps you right back up at the top, with none of the previously loaded content available.


Or in the case of Facebook, a new top, one that intentionally excludes whatever you were looking at before (because "it has been read" - even though you got no more than a glimpse in frustrated passing).


... then you get ads served based on that.


Yes. FTA, "Website visitors have been taught that a footer is placed at the bottom with information such as contact, about us, privacy policy and so on."


Bonus points when that info actually still lives there but is now rendered inaccessible, violating the actual laws their presence is intended to comply with.

E.g. in Germany the impressum (often also called "imprint" in English versions of German websites; a mandatory page listing the physical address, contact information, registration numbers and other legal information, typically linked in the footer) must be easy to find and accessible with no more than two clicks (though this seems to be more of a heuristic than a strict legal definition).


None of the sites that I use that have infinite scroll have a footer worth mentioning. Can you point out a site? That seems more like just bad coding than a problem with infinite scroll.


https://www.indiehackers.com/

They have useful info in the footer. But it's impossible to get to the footer.


To overcome this problem and reach the footer, I usually search for About page.


You can also try Command (or Alt on windows) + bottom arrow, this would take you to the footer on a lot of websites.


Yep, then you have to view the source and find the links from there


And that gets frustrated when, even though it's static content, it's dynamically loaded.


I've seen this argument more and more lately, and it's starting to bother me because some places work great with infinite scrolling (twitter, serial comic strip viewers).

This article offers a small disclaimer at the end, but otherwise says things are impossible, when they simply aren't. #1 is easily solved by removing offscreen content once it's been scrolled past, and autoloading in both directions. Numbers 3-4, 8, and 9 (several of which are redundant complaints) are definitely the worst part of infinite scroll websites, but are pretty easily fixable with client-side routing.

The problem is people implement infinite scroll in terms of finite-scrolling documents, when there are a number of other dynamics to take into account. It's like saying "Don't make video games because you can't play them with a remote".


> some places work great with infinite scrolling (twitter, serial comic strip viewers).

I would contend that Twitter does not work great with infinite scrolling. In fact, I kept envisioning Twitter as I read the article. One of my biggest grievances with Twitter (shared with much of modern computing because multi-device computing doesn't have something like PAO [1], which would keep all my devices' views the same) is that I can't easily resume reading my Twitter stream between devices. I can't even easily navigate to "show me the stream at 11am today," which would be a viable workaround for multi-device views. If I want to find a last-read point, I just need to sit with my finger on the page down key until I see something familiar.

Ultimately, my user experience with infinite scrolling is simple: I give up and stop bothering to try to be thorough in my consumption of Twitter content. I wonder if Twitter has the necessary metrics to realize that infinite scroll can hurt engagement. I doubt it.

[1] http://tiamat.tsotech.com/pao


I'd contend Twitter's problem isn't infinite scrolling, it's eschewing chronological sorting in favor of algorithmic. There is no objective order to most content on twitter, so deep linking to a place in the feed is impossible, whether you use pagination or infinite scroll. Which is why infinite scroll works - it solves the problem of defining what page 2 even is. Not defending algirithmic sorting of course.


>some places work great with infinite scrolling (twitter [...]

First time I've ever heard someone refer to infinite scrolling on Twitter as great. I can't tell you how many times I accidentally scrolled to the top of twitter because I accidentally tapped too high on my iPhone and it jumped to the top, losing my place, which was dozens of "pages" down. It's the reason I never use twitter for more than a couple of minutes.


If there are MULTIPLE views for a type of data, an infinite scroll consumer is a valid 'secondary' view.

In the case of Twitter I think I'd find it WAY more useful to have a view that breaks things down by month or week, with the old items gaining permanent addresses on such pages, and actions that break out of the infinite scroll re-directing to those permanent places.


Paging should be incorporated into web standards. Imagine your browser indicating "you are on page 2 of 8". Imagine having browser hotkeys for "next page", "previous page" and "jump to page".

The browser itself could even provide a non-broken, customisable, universal-across-all-sites implementation of infinite scrolling.


I remember from ~10-15 years ago, in the Opera browser there was a button to go foward even when you did not go backwards. It was pretty good at guessing what the next page was going to be (example.com/1.html > 2.html, 2005-08.jpg > 2005-09.jpg etc.)


The feature was called fast forwarding, and old Opera's successor Vivaldi still has it. For those unfamiliar with it, it also works with more complex pagination schemes than just incrementing the number at the end; e.g. Google or Bing searches.

I remember Opera also had (and Vivaldi has, I just found) an optional feature where continuing to press space after reaching the end of the page would trigger fast-forward and take you to the next page. Sort of an alternative way of infinite scrolling.


I have a “+1” bookmarklet with a similar goal. It’s not very smart, just finds the last number in a URL and increments it, but that’s usually good enough.


For anyone interested, I reproduced the bookmarklet in question:

    javascript:(function() {var num = null;var found = window.location.toString().match(/(\d+)(?!.*\d)/);if (found != null) {num = parseInt(found[0])+1};if (num != null) {window.location=(window.location.toString().replace(/(\d+)(?!.*\d)/,num))};})()
I'm not a Javascript person, so I'm not sure if there is a better way but it seems to work.


I think mine came from here many years ago: https://www.squarefree.com/bookmarklets/misc.html#increment

The "works in" browser icons gives some idea of the date on that. IE, Phoenix, Netscape 4, and Opera. Probably some of the oldest still-in-use javascript in the world :P

Ran it through prettier.io:

    javascript: (function() {
        var e, s;
        IB = 1;
        function isDigit(c) {
            return "0" <= c && c <= "9";
        }
        L = location.href;
        LL = L.length;
        for (e = LL - 1; e >= 0; --e)
            if (isDigit(L.charAt(e))) {
            for (s = e - 1; s >= 0; --s) if (!isDigit(L.charAt(s))) break;
            break;
            }
        ++s;
        if (e < 0) return;
        oldNum = L.substring(s, e + 1);
        newNum = "" + (parseInt(oldNum, 10) + IB);
        while (newNum.length < oldNum.length) newNum = "0" + newNum;
        location.href = L.substring(0, s) + newNum + L.slice(e + 1);
    })();


If viewing "private" information vulnerable to an enumeration attack, would this be considered hacking? See also weev.


That's how Zuckerberg built his app before Facebook.


If I'm not mistaken qutebrowser also has this feature.


Yup! It has various kinds of shortcuts for this kind of thing (increment/decrement number, find prev/next link, remove component from path).

If you're curious, the implementation is here: https://github.com/qutebrowser/qutebrowser/blob/master/quteb...


It is a common feature in vimperator-like browsers.


There are definitely sites (usually documentation) where I can press Alt-N to get to the next page and Alt-P to get to the previous one and I have no idea how that happens.


Probably done using rel="next", rel="prev", like this:

  <link rel="next" href="/page/2">
see https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types


Woah! I knew about rel="next" but I never thought it could do that


If you use vimium or similar browser extensions for mouse-free access, they have keybinding for paging. It's not perfect, but it's still better than nothing.


For the curious, Vimium looks for these by default: prev,previous,back,older,<,‹,←,«,≪,<< next,more,newer,>,›,→,»,≫,>>. I have been using it for a month now and it works surprisingly well.


The problem is that browser windows have different sizes, so pages will be of different size. Formatting a document to fit on a page size is not rocket-science but also not trivial to do nicely.


I mean "paging" in the web sense of the word, like when you're paging through search results. Not like a book.


Then implement it with elements rather than pages. Regardless of how many elements fit on a page, you could then get a reference to the page that begins at element 12345 in a given sort ordering, and come back and continue from there at any point or on some other device.


I’d add: if you do pagination, do large pages instead of a huge number of small pages. It’s easy to scroll quickly through a fixed size page, it’s a pain in the ass to have to click through pages.


More small pages means more opportunities to show ads. And in the case of search, a larger portion of the first page can be given to sponsored results. :-(

Somehow the web has evolved to a place where the poles of infinite scroll and excessively short pages are two of the great annoyances.


True, but I see that even in private control panels. So it's not all malice!


Right, there's also some cargo culting


Or if you can, make the pages the same size as the screen. Then you don't have to scroll and can just keep your pointer on the next button.


I once implemented infinite scroll that 1) didn't auto-scroll from the first page, you had to click to continue and then it would infinite scroll. This way, people could see the footer and didn't have auto-loading content unnecessarily and 2) the infinite scroll worked bi-directionally. 5 "pages" would be loaded at any given point, with the goal that the user would be on page 3, in the middle of the stack of pages. This way, memory was kept low, and we even implemented the History API so you could link to the pages by post ID.


I run a collection of websites that all use infinite scroll and serve ~90 million MAUs.

#1 Poor performance issues

We started doing off-screen clean up, but it's a similar pattern to any ListView like component. Setup and teardown. The browser is smart though. It's not any more work than the setup/teardown a typical SPA should be doing.

#2 Footer is drowned

Footers are useless. Put it in the menu.

#3 Difficult to implement analytics

No more difficult than triggering a SPA pageview. This is misleading.

#4 Navigation is muddled

This is the most valid argument. We solved by being clever about History.pushstate(), triggering when the next article title hits 50% of screen. Bookmarking works fine.

#5 Scrollbar is hard to use

Misleading. The web is mostly mobile. People generally use efficient scroll input devices, scroll wheels trackpads. Most browsers hide the scrollbar because of this. Scrolling many tens-of-thousands of pixels is NBD.

#6 It is hard to use

Misleading, not quantifiable.

#7 Disorients users

Misleading, not quantifiable.

#8 No skipping allowed

Easily solved. We built an in-between module to provide the user with the option to modify their infinite scroll path. If you pick something here we use that to make the rest of articles closer to your interests.

#9 No bookmarking

Solved with History.pushstate()

#10 Terrible user experience

Any UI pattern can be abused to be bad UX.

# Pagiantion UX is usually bad

To counter the arguments. Arguably pagination is more broken. Navigating pages. Generally they aren't bookmarkable unless you implement advanced cursor pagination.

# Content consumption flow

Data supports that users want to consume content with minimal interaction and engagement. If you provide a consistent scroll experience to get from one thing to another, and it's relevant enough, people will really stick around and consume it.

Bounces, time spent, and other KPIs for web-traffic engagement have all gone up as a result of using infinite scroll.

Perhaps we're an outlier and paid attention to the difficult to solve implementation nuances but I don't mind it on other sites.

The alternatives were footers full of information I'm not interested in and outbrain modules...


> This is the most valid argument. We solved by being clever about History.pushstate(), triggering when the next article title hits 50% of screen. Bookmarking works fine.

As a user this bothers me the most. If I have no intention of reading the next article but scroll to the end it then takes two clicks to leave the site via back button - sometimes more.

IF you wanted to do it right, only set history when the title of the next article is at the top of the viewport. 50% just isn't enough and likely just messing up your kpis.


I think your points are completely biased.

I'm going to rail against your attitude here, not you:

0. Appeal to authority.

1. Sounds like job security.

2. Footers are NOT useless. Menus are aggravating.

3. Analytics are 99% evil, 1% hot gas.

4. Stay out of my History.pushstate(). I don't need 50 things in my back stack just because your "page" couldn't fit on one screen.

5. Too many incorrect facts to address in one line.

6. It depends on what the definition of "is" is. No. Single cluttered pages are quantifiably easier to use than a dynamic page of unknown length. Is it ever going to stop?

7. It disorents me, and I'm a super-ultra-mega power user. Spinning a 3D model when the user scrolls down is downright unexpected behavior. It's a trick. A gimmick. A distraction. It's disorienting.

8. I don't want a choose-your-own-adventure. I want a damn single page with damn information on it.

9. I don't think that's a solution.

10. I don't care about "User Experience." I want "User Interface". "UX engineer" is just job title inflation for non-committal designers.


“Analytics are evil”? Seriously? How else do you propose understanding how people are interacting with your site? How can you A/B test improvements without analytics?


> Bounces, time spent, and other KPIs for web-traffic engagement have all gone up as a result of using infinite scroll

None of these measure actual value to the user. You could just be sucking up more of the user's time without adding any actual value.


> We started doing off-screen clean up,

Which makes it impossible to use Ctrl+F through a page.


One question. Does the back button work flawlessly? E.g. do I return to exactly the same place, immediately, without any stutter or reflow?

Because 100% of infinite scroll sites/apps that I have seen can't get this right.


> I run a collection of websites that all use infinite scroll and serve ~90 million MAUs.

Please tell me which ones so I can be sure not to visit them. Infinite scrolling is high on my list of things I hate about the web.


as often happens, the article focuses on technical aspects; technical arguments are easy to dismiss with more technical arguments.

The real problem with infinite scrolling is that it's temporarily addictive, and the only reason it exists is to maliciously keep you scrolling. I don't like that and I think infinite scrolling should not be used by (and is not adding anything useful to) benign services/products


> The web is mostly mobile.

That is a pretty broad statement. What threshold of "most" is high enough that you are willing to write off the non-mobile population?


Not supporting infinite scrolling, but it looks like more than half: https://www.statista.com/statistics/241462/global-mobile-pho...


For me, that page doesn't show any data, just a popup saying I need to become a member. I did find this link:

https://www.perficientdigital.com/insights/our-research/mobi...

It says in 2018, mobile was 58% and desktop 42%. Optimizing for the 58% is fine, but when it comes at the expense of the 42% it is harder to justify just handwaving it away.

More interestingly, the above page indicates that while there are a greater number of mobile visits, they don't stay as long and are twice as likely to "bounce", which I infer means leave the page before spending any significant time.

So by those metrics, although desktop users are fewer, they spend more total time. Again, ignoring their scrolling preferences to optimize for mobile seems questionable.


I'm guessing the person who posted this works at a US-based publishing group, in which case mobile traffic is likely ~75%.

Scrollbar hijacking is a valid objection but I do wonder how many users in that 25% it affects. I'm on a Mac and the freaking scrollbar disappears after less than a second of non-use. I think I've pretty much ignored it since Mac started doing this...


I'm guessing you work for a publisher like Condé Nast that pushed this pattern onto unsuspecting properties like Pitchfork? I am extremely annoyed every time I encounter one of these - it makes skimming articles impossible since you miss the end.


>I run a collection of websites that all use infinite scroll and serve ~90 million MAUs.

The point is whether those same ~90 million Monthly Active Users would be better served by more traditional page flipping or some other navigation mode.

I believe that it greatly depends on the specific site and its contents, but the original article sounds like good (and often "rare") common sense, if you have good reasons (and can actually provide a working, not annoying, solution) go "infinite scrolling" if you are not 100% sure stick to more traditional pages.


Care to share some examples of your sites?


that is mostly a complaint against poorly implemented infinite scrolling. there’s no reason why it would have the break urls, indexing, or the back button.


There's a lot of reasons why it would break all of those things. Hacking it so that the URL & history is rewritten when content is loaded is significant extra work.

I have no idea what you mean by indexing, given the word index doesn't feature in the article. You also ignore the problems of making the scrollbar useless & the footer unreachable. I don't see any fix for those issues at all.


You need to choose between having a footer and using infinite scroll. Can't do both.


The way we did it for a product search type website was to show a regular page first, with a "show more" button. After clicking that button, it would auto load the next page(s) on scroll. If all you wanted was the footer, you wouldn't ever experience the auto load.


By index they’re referring to SEO because google indexes pages. Scroll bar is useless? Add a tap to load more button, give the user control of when content loads and now the can scroll comfortably. Need a footer? You can have a sticky one.

These criticisms are all really bad


Not being used by social media, I don't come across infinite scrolling much. But where I do it's most annoying. Discourse: how dare you take over my ctrl-f keyboard shortcut.


That's a great example of the extra magic and complexity an infinitely scrolled view requires. As you scroll down a huge Discord thread, they are removing posts from the DOM for performance reasons.

You could use the browser's built-in search functionality by choosing Edit -> Find in This Page from your browser's toolbar, but in this case it would be pointless as the results would be inconsistent as most data you've come past is not present.

I'm curious how much worse the performance would be if they did not apply this specific optimization.

Here's a thread with 618 replies, for example: https://users.rust-lang.org/t/crate-of-the-week/2704


I remember reading a thread about this issue on Discourse's own board, and it was clear the continuous scrolling was non-negotiable "because modish", regardless of user preferences or experience.

> I'm curious how much worse the performance would be if they did not apply this specific optimization.

Pages without continuous scrolling that can have large numbers of posts or entries don't typically show all by default. There are all the usual options - paging, allowing the user to choose the number per page, etc. They're all imperfect workarounds, and all better (for me) than continuous scrolling.


... but I like infinite scrolling. I just don't like infinite content.

I prefer having a webshop list everything they have in a sub instead of pagination. I prefer Amazon layout which just goes on and on with all kind of stuff related to an item. I like to be able to ctrl-f on a page and see if I hit what I need without clicking through mazes of links. I just don't like pages that just generate more content after I finished the current one in the hope I get bored and click on ads.


I remember when Google Reader came along was probably the first time I saw infinite scrolling and it was glorious! The best thing ever! I don't want my RSS feeds any other way!

But for anything else? Not so much.


I cant count how many times i've had to turn off wifi, or use firefox's offline mode just because of infinite scrolling.


Title / Article should be "Stop Badly-implemented Infinite Scrolling". As many commenters have pointed out, some of these "reasons" are due to poor implementation.


To me infinite scroll or not is more about what kind of content is it, statistics like generated clicks and of course UX, than the questions what's more difficult to implement.

With the abundance of ready to use opensource solutions, I'm sure most devs don't need to implement infinite scroll or a pagination mechanism themselves but they just use a component that does it out of the box and solves all those technical problems for them.

To be sure what works best for your users and type of content, I would do two versions, one with pagination and one with infinite scroll and let the numbers decide which technique makes the user click / visit content and maybe which technique does the user spend most time on the website.

I'm not totally against infinite scroll, for a social network news feed I think it's a good use case. Also all the potential problems listed have a solution and also some of the problems also exist when using a pagination. For example letting a user bookmark a page url with a pagenumber on a website with lots of new content is bad, as the content on the page number XY will have changed after few hours / days. Some good solutions if you really want to implement it on your own are listed in this google blog post: https://webmasters.googleblog.com/2014/02/infinite-scroll-se...


Infinite scroll is not for user experience. It's to increase session times. If you increase the time spent in an app or on a page you increase the chance of getting revenue in ads for social or media sites or purchases in marketplaces. In other words screw UX because this is about increasing engagement to increase monetization. Stressed or not, users do increase session time on infinite scroll pages than when using regular paginated views


One of the websites where one can find this annnoying "infinite scroll" is YouTube channels.

I wrote a quick and dirty script to address this annoyance.

It can be used to output a table of all the video urls and video titles for any YouTube channel.

"yy032" and "yy025" are some utilities I wrote to decode html and transform urls to HTTP for HTTP/1.1 pipelining, respectively.1 Instead of using yy025 and openssl, one could alternatively make a separate TCP connection for each HTTP request, e.g., using something like curl. Personally, I prefer not to make lots of connections when retrieving mutiple pages from the same domain.

Here is a hypothetical example of how to use the script, "1.sh", to make a table of all the video urls and video titles in a channel.

   echo https://www.youtube.com/user/example/videos|sh 1.sh|yy025|openssl s_client -connect www.youtube.com:443 > 2.html
   sh 1.sh urls < 2.html > example.1
   sh 1.sh titles < 2.html > example.2
   rm 2.html
   paste -d '\t' example.1 example.2

   # 1.sh
   case $1 in
   "")
   exec 2>/dev/null
   export Connection=close
   yy025|tcs www.youtube.com |sed 's/%25/%/g'|yy032 > 1.html
   while true;do
   x=$(sed 's/%25/%/g;s/\\//g' 1.html|yy032|grep -o "[^\"]*browse_ajax[^\"\\]*"|sed 's/u0026amp;/\&/g;s/&direct_render=1//;s,^,https://www.youtube.com,');
   echo > 1.html;
   test ${#x} -gt 100||break
   echo "$x" 
   echo "$x"|yy025|openssl s_client -connect www.youtube.com:443 -ign_eof > 1.html
   done;
   rm 1.html;
   ;;-h|-?|-help|--help) echo usage: echo https://www.youtube.com/user/example/videos \|$0 ;echo usage: $0 "[1|2]" \< 2.htm
   ;;1) sed 's/\\//g;s/u0026amp;//g;s/u0026quot;//g;s/u0026#39;//g'|grep -o "ltr\" title=\"[^\"]*"|sed 's/ltr..title=.//'  
   ;;2) sed 's/\\//g;s/u0026amp;//g;s/u0026quot;//g'|grep -o "[^\"]*watch?v=[^\"]*"|sed 's,^,https://www.youtube.com,'|uniq
   esac
1 https://news.ycombinator.com/item?id=17689165 https://news.ycombinator.com/item?id=17689152


All YouTube channels have an RSS feed too, which might be more intuitive to parse.


   Corrections:
   /tcs/s//openssl s_client -ign_eof -connect/;s/.com/&:443/
   s/1|2/titles|urls/
   s/;;1/;;titles/
   s/;;2/;;urls/


Maybe it's just me because I just realized how irritating it is, but I really dislike when the title of an article commands me to do something. I don't really even understand why people do it, is it supposed to make me hate-click the link? It just makes me think the author is juvenile and i lose interest.


I think it's to draw the attention of people who want to tell others to do the same thing. E.g. if you're saying the title of this article internally while looking at an infinite-scrolling web site, then the title will get your attention.


I actually found it a little misleading in this case. I thought it was a way to stop sites infinitely scrolling.


So, as many problems as there are with infinite scrolling, people keep using them because they generally work. Some might say that it's bad for users but good for companies because it encourages them to stay on the site more by using psychology, one can also point to the way sites promote a "Most popular package" or how they price things to encourage people using psychology to spend more than they might have originally.

Argue whatever you want, but if something works, people are going to use it. And as long as it's not misleading people, it's hard to present it has a dark pattern.


The most stupid design is (1) put meta links such as "about", "copyright", "contact", "abuse", "profile" links in the footer of the website, and (2) using infinite scrolling. Literally, WTF?!

Every time I want to find a meta link, I need to have a race between my reaction speed and the JavaScript loading time... Worse, some background scripts are written in a way to trigger even if you press "Esc", which is supposed to stop the current executing script.


The article is flawed, because for example it takes for granted that the footer needs to scroll with the infinite scrollable content pane, which is just an absurd thought to begin with. Similar statements hold true for memory management, of course a naive implementation will eventually fill memory, but the same is true for a bad implementation of an single page web app with paging UI. Same for bookmarks, of course if you bookmark page 1 of a multi page list, eventually the articles you saw will be pushed to page 2. And if you have a single page application and forget to have the url change to the articles you read, you will have issues, on the other hand if you read an article in an infinite loading list, it would be no problem to change the url as you read articles and make them linkable. If you take away all of these statements you end up with the following: a) it is easier to mess up infinite scrolling than to mess up paging, don't think its easy or you can build it quickly 'on the side'. (my take on that point is) -> We need better best practices and tooling to build infinite scolling for popular frontend frameworks. In my opinion it is on the level of complexity as building a state library such as redux including the react integrations and redux tooling and needs a similar amount of contributors, support, application feedback, bug reports etc. until it can provide a satisfactory mainstream user experience. b) the article traps into the same mistake most medium/hackernoon articles make: not more explicitly discriminating between real web apps and web pages that just happen to use a js framework. A real web app is something like calender, mailclient, taks, slack, fb messenger, trello etc. They have completely different requirements and expectations and it would be absurd to click to older pages of messages on slack and is really annoying to do so in gmail. Even though the article just mentions the term "web site", it does sell its advice as a kind of universal truth independent of context. For a web page, something like new york times or medium articles or some informational page for a company offering, i agree that especially autoloading of next articles at the end of one opened post can be really annoying and in the context of articles infinite scrolling is even easier to get wrong, but not because of an universal law, but because the user interface has more things to take into consideration and requires better planning.


I’d like to see the browser APIs prohibit this - and also disable interference with text selecting and copy/paste buffer. There is no legit reason for this functionality.


I think it would be very difficult to make something like Google docs or the rich text compose options in a new email without the ability to trigger actions on text selection and clipboard.

What I would like to see is a permission though, like when browsers ask for your location: "This site want's to manipulate your clipboard. Allow?"


If we could go back in time and redesign everything from a clean slate, we really should just have different formats and client apps for “run portable apps with rich GUIs over the Internet” and “view text with clickable links embedded.”


How could you change browser APIs to block infinite scrolling? It boils down to making a network request and adding html elements. You can't disable those since they're using significantly outside of infinite scrolling.


The best way to block it would be to provide direct support for it. Rather than each site rewrite the user experience with Javascript, the browser could support a standard paginated HTML. Then it could render that as infinite scroll, or pagination, at the user's preference.

Now that the Javascript genie is out of the bottle, you can't stop single-page apps from doing their own navigation. But if you make it simple enough for developers, many new sites will choose to support a standard HTML feature rather than continue to manage it themselves.

That would, of course, take time and be the usual HTML-evolution clusterf*. But if Google or Mozilla decided to start it, in conjunction with one or a few major blog/social-media providers, it could probably be widely supported within a decade.


That's actually in development https://www.chromestatus.com/features/5673195159945216

No signs from other vendors than Chrome though.


I really took to heart this article about building a thoughtful, useable infinite scroll that doesn't break the back button. https://tumbledry.org/2011/05/12/screw_hashbangs_building

I think photo blogs are a good place to use infinite scroll.


I agree with most points but not with the bookmarking. Bookmarking paginated content is rarely useful, unless the content rarely changes.

The thing that irritates me a lot with infinite scrolling is that it ruins history. If the content somehow botches open in new tab then this basically constrains the user to only ever see one piece of detail before getting crazy.


That’s only the case if the pages do not have unique URL’s for the content on them.


I've seen this disappear from the web so much that it's jarring to encounter nowadays. It was never, ever good UX.


It is an excellent feature in certain contexts, for example image galleries. In other contexts, however, it's horrible.


It's terrible for image galleries too, as the images stay in RAM and the memory usage can quickly become insane. Animated GIF galleries are especially bad for this.


Depends on implementation, you could remove the images from DOM when the user has scrolled passed them, and many libraries for inifinite scroll do exactly that.


I mean an image gallery of thumbnails, that lead to the real image. Like you search for a wallpaper with key words and then scroll to infinity and open the interesting ones in a new tab.


Twitter still does it, but their implementation is not terrible.


Twitter is horrible - scroll down a few pages, click something interesting, hit back, and you’ve lost position, and have to reload and rescroll through everything again. Even worse because some clicks will open a modal that you can close and save position, but other clicks will reload the page.


It s horrible. I constantly lose posts because of zooming in, open in new tabs, misclick etc. And its made even worse by the fact that the whole feed will change if i hit reload

I wish i could turn it off like tumblr


Really? I'm seeing it more and more.


Infinite scroll absolutely is a Dark Pattern unless you have a very good reason for it. For many things it's just obnoxious, but for e.g. Reddit (or 'endless' feeds in general) it is an extremely cynical way to drive compulsive behavior to its logical (awful) conclusion.


I still firmly believe Reddit is only usable with RES infinite scroll enabled. It's such a joy not having to click the 10px wide "next page" button.

Infinite scroll works in a lot of ways, and is integral to a content absorbing functionality (if that's what you want).


I think an important point is to make it optional, and in some cases, opt-in.



Will read the article once home, but for now I have this rule of thumb: if data is of streaming nature & short time valued, infinite scroll, else always pagination. So far worked for me (:


I agree with the article, I hate infinite scrolling. It just doesn't feel natural, and sometimes the performance is bad which makes everything feel sluggish.


> a developer suggests using infinite scrolling

What developer suggests this? Seems like the author can't tell the difference between a developer and a "growth hacker".


I'll like to see an infinite scrolling with pagination. It's easily do able. I don't know why it's not being done.


I do this on one of our internal sites at work - it makes a table that is fitted to the page vertically, where scrolling with the wheel changes the page. Super easy to flick through results (better than infinite scroll in fact), which is the main issue I have with paginated things.


I guess sometimes infinite scrolling is fine, as long as you have a "go to the last reply" btn.


People spend so much time in their companies on doing the same tasks like looking at Google Analytics

it's insane


Especially if it has a footer.


Will they consider an article titled "Stop using bright neon green in prominent design elements"? I think I figured that one out in 6th grade.


Highly biased opinions... What about articles where access to all parts is needed, like scientific articles, manuals, reports, etc? And for the general public too, at least part of readers are able to concentrate on reading much longer than thru a couple of paragraphs.


That's not infinite scroll. That's just a large page.


No, a book is not a large page.


Counter examples can be found all over the internet (e.g. many gnu manuals have the option to show all information in a single HTML page, quite a few Gutenberg books are in a single HTML file).

(I'm wondering if you think the objection is to scrolling, it's not, there is a difference between a long page with scroll bars that give an indication on how far you are on the page, and infinite scrolling where the page gets longer each time you read the end of the page)


Obviously you can make a single large page. We don't call that a book, but a page. A book is a collection of pages.

From dictionary, book: "a written or printed work consisting of pages glued or sewn together along one side and bound in covers."


A book page is clearly a different concept to a web page, despite the similar name. I'm not sure what your point is.


i bet it would be theoretically feasible to take each individual page of a book and perform some chemical process on them such that you join the bottom of a given page with the top of the next one on chemical level, in which case, a book certainly can be a single page. really, all books are just a single conceptual page split at given boundaries to give the impression of structure.


no, I didn't say that you can turn a book into a single page exactly. I said that you can bind the pages of a book together in such a way that it would be one long, continuous page. rather, i said that conceptually, a book can be a single page, and beyond that I also went on to clarify that a book is nothing more than a single page split at arbitrary locations to give the impression of structure.

if there were a single piece of paper long enough to hold the entirety of a book, and it were written out on that page, would that make it any less of a book? it may not be one in the sense that it is no longer bound together, but at the same time, in the former example the pages were bound together by some chemical process into one monolithic page; the only thing missing is a cover to hold it together, though I have seen college textbooks come as just loose leaf paper that one has to bind themselves but that's still a "book" prior to binding.

also: what if a story or some such were to be written on a scroll? just because it doesn't fit the precise literal definition of what a book is, doesn't mean it doesn't contain the same semiotic substance as "book" and as such doesn't mean that it automatically isn't one. but maybe im just being pedantic ¯\_(ツ)_/¯


You said it yourself, you can turn a book into a page. It won't be a book anymore. It is a page.


Have you heard of hyper-links?


Using links or buttons would suck for a lot of use cases. Imagine what it would work like on your phone if you couldn't scroll through Twitter, but had to touch buttons.


Funny that you use Twitter as an example because infinity scrolling on Twitter is the reason the side is so unusable. Whenever you click an image/link or try to zoom in/out, you take the risk to lose your current scroll position.


? I have a touchscreen

Honestly scrolling on mobile gets me halfway to a repetitive stress injury, I’ll take a next button anyday




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: