16 ms·

Infinite Scrolling: When to Use It, When to Avoid It

115 points by favourable 4y ago

Dalewyn 4y ago
Infinite scrolling is universally bad for one, very simple reason: It breaks the scroll bar. One of the purposes of a scroll bar is to indicate how long (and/or wide) some piece of content is relative to your window. Another purpose is to indicate your current X/Y position within some piece of content. Both of those purposes are completely broken with the use of infinite scrolling, because the length (and/or width) of the content keeps changing (increasing) and thus your position in that content also keeps changing. I shouldn't have to explain how terrible this is from both accessibility and simple practicality standpoints.
- nonameiguess 4y ago
  Not only this, but every time it happens I have to wonder how it is that designers have never tried to actually use the scrollbar, getting to the bottom only to have it double in length, the placekeeper jumps out from underneath your cursor, the scrollbar then detects your cursor, and bam, you just skipped half the content without meaning to and it is virtually impossible to get back to where you were. This gets even worse when it isn't a list of entries you're reading but a single very long article or comment thread that should have just been paginated to begin with. It seems entirely motivated by a basic laziness of not wanting to create separate mobile and non-mobile views and defaulting everything to mobile-friendly even if it destroys the browsing experience of people using ordinary desktops and laptops.
  - spookthesunset 4y ago
    Not maintaining a separate site for mobile and desktop isn’t lazy. Having two separate interfaces is not at all easy and it has its own set of trade offs. For example with two sites you now have two URLs and need to figure out which experience a browser should actually see. If I’m on a desktop and somebody sends me a mobile link, which page should I see?
- criley2 4y ago
  I have seen infinite scroll paradigms that simply load the next bit of content, causing the page to elongate, causing the bar to shrink and reposition. This is fine to me as the bar remains in exact sync with the document. I also think the scroll bar is an entirely desktop tool, and as infinite scrolling most benefits mobile, this is a moot point. Nobody on mobile uses the scroll bar. Personally, as a middle-click-and-hold'er, I do not use the scroll bar. I just went through my pages and frankly I'm surprised how the bar looks. I honestly never look at it or use it. As this article demonstrates the scrolling on mobile as well, I have to point out that your complaints are sadly more of edge cases w.r.t. to the products we're making for the general public.
  - d0gbread 4y ago
    I use the scrollbar on mobile. It's a way to quickly navigate to a section of a particularly large document that would take tons of swiping. Not a frequent use case but an absolute necessity on occasion.
    - criley2 4y ago
      Interesting, none of my mobile browsers even have a scroll bar.
      - Wowfunhappy 4y ago
        An autohiding scroll bar is still a scroll bar.
        criley2 4y ago
        I legitimately cannot get Chrome for Android to show a scroll bar under any circumstance. Android 13 / pixel 6 pro / Chrome, there is simply no scroll bar on any page no matter what. EDIT: Ah! I see it! I have a curved screen and the 1 px thin "bar" is only on the curved edge of the screen which catches the light and isn't visible. Fair enough.
- chrisseaton 4y ago
  > One of the purposes of a scroll bar is to indicate how long (and/or wide) some piece of content is relative to your window. Another purpose is to indicate your current X/Y position within some piece of content. Seems fine to me? New content is appended, so the length and your position changes. Scroll bar reflects what’s going on. What’s the problem?
  - lelandfe 4y ago
    Yeah, I'll bite. How is a growing scrollbar bad for accessibility? Why is an understanding of how long a page is an accessibility concern?
    - Dalewyn 4y ago
      Because not everyone has the hand-eye coordination and/or motor skills to keep track of an arbitrarily changing scroll bar, particularly the elderly and the disabled. An accurate and consistent scroll bar is a valuable navigation tool, please don't break it.
      - chrisseaton 4y ago
        Why do you need to coordinate your hand and eye to use a scroll bar? Don’t you use touch to scroll or a scroll wheel?
        Dalewyn 4y ago
        Clicking/touching the scroll bar and dragging it directly is a valid way of using a scroll bar. Especially for people who come from a time when mice didn't have scroll wheels, clicking and dragging the scroll bar itself predates the convenience of whole-screen dragging (touch) and flicking the scroll wheel. Dragging the scroll bar has its benefits over touch/wheel too: It allows for quicker, longer distance travel with fewer (and in the sense that you just move your arm, also simpler) movements.
      - lelandfe 4y ago
        Hm. Do the the elderly and the disabled keep track of the scroll bar length? Does it getting longer actually confuse people? I'm not convinced this is as important of a thing. Opening modals changes the scrollbar length. Opening accordions do too. The scrollbar doesn't "break" when content is added to a page, it just adjusts accordingly. It seems like this is all good, expected behavior; not an a11y concern.
- mananaysiempre 4y ago
  On one hand, yes, I agree. On the other hand, it seems to me that this is partly the fault of the scrollbar as an idea. How do you show the current position in a document for which, for one reason or another, you cannot instantly compute the visible height? I still remember an Android PDF viewer which would run through every page of a 2000-page document to get the page dimensions before displaying anything. (From what I can see, modern viewers display the first page instantly by accepting being caught in their lie when a PDF has pages of wildly varying size.) Even a gigabyte of Unicode plain text with no line breaks in a proportional font is a serious problem. I don’t think we can special-case network streaming here (although it’s not unimportant either).
  - RunSet 4y ago
    > How do you show the current position in a document for which, for one reason or another, you cannot instantly compute the visible height? Perhaps by not "instantly" displaying the document- that is, displaying it before you are able to display its scrollbar.
    - kevin_thibedeau 4y ago
      Scrollbars can be dynamically updated as the content is processed. This is also a distinct advantage of a proportional sized scollbar elevator like those in Windows since the elevator shrinks to its final size rather then starting at a small fixed size and shifting around.
    - 9dev 4y ago
      But why on earth would I want to wait for a document to open, just so the height of the scrollbar is accurate when I see it first..? That is such a minor detail when viewing a document. Maybe the metaphor of the scrollbar is just a bad one?
      - plugin-baby 4y ago
        Or just imperfect, but often useful?
- seydor 4y ago
  It also breaks the "virtual scrollbar". if you reload the page you have to start all over
  - eloisius 4y ago
    This is the killer for me. I’ve gone from loving GitHub to hating it for this one quirk. When you reload the page while viewing a PR, you invariably land at some random spot instead of where you were.
  - Wowfunhappy 4y ago
    This is my primary issue with infinite scrolling. However, I wonder if it’s mostly a problem with today’s web browsers. Heck—maybe it’s not even browsers, but websites. I’m pretty sure a website could change the URL as you scroll, so if the page is reloaded (or bookmarked, etc) you’re brought back to where you left off. I usually dislike it when websites mess with URLs, but this seems like an excellent use case!
    - seydor 4y ago
      even if the website did re-start where you left off (difficult), what if you scroll backwards? When you send a link, should it point to the page that you scrolled to, or to the beginning of the list? How many items before/after should load? These arise solely because people chose to reinvent a browser -in-the-browser. With pagination we dont have these issues, the link points to a specific results page, uniquely.
      - marginalia_nu 4y ago
        You can still have weird issues with pagination if the data set you're paging through is mutable. Reddit used to struggle with this back in the day. The way they did pagination was to say "show the next page after id postId=xyz123". Since the algorithm kept re-sorting the posts on the front page, the content moved around quite a lot and you'd see the same things re-appearing on page after page, and sometimes post xyz123 was deleted and then everything broke.
- rendaw 4y ago
  That's like claiming every data collection should have a reasonably limited length. Even if that were true, scrollbars in general break when the data gets too large (a pixel of screen movement jumps pages of data) not to mention browser layout performance, memory requirements, etc. Pagination doesn't work either, because data can shift and you get repeated elements (if the page size is less than the remaining data when moving back to the start) or else truncated pages, or you start on page 10 and move backwards to page -3 before reaching the start. If you jump to a particular element, it requires you to know the absolute offset of all data to calculate page numbers correctly, which when jumping and filtering a large table might be a significant performance cost. Plus it breaks up content - if you're looking at chat history for example, often related messages are broken up into several smaller messages. Having one message on page 10 and the remainder on page 11 would be a terrible experience. Don't blame this on designers, infinite scroll has been around (apparently?) almost 20 years now. Browsers still don't have an accessible solution despite the ubiquity of this pattern today - browser devs are to blame.
- Naomarik 4y ago
  I completely agree with you so I wrote one awhile back that doesn't break the scrollbar and also returns you to where you were on browser back. It's not perfect but I don't really care to improve it and no one has had any complaints. Check it out here: https://sayartii.com/search https://sayartii.com/search
  - lelandfe 4y ago
    This doesn't appear to be infinite scrolling. I can scroll to the bottom of the list with Cmd-Down. It just appears you're lazily rendering results. N.b. it's incredibly slow, because it has to load every batch above the scroll position first. Try going to the bottom of the page and seeing how long it takes for results to render.
- gampleman 4y ago
  I think this depends on what kind of content you are scrolling. If you know how many items there are and all the items have the same height, then you can simply set the height of your container for the scrollbar to be accurate. Furthermore you can listen to the scroll event and load the correct items if the user uses the scrollbar to jump to a particular spot. So I think the bigger problem is a) people being lazy and not implementing this properly b) using this pattern where the preconditions don’t hold.
- LinAGKar 4y ago
  It also means that when dragging the scroll bar, the page will suddenly jump when it loads in more content
  - Findecanor 4y ago
    That sounds like a deficient implementation for a scroll bar widget, more than anything else.
- chrisweekly 4y ago
  Infinite scrolling also immediately destroys the concept of a footer. IME (building websites/apps for a living since 1998) footers are an excellent and underutilized place to put large amounts of supporting materials, expanded navigation links and related affordances. Consider the absurdity of infinite scrolling in a page with a layout containing a footer that can never be reached (perhaps briefly glimpsed before being pushed out of sight).
  - Wowfunhappy 4y ago
    I mean, the obvious solution to this problem is to not have both footers and infinite scrolling; you have to pick one.
- SnowHill9902 4y ago
  Some datasets don’t have a natural order so a position is arbitrary. You just want to iterate over all of it in some useful sequence without arbitrary seek.
- psnehanshu 4y ago
  On mobile devices the scroll bar is barely visible. So this is a non-issue for mobile.
  - spookthesunset 4y ago
    I don’t even think you can grab the scroll bar and move around on iOS… though I kinda remember you being able to way back in the day…
    - djcannabiz 4y ago
      you definitely can, try long pressing on it
- amelius 4y ago
  > Infinite scrolling is universally bad for one, very simple reason: It breaks the scroll bar. It also breaks the back button, in all implementations I have seen so far.
  - spookthesunset 4y ago
    What is “back” on a dynamic page like Reddit, Facebook or even this site? If “back” means “show me exactly what I last saw” it might mean you are showing stale data. I dunno. Shit ain’t easy once you think about it for a while. If all you have is a static unchanging set of items… might as well just use old school pagination! At least in my opinion. It’s when the list of items is constantly changing that things get interesting.
    - jandrese 4y ago
      It might be stale, but it's the content I want to see. The F5 key still works if I care about getting it up to date.
  - melagonster 4y ago
    e.g. FB create a search for their website, apparently this is because browser's don't work like user's need. sometimes, I find there are 3 different search box on one FB page, I should remember which one is it...
- xorcist 4y ago
  It also breaks the find button. The item you wanted to search might get unloaded, or not loaded yet, in some bizarre attempt at optimization when the javascript library resposible is an order of magnitude larger than the actual content anyway. My phone has gigabytes of memory. If you want to present five hundred items in a web shop, just list them and do not bother with any type of pagination, invisible or otherwise.
  - spookthesunset 4y ago
    Gigabytes of memory yes but there is load time and render time too. And rendering a 120mb payload of items and their thumbnails before I can even view the top of the page seems… not the best user experience. I don’t think there is an easy answer here. All options have some trade offs.
    - xorcist 4y ago
      That is not how browsers work. The browser will render the viewport immediately, long before the page has loaded. It will also load the visible thumbnails first, unless made impossible by complicated markup of course. Otherwise surfing the web on dialup in 1996 would have been intolerable.
    - _cd 4y ago
      Typically when I serialize data for #index endpoints I return much slimmer payloads than I do in #show endpoints. I recognize that 120mb was an extreme, but you should be able to serialize lists of 500+ items into well under 1mb, with enough data to render your list view thumbnails/links. I always thought the infinite scroll pattern was designed for analytics purposes. So that you can track user engagement. Not because technology constraints necessitated it or that it was a good user experience.
      - NLPlatypus 4y ago
        Just have JS track where the user is?
    - shadowgovt 4y ago
- kordlessagain 4y ago
  Infinite scrolling is bad because it has ZERO respect for document boundaries. An "infinite" document is a travesty.
  - dalmo3 4y ago
    Define document. Is a log file a document? How would you render a log file in real time without some sort of streaming (i.e. infinite scrolling)?
  - tsimionescu 4y ago
    tail -f considered harmful?
- dreamlifelike 4y ago
  This is like saying that electric cars are universally bad because they break the MPG meter… Scroll position as measured by a scroll bar doesn’t make sense for an infinite (or indefinite) document. That doesn’t make an infinite document bad.
- dimal 4y ago
  It is possible to implement infinite scrolling and maintain the scrollbar height if you know the full number of results you’re going to scroll through and the height of each element (both of which are usually knowable). You simply set the scroller div to elementCount * numElements regardless of the number of elements. Most libraries that provide infinite scrolling do this.
- rnk 4y ago
  Just don't ever use it.
- grogers 4y ago
  Scrollbar hasn't been useful for that (at least for me) ever since websites started putting comments after the content (e.g. article, blog)
- lupire 4y ago
  Expand your perspective: What does scroll bar mean when you have no intention of ever scrolling all the content? "Infinite" scroll isn't breaking anything, the content all broke scrolling inherently.
- mikotodomo 4y ago
  > One of the purposes of a scroll bar is to indicate how long (and/or wide) some piece of content is relative to your window And how would you do that when there is infinite scroll?
nkozyra 4y ago
I've never been a big proponent of infinite scrolling even when it was the approach du jour in the early Rails/web 2.0 halcyon days. But it can work, it's just that nobody has bothered to tinker with the concept very much. It's either/or when it comes to infinite scrolling and click pagination. The big issues for me are: - it's never really infinite, it's some finite list that will end at a surprising time. There's rarely any context for how much is ahead of you and behind you. Some sites now will give you little contextual hints (ASOS.com for an example) but often it's opaque. - leaving all of your previous items on the page. So I'm near the bottom of the list but I have a 4000vh list ahead Sites that paginate without engagement outside of scroll make the most sense to me, where you get a window of several pages and indication of where you are. [1 2 3] scroll down, [2 3 4]
jl6 4y ago
> One disadvantage of Load More buttons, compared to classic infinite scrolling, is that interaction cost increases - users have to click the Load More button to load more content. Even the small interruption of clicking Load More might make users consume less content and cause them to switch tasks. I think this paragraph lets slip the main reason for infinite scrolling: it encourages users to consume more content, and the "load more" button offers an escape hatch that helps users break out of whatever dopamine-loop they are trapped in. The examples in the article are all relatively benign shopping examples, but infinite scroll is put to far more insidious use on "content" apps. Pagination fundamentally puts the user in control of where they are within a document, and how they want to move through it. I'm not convinced at all by the Google example of infinite scroll with integrated pagination, because I strongly expect that there is no stability to the inclusion or ordering of the items; if you revisit the same page the next day, there's little guarantee that "page 2" will have the same items, making "page 2" meaningless, and the experience just as disorienting.
- criley2 4y ago
  Facebook feed, Twitter algo, TikTok...
- jezzamon 4y ago
  I think the difference is whether the content is truly infinite or not. If there's enough content such that you could spend an unhealthy amount of time scrolling, then you are sacrificing your users well being for engagement. If there's a finite amount of items, the "expand the list as you scroll" approach is pretty reasonable. At that point you can't really call it "infinite scroll" anymore
amadeuspagel 4y ago
I'm using a chrome extension to add infinite scroll to HN[1]. It's great. [1]: https://github.com/toddw/hn-infinite-scroll https://github.com/toddw/hn-infinite-scroll
ZoomZoomZoom 4y ago
Infinite scrolling makes the contents of the page unlinkable, breaks searchability and caching. It always makes the experience worse for unclear benefits. What's the problem it solves? Not resending the header and the footer on changing pages? Really?
- sodapopcan 4y ago
  Pagination also makes things unlinkable, though. Not that I’m not necessarily defending infinite scrolling, but it’s a tough problem.
  - daptaq 4y ago
    Not necessarily, if the URL has some absolute position like the ID of the first item instead of the relative number of pages between the newest item and the current page. I believe that Reddit does something like that (of course, only if you sort by new).
    - sodapopcan 4y ago
      It’s situational ya but I was talking more like a product catalogue where items could get shifted around for promotional reasons or whathaveyou.
      - spookthesunset 4y ago
        Not just product catalogs but sites like HN. “Page 2” on this site changes constantly. … and honestly what does “page 2” even mean on a site like this? It’s almost a completely arbitrary distinction because the amount of items on each page is just a magic number. And your “page 2” is nothing more than snapshot in time… sharing a URL for “page 2” to somebody else is pointless because they won’t see the same content you did. Bookmarking “page 2” is pointless since it will change almost every load. Having a search engine index “page two” is pointless because “page two” won’t even say the same stuff by the time it gets exposed in the search page (you see this sometimes with SEO results that link to a “stories” page). In fact you might as well forbid search engines from indexing anything after “page 1” And once you start thinking about it you might just say “fuck it… everything is the same ‘page’”. Instead of a “page” you have a viewport into a infinite, constantly changing pane of content. But since it is impractical to load an infinite list of items at once, you’ve got to load chunks of it on demand. And suddenly you’ve invented infinite scroll.
Aerroon 4y ago
Don't. I have yet to use a service where I prefer having infinite scroll. I always prefer having pages.
- d0gbread 4y ago
  Do. I have sometimes used services where I prefer having infinite scroll. I sometimes prefer it.
  - deleted 4y ago
    [deleted]
  - stemlord 4y ago
    In what contexts do you prefer it? As others have said it breaks findability, default browser nav (back then forward again you have to start over or watch it gracelessly attempt to autoscroll back down 600 posts and often fail), renders the scrollbar visually near-meaningless, detrimental to performance, and seems to largely be utilized just to maximize scroll time on visibility driven ad platforms, like all popular social media. What do you like so much about it? Just the miniscule added convenience (that happens to be weaponized against you anyway as stated above)?
    - joegahona 4y ago
      I would prefer my main feed on Twitter to be infinite scroll. Pagination can be "weaponized" too -- note the awful publishers such as WebMD who break articles up into a billion pages, to increase pageviews and hence ad impressions. Incidentally I prefer pagination for taxonomy pages and search-results pages, because it puts navigation more in my hands.
      - stemlord 4y ago
        >Pagination can be "weaponized" too Good point, hadn't considered that.
- Kiro 4y ago
deleted 4y ago
[deleted]
seydor 4y ago
The latest ikea redesign is , oh boy how awful. I wonder if they are losing sales already? There is zero reason for inf. scrolling unless we re talking about addictive substances like fb, tiktok etc. Instead , put plenty of entries in each page (it's 2022, we have good bandwidth, people) and use the tried-and-true, browser-compatible pagination. So that i can send a link to a friend, and i won't need to call her to explain how many times she has to scroll down
- spookthesunset 4y ago
  Sure but on a dynamic site, there is absolutely no guarantee that what’s on “page 2” for her is what you saw when you copied the link. It’s dynamic, after all.
drosan 4y ago
csydas 4y ago
Infinite scrolling isn't so much of an issue but I've noticed a few sites don't seem to handle feeding content into it well even when they undoubtedly have the content to back it. A few image sites I've checked seem to do this pretty poorly and reload previously loaded content repeatedly and it's annoying; I understand what is happening on the server side, but I'm shocked that this happens. Even Youtube does this and the video I just watched is in the suggested videos feed fairy high up on the list, which makes no sense to me. It's also annoying to fill the scroll with unrelated content -- Twitter (as best as I can tell) seems to do this but I'm not sure how far it goes as Twitter spams login prompts after what I assume is the end of the main thread.
mhb 4y ago
Zeno's scrollbar. So annoying.
amaccuish 4y ago
The worst is when there's important links on the footer of the page. You end up trying to race the loading to click the link you need in time.
gcau 4y ago
There's some small satisfaction and fulfillment from reaching the bottom of a page. Each page is like a breakpoint, imagine if books were 1 long page.
- _emacsomancer_ 4y ago
  You're talking about scrolls (which preceded paginated books).
chrisweekly 4y ago
> "Infinite scrolling is also not a good fit if you have a large user group from areas with low bandwidth or if your website is visited frequently by users with accessibility needs." Good thing mobile is a passing fad and a11y doesn't matter. /s
ivanjermakov 4y ago
My biggest issue with infinite scrolling is that content position is not preserved in the URL. Page reload/history back returns to the top of the page and specific position cannot be linked
ozten 4y ago
They should do usability testing on Google’s solution before promoting it.
donohoe 4y ago
My confidence in the guidance from this article was shaken when it talked about “Increased page load” and “Poor SEO performance” issues. Their points are wrong and border on naivety. Page load issues can and should be nonexistent fire to loading via xmlhttprequest/fetch ahead of time, and SEO issues are minor and typically negated by sitemap XML. There are plenty of other best-practices to address lingering concerns.
gernb 4y ago
I think my only problem with infinite scroll is poor implementations. If I click a link which takes me a new page and then click back I need the page to go back to the state it was, not jump back to the top. Not sure which sites I've had that issue on recently I also need it not to crash. I haven't tried it in a while but Patreon used to have the issue that I'd sponsor some content creator and then try to go through their 200 posts. Pateron's infinite scroll is manual with a "load more" button that adds to the page. Let's say each click adds 20 posts. So I'd see 200-181, then plus 20 so 200-161, then plus 20 so 200-141, and say 101 the page would F up. The only thing to do was start over at 200 and click more 6 more times. IIRC it's basically if you expanded a few posts it would F up so starting over from 200 and not expanding posts would get you past the point you made it last time.
dqpb 4y ago
OpenAI Dall-e uses infinite scrolling to display your saved images. If your window is large enough to not have an active vertical scrollbar, it will never load all your images. So, instead of pagination, you have to resize your window to the size of a phone and rage scroll downward to load more images. Odd UX choice.
janmarsal 4y ago
I hope the answer is never.
franze 4y ago
for a major job portal we tested infinite scrolling, the main KPI "job posting views by job seeker" went down after a honeymoon period of ~2 weeks - compared to pagination for a shopping site, infinite scrolling on average improved item views and checkout - average over all product categories, but not all. no honeymoon effect was observed
oblak 4y ago
I can't think of a single good reason to have infinite scrolling bar but I have been asked to implement them multiple times. Bad, bad, bad... for the user.
peanut_worm 4y ago
The only time I would use it is if I wanted to break the scroll bar, break the back button and make the page unlinkable. So, never.
repple 4y ago
A benefit of infinite scroll bar is that it takes up less mental overhead by reaching content with fewer taps or clicks on target on a page.
croes 4y ago
Why infinite scroll and pages together?
sejje 4y ago
Just have a user preference toggle. Infinite scrolling IMO is part of the dark patterns that are attempting to collect all of your attention. Having the mental break of waiting for a new page load is a significant change for me--I'm way more likely to quickly step away from paginated scrolling than infinite.
shmde 4y ago
I remember browsing a website where I wanted to check the about us section footer. Every time I reached the bottom to click on the footer link it triggered the infinite scrolling. Felt like I was playing cat and mouse. Horrible.
Cyberdog 4y ago
I picked up a client site which uses infinite scroll, so though I didn't do the original implementation, I've done a lot of work and improvements on it. It's basically a site which publishes video game strategy guides, so it gets a good amount of search engine traffic from people searching things like "how to beat X boss" or "how to find Y item in Z level," and the site owner is very interested in making sure the people who hit those pages can smoothly find the other pages (and the ads thereupon) in a guide. Here's some thoughts on the problems and challenges we've faced. One, as mentioned in the article, the memory pressure and exhaustion issues - these were the biggest problems when I first started on the project. These were especially a problem on mobile, and a problem as guides grew in page count, page length, number and size of images, etc. To resolve this, after loading a new page, we basically do a rough count of the number of words in all guide pages currently loaded, and if it's over a certain number (I can't recall what it is off hand; 10,000, maybe), we start deleting pages in the opposite direction that the user is scrolling until we're under again - so if they're scrolling down, we remove the "previous"/"up" pages, and vice versa. (Gotta make sure to not actually delete any of the pages that are currently visible in the viewport, though…) Oh, I guess I should mention that too; we actually have it working in two directions, so when you land on a page from a search engine result, the requested page loads, then we also load in a previous page and a next page. If you start scrolling up and getting near the beginning of the previous guide page, we again load another page above it which you can keep scrolling into if you'd like. That "two-way" infinite scroll is probably a bit more difficult to implement than just doing it in one direction. Anyway, a huge problem that happens when you're adding and deleting pages like this is that the viewport would jump around, making it really annoying to try to read things. This is especially a problem when scrolling up and getting that page added above the existing content, or when scrolling down and a page above the existing viewport content is deleted. I can't remember the fine points of how I solved this but it basically involved measuring the height of pages as they get added/removed and then offsetting the location of the viewport by that height immediately after adding/removing the page such that it appears to the user that the jump never happened. This also means we had to make sure images on all pages have width and height attributes so that they don't cause repaints which reposition things as they load. Same with ad slots. This sort of math and trying to figure out what the browser is doing got hairy quickly and I always bristle when they want me to go back and touch up something to do with this code, but fortunately it's now in a state where that rarely happens. Off the top of my head, I recall that another trick we're doing is that if the user clicks the link to another guide page, we capture that click and see if that page is already loaded, and, if so, scroll the user to that guide page rather than reloading the whole thing. In the end, as a developer, this part of the code is not at all fun to work with, and as a user, I don't particularly like normal browser behaviors being hijacked for the purposes of locking in my attention like that. But I'm a step or two away from having to worry about user engagement analytics and all that nonsense, so I accept that the bosses have different priorities than I do and I do what they tell me to do in the best way I can do it. That's what they pay me for after all. Edit: Also, we use the browser history API to change the URL appearing in the location bar when the user sufficiently scrolls on to a certain guide page, so for the most part, bookmarking, back and forward buttons, the "History" menu, etc all work as expected.
Marazan 4y ago
To answer the two questions: Never, Always.
ChoGGi 4y ago
When to use it: Never When to avoid it: Always
flenserboy 4y ago
There should always be an option to paginate. As others have said, the user-hostility is significant on any infinite scroll — one side-product of this is the refusal of apps/sites such as Twitter (sometimes) or Facebook to stay where the user left off, reloading the page when the app or page is returned to. (One other truly hostile aspect of such sites: the user's choice of display order, especially on Twitter, is rarely respected, returning always to what the site believes to be most advantageous to itself. User settings should never be changed remotely, or without user approval.)
jimmySixDOF 4y ago
Infinate Canvases are better than Infinate Scroll. Change my mind.
WaitWaitWha 4y ago
Never; the time to use infinite scrolling is never. Specifically, infinite scrolling, where the remaining/invisible data is not loaded until getting towards the end of the loaded segment. For the visually impaired infinite scrolling breaks search and text-to-speach tools. A better solution is give the option to paginate with the set size, 25, 50, 1000, or whatever; or load the entire list in one shot.
- deleted 4y ago
  [deleted]
awinter-py 4y ago
> lack of landmarks to help users orient themselves. With pagination, users may remember the page that an item was on and that an item was close to the top of the page or towards the middle, but in an infinite list of items, it is hard to remember the location of any specific item and return to it. > especially disruptive for the user experience when websites do not save the user’s spot in the list during pogo sticking. Frequently, users will click on an item in the infinite list or feed to go to its detail page and, when they come back, using the Back button, they will find themselves at the top of the list ^ cmon this is just the design spec for the twitter web UX
lupire 4y ago
> Even the small interruption of clicking Load More might make users consume less content and cause them to switch tasks. In other words, infinite scrolling promotes addictive behavior.
dustinmoris 4y ago
When to use it: never
nashashmi 4y ago
After reading the comments and taking everyone's input, here are a couple of points: * infinite scrolling turns webpages into web apps yet not everyone likes or expects web apps; * infinite scrolling fails to tell people when they reached the end and this is frustrating; * infinite scrolling fails to tell people how far along they have consumed the content, or how far back is the top bar; * infinite scrolling breaks the basics of UI tools (no scrollbar, no end key, no home key) * infinite scrolling should never be other than a gesture for more (scroll for more) * infinite scrolling should still allow for going "back" e.g. either it scrolls back up and/or allows for going back to the beginning. * infinite scrolling should have an "end" e.g. a bar at the bottom that phases away when scrolling further down and then appears at the next end. * infinite scrolling is a bad habit for more, and may be should be discouraged e.g. electrocute the user every time he asks for more /s I hope you agree.
- Schroedingersat 4y ago
  There's also the bit where you put important contact, privacy, or similar information below the infinite scrolling element so it's only reachable via debug tools or turning the internet off (the latter doesn't always work because it often results in an 'oopsie wooopsie somefing went wong' error popup).
- deleted 4y ago
  [deleted]
weare138 4y ago
Never. Always.
ajwaxman 4y ago
Not when you have a footer that you want people to be able to click. Can't stand when infinite scrolls make footers impossible to interact with!
- cudgy 4y ago
  Maybe when presented with such an unfortunate design you may be able to search the items for a nonsensical search term, resulting 0 items in the list. Then, the footer should be visible.
iio7 4y ago
Infinite scroll is one of the several cancers of modern web development. It breaks the scroll bar, it ruins search on the page, the back button stops working, it's a pain for people with accessibility issues. Never use it!
Hippieblog 4y ago
HereIGoAgain 4y ago
When to use it: When you give an option to opt-out.. FULL STOP! If I had my way though... never!
alexmingoia 4y ago
It doesn’t have to be either or. Provide a toggle for the user to choose their preference.
PostOnce 4y ago
Not only does archive.org have infinite scrolling... It has no pagination interface for regular people! AND YET! It has pagination on the backend! It's a URL parameter! So I emailed them. At first, they didn't understand, they said the design team wanted infinite scroll, so I said, that's fine, infinite scroll is fine, that doesn't preclude pagination, in fact pagination is already implemented on the backend. I offered them a couple of possible 5-minutes-to-implement unobtrusive designs and also offered to do it for free. All it requires is links since the backend is done... https://i.imgur.com/R12ckYU.jpg https://i.imgur.com/R12ckYU.jpg (the proposal) They don't care. They choose to die on this hill for absolutely no discernable reason; regular users who can't edit url parameters be damned. I love them and their mission so much, but good lord, this one particular decision is so stupid. Just put the damn pagination buttons on the site so regular people can use them, they don't know how to use URL parameters! edit: If the value of pagination isn't self-evident, one of the values of pagination is that it allows you to go back to where you were a different day or on another machine, instead of scrolling through 70+ pages of stuff you've already seen... Or, perhaps, to skip 50 pages to find much older/newer/more interesting stuff, etc...
cudgy 4y ago
“Frequently, users will click on an item in the infinite list or feed to go to its detail page and, when they come back, using the Back button, they will find themselves at the top of the list, having to scroll down through screenfuls and screenfuls of already seen content.” This is such a common problem with web sites that I have reverted to habitually clicking “Open in new tab” when clicking a detail link on these types of screens to avoid this issue. How this type of terrible UI is allowed and even commonplace on websites (and some hybrid mobile apps) speaks volumes about the company’s regard for its users.

115 points by favourable 4y ago

Infinite scrolling is universally bad for one, very simple reason: It breaks the scroll bar. One of the purposes of a scroll bar is to indicate how long (and/or wide) some piece of content is relative to your window. Another purpose is to indicate your current X/Y position within some piece of content. Both of those purposes are completely broken with the use of infinite scrolling, because the length (and/or width) of the content keeps changing (increasing) and thus your position in that content also keeps changing. I shouldn't have to explain how terrible this is from both accessibility and simple practicality standpoints.

nonameiguess 4y ago
Not only this, but every time it happens I have to wonder how it is that designers have never tried to actually use the scrollbar, getting to the bottom only to have it double in length, the placekeeper jumps out from underneath your cursor, the scrollbar then detects your cursor, and bam, you just skipped half the content without meaning to and it is virtually impossible to get back to where you were. This gets even worse when it isn't a list of entries you're reading but a single very long article or comment thread that should have just been paginated to begin with. It seems entirely motivated by a basic laziness of not wanting to create separate mobile and non-mobile views and defaulting everything to mobile-friendly even if it destroys the browsing experience of people using ordinary desktops and laptops.
- spookthesunset 4y ago
  Not maintaining a separate site for mobile and desktop isn’t lazy. Having two separate interfaces is not at all easy and it has its own set of trade offs. For example with two sites you now have two URLs and need to figure out which experience a browser should actually see. If I’m on a desktop and somebody sends me a mobile link, which page should I see?
criley2 4y ago
I have seen infinite scroll paradigms that simply load the next bit of content, causing the page to elongate, causing the bar to shrink and reposition. This is fine to me as the bar remains in exact sync with the document. I also think the scroll bar is an entirely desktop tool, and as infinite scrolling most benefits mobile, this is a moot point. Nobody on mobile uses the scroll bar. Personally, as a middle-click-and-hold'er, I do not use the scroll bar. I just went through my pages and frankly I'm surprised how the bar looks. I honestly never look at it or use it. As this article demonstrates the scrolling on mobile as well, I have to point out that your complaints are sadly more of edge cases w.r.t. to the products we're making for the general public.
- d0gbread 4y ago
  I use the scrollbar on mobile. It's a way to quickly navigate to a section of a particularly large document that would take tons of swiping. Not a frequent use case but an absolute necessity on occasion.
  - criley2 4y ago
    Interesting, none of my mobile browsers even have a scroll bar.
    - Wowfunhappy 4y ago
      An autohiding scroll bar is still a scroll bar.
      - criley2 4y ago
        I legitimately cannot get Chrome for Android to show a scroll bar under any circumstance. Android 13 / pixel 6 pro / Chrome, there is simply no scroll bar on any page no matter what. EDIT: Ah! I see it! I have a curved screen and the 1 px thin "bar" is only on the curved edge of the screen which catches the light and isn't visible. Fair enough.
chrisseaton 4y ago
> One of the purposes of a scroll bar is to indicate how long (and/or wide) some piece of content is relative to your window. Another purpose is to indicate your current X/Y position within some piece of content. Seems fine to me? New content is appended, so the length and your position changes. Scroll bar reflects what’s going on. What’s the problem?
- lelandfe 4y ago
  Yeah, I'll bite. How is a growing scrollbar bad for accessibility? Why is an understanding of how long a page is an accessibility concern?
  - Dalewyn 4y ago
    Because not everyone has the hand-eye coordination and/or motor skills to keep track of an arbitrarily changing scroll bar, particularly the elderly and the disabled. An accurate and consistent scroll bar is a valuable navigation tool, please don't break it.
    - chrisseaton 4y ago
      Why do you need to coordinate your hand and eye to use a scroll bar? Don’t you use touch to scroll or a scroll wheel?
      - Dalewyn 4y ago
        Clicking/touching the scroll bar and dragging it directly is a valid way of using a scroll bar. Especially for people who come from a time when mice didn't have scroll wheels, clicking and dragging the scroll bar itself predates the convenience of whole-screen dragging (touch) and flicking the scroll wheel. Dragging the scroll bar has its benefits over touch/wheel too: It allows for quicker, longer distance travel with fewer (and in the sense that you just move your arm, also simpler) movements.
    - lelandfe 4y ago
      Hm. Do the the elderly and the disabled keep track of the scroll bar length? Does it getting longer actually confuse people? I'm not convinced this is as important of a thing. Opening modals changes the scrollbar length. Opening accordions do too. The scrollbar doesn't "break" when content is added to a page, it just adjusts accordingly. It seems like this is all good, expected behavior; not an a11y concern.
mananaysiempre 4y ago
On one hand, yes, I agree. On the other hand, it seems to me that this is partly the fault of the scrollbar as an idea. How do you show the current position in a document for which, for one reason or another, you cannot instantly compute the visible height? I still remember an Android PDF viewer which would run through every page of a 2000-page document to get the page dimensions before displaying anything. (From what I can see, modern viewers display the first page instantly by accepting being caught in their lie when a PDF has pages of wildly varying size.) Even a gigabyte of Unicode plain text with no line breaks in a proportional font is a serious problem. I don’t think we can special-case network streaming here (although it’s not unimportant either).
- RunSet 4y ago
  > How do you show the current position in a document for which, for one reason or another, you cannot instantly compute the visible height? Perhaps by not "instantly" displaying the document- that is, displaying it before you are able to display its scrollbar.
  - kevin_thibedeau 4y ago
    Scrollbars can be dynamically updated as the content is processed. This is also a distinct advantage of a proportional sized scollbar elevator like those in Windows since the elevator shrinks to its final size rather then starting at a small fixed size and shifting around.
  - 9dev 4y ago
    But why on earth would I want to wait for a document to open, just so the height of the scrollbar is accurate when I see it first..? That is such a minor detail when viewing a document. Maybe the metaphor of the scrollbar is just a bad one?
    - plugin-baby 4y ago
      Or just imperfect, but often useful?
seydor 4y ago
It also breaks the "virtual scrollbar". if you reload the page you have to start all over
- eloisius 4y ago
  This is the killer for me. I’ve gone from loving GitHub to hating it for this one quirk. When you reload the page while viewing a PR, you invariably land at some random spot instead of where you were.
- Wowfunhappy 4y ago
  This is my primary issue with infinite scrolling. However, I wonder if it’s mostly a problem with today’s web browsers. Heck—maybe it’s not even browsers, but websites. I’m pretty sure a website could change the URL as you scroll, so if the page is reloaded (or bookmarked, etc) you’re brought back to where you left off. I usually dislike it when websites mess with URLs, but this seems like an excellent use case!
  - seydor 4y ago
    even if the website did re-start where you left off (difficult), what if you scroll backwards? When you send a link, should it point to the page that you scrolled to, or to the beginning of the list? How many items before/after should load? These arise solely because people chose to reinvent a browser -in-the-browser. With pagination we dont have these issues, the link points to a specific results page, uniquely.
    - marginalia_nu 4y ago
      You can still have weird issues with pagination if the data set you're paging through is mutable. Reddit used to struggle with this back in the day. The way they did pagination was to say "show the next page after id postId=xyz123". Since the algorithm kept re-sorting the posts on the front page, the content moved around quite a lot and you'd see the same things re-appearing on page after page, and sometimes post xyz123 was deleted and then everything broke.
rendaw 4y ago
That's like claiming every data collection should have a reasonably limited length. Even if that were true, scrollbars in general break when the data gets too large (a pixel of screen movement jumps pages of data) not to mention browser layout performance, memory requirements, etc. Pagination doesn't work either, because data can shift and you get repeated elements (if the page size is less than the remaining data when moving back to the start) or else truncated pages, or you start on page 10 and move backwards to page -3 before reaching the start. If you jump to a particular element, it requires you to know the absolute offset of all data to calculate page numbers correctly, which when jumping and filtering a large table might be a significant performance cost. Plus it breaks up content - if you're looking at chat history for example, often related messages are broken up into several smaller messages. Having one message on page 10 and the remainder on page 11 would be a terrible experience. Don't blame this on designers, infinite scroll has been around (apparently?) almost 20 years now. Browsers still don't have an accessible solution despite the ubiquity of this pattern today - browser devs are to blame.
Naomarik 4y ago
I completely agree with you so I wrote one awhile back that doesn't break the scrollbar and also returns you to where you were on browser back. It's not perfect but I don't really care to improve it and no one has had any complaints. Check it out here: https://sayartii.com/search https://sayartii.com/search
- lelandfe 4y ago
  This doesn't appear to be infinite scrolling. I can scroll to the bottom of the list with Cmd-Down. It just appears you're lazily rendering results. N.b. it's incredibly slow, because it has to load every batch above the scroll position first. Try going to the bottom of the page and seeing how long it takes for results to render.
gampleman 4y ago
I think this depends on what kind of content you are scrolling. If you know how many items there are and all the items have the same height, then you can simply set the height of your container for the scrollbar to be accurate. Furthermore you can listen to the scroll event and load the correct items if the user uses the scrollbar to jump to a particular spot. So I think the bigger problem is a) people being lazy and not implementing this properly b) using this pattern where the preconditions don’t hold.
LinAGKar 4y ago
It also means that when dragging the scroll bar, the page will suddenly jump when it loads in more content
- Findecanor 4y ago
  That sounds like a deficient implementation for a scroll bar widget, more than anything else.
chrisweekly 4y ago
Infinite scrolling also immediately destroys the concept of a footer. IME (building websites/apps for a living since 1998) footers are an excellent and underutilized place to put large amounts of supporting materials, expanded navigation links and related affordances. Consider the absurdity of infinite scrolling in a page with a layout containing a footer that can never be reached (perhaps briefly glimpsed before being pushed out of sight).
- Wowfunhappy 4y ago
  I mean, the obvious solution to this problem is to not have both footers and infinite scrolling; you have to pick one.
SnowHill9902 4y ago
Some datasets don’t have a natural order so a position is arbitrary. You just want to iterate over all of it in some useful sequence without arbitrary seek.
psnehanshu 4y ago
On mobile devices the scroll bar is barely visible. So this is a non-issue for mobile.
- spookthesunset 4y ago
  I don’t even think you can grab the scroll bar and move around on iOS… though I kinda remember you being able to way back in the day…
  - djcannabiz 4y ago
    you definitely can, try long pressing on it
amelius 4y ago
> Infinite scrolling is universally bad for one, very simple reason: It breaks the scroll bar. It also breaks the back button, in all implementations I have seen so far.
- spookthesunset 4y ago
  What is “back” on a dynamic page like Reddit, Facebook or even this site? If “back” means “show me exactly what I last saw” it might mean you are showing stale data. I dunno. Shit ain’t easy once you think about it for a while. If all you have is a static unchanging set of items… might as well just use old school pagination! At least in my opinion. It’s when the list of items is constantly changing that things get interesting.
  - jandrese 4y ago
    It might be stale, but it's the content I want to see. The F5 key still works if I care about getting it up to date.
- melagonster 4y ago
  e.g. FB create a search for their website, apparently this is because browser's don't work like user's need. sometimes, I find there are 3 different search box on one FB page, I should remember which one is it...
xorcist 4y ago
It also breaks the find button. The item you wanted to search might get unloaded, or not loaded yet, in some bizarre attempt at optimization when the javascript library resposible is an order of magnitude larger than the actual content anyway. My phone has gigabytes of memory. If you want to present five hundred items in a web shop, just list them and do not bother with any type of pagination, invisible or otherwise.
- spookthesunset 4y ago
  Gigabytes of memory yes but there is load time and render time too. And rendering a 120mb payload of items and their thumbnails before I can even view the top of the page seems… not the best user experience. I don’t think there is an easy answer here. All options have some trade offs.
  - xorcist 4y ago
    That is not how browsers work. The browser will render the viewport immediately, long before the page has loaded. It will also load the visible thumbnails first, unless made impossible by complicated markup of course. Otherwise surfing the web on dialup in 1996 would have been intolerable.
  - _cd 4y ago
    Typically when I serialize data for #index endpoints I return much slimmer payloads than I do in #show endpoints. I recognize that 120mb was an extreme, but you should be able to serialize lists of 500+ items into well under 1mb, with enough data to render your list view thumbnails/links. I always thought the infinite scroll pattern was designed for analytics purposes. So that you can track user engagement. Not because technology constraints necessitated it or that it was a good user experience.
    - NLPlatypus 4y ago
      Just have JS track where the user is?
  - shadowgovt 4y ago
kordlessagain 4y ago
Infinite scrolling is bad because it has ZERO respect for document boundaries. An "infinite" document is a travesty.
- dalmo3 4y ago
  Define document. Is a log file a document? How would you render a log file in real time without some sort of streaming (i.e. infinite scrolling)?
- tsimionescu 4y ago
  tail -f considered harmful?
dreamlifelike 4y ago
This is like saying that electric cars are universally bad because they break the MPG meter… Scroll position as measured by a scroll bar doesn’t make sense for an infinite (or indefinite) document. That doesn’t make an infinite document bad.
dimal 4y ago
It is possible to implement infinite scrolling and maintain the scrollbar height if you know the full number of results you’re going to scroll through and the height of each element (both of which are usually knowable). You simply set the scroller div to elementCount * numElements regardless of the number of elements. Most libraries that provide infinite scrolling do this.
rnk 4y ago
Just don't ever use it.
grogers 4y ago
Scrollbar hasn't been useful for that (at least for me) ever since websites started putting comments after the content (e.g. article, blog)
lupire 4y ago
Expand your perspective: What does scroll bar mean when you have no intention of ever scrolling all the content? "Infinite" scroll isn't breaking anything, the content all broke scrolling inherently.
mikotodomo 4y ago
> One of the purposes of a scroll bar is to indicate how long (and/or wide) some piece of content is relative to your window And how would you do that when there is infinite scroll?

nkozyra 4y ago

I've never been a big proponent of infinite scrolling even when it was the approach du jour in the early Rails/web 2.0 halcyon days. But it can work, it's just that nobody has bothered to tinker with the concept very much. It's either/or when it comes to infinite scrolling and click pagination. The big issues for me are: - it's never really infinite, it's some finite list that will end at a surprising time. There's rarely any context for how much is ahead of you and behind you. Some sites now will give you little contextual hints (ASOS.com for an example) but often it's opaque. - leaving all of your previous items on the page. So I'm near the bottom of the list but I have a 4000vh list ahead Sites that paginate without engagement outside of scroll make the most sense to me, where you get a window of several pages and indication of where you are. [1 2 3] scroll down, [2 3 4]

jl6 4y ago

> One disadvantage of Load More buttons, compared to classic infinite scrolling, is that interaction cost increases - users have to click the Load More button to load more content. Even the small interruption of clicking Load More might make users consume less content and cause them to switch tasks. I think this paragraph lets slip the main reason for infinite scrolling: it encourages users to consume more content, and the "load more" button offers an escape hatch that helps users break out of whatever dopamine-loop they are trapped in. The examples in the article are all relatively benign shopping examples, but infinite scroll is put to far more insidious use on "content" apps. Pagination fundamentally puts the user in control of where they are within a document, and how they want to move through it. I'm not convinced at all by the Google example of infinite scroll with integrated pagination, because I strongly expect that there is no stability to the inclusion or ordering of the items; if you revisit the same page the next day, there's little guarantee that "page 2" will have the same items, making "page 2" meaningless, and the experience just as disorienting.

criley2 4y ago
Facebook feed, Twitter algo, TikTok...
jezzamon 4y ago
I think the difference is whether the content is truly infinite or not. If there's enough content such that you could spend an unhealthy amount of time scrolling, then you are sacrificing your users well being for engagement. If there's a finite amount of items, the "expand the list as you scroll" approach is pretty reasonable. At that point you can't really call it "infinite scroll" anymore

amadeuspagel 4y ago

I'm using a chrome extension to add infinite scroll to HN[1]. It's great. [1]: https://github.com/toddw/hn-infinite-scroll https://github.com/toddw/hn-infinite-scroll

ZoomZoomZoom 4y ago

Infinite scrolling makes the contents of the page unlinkable, breaks searchability and caching. It always makes the experience worse for unclear benefits. What's the problem it solves? Not resending the header and the footer on changing pages? Really?

sodapopcan 4y ago
Pagination also makes things unlinkable, though. Not that I’m not necessarily defending infinite scrolling, but it’s a tough problem.
- daptaq 4y ago
  Not necessarily, if the URL has some absolute position like the ID of the first item instead of the relative number of pages between the newest item and the current page. I believe that Reddit does something like that (of course, only if you sort by new).
  - sodapopcan 4y ago
    It’s situational ya but I was talking more like a product catalogue where items could get shifted around for promotional reasons or whathaveyou.
    - spookthesunset 4y ago
      Not just product catalogs but sites like HN. “Page 2” on this site changes constantly. … and honestly what does “page 2” even mean on a site like this? It’s almost a completely arbitrary distinction because the amount of items on each page is just a magic number. And your “page 2” is nothing more than snapshot in time… sharing a URL for “page 2” to somebody else is pointless because they won’t see the same content you did. Bookmarking “page 2” is pointless since it will change almost every load. Having a search engine index “page two” is pointless because “page two” won’t even say the same stuff by the time it gets exposed in the search page (you see this sometimes with SEO results that link to a “stories” page). In fact you might as well forbid search engines from indexing anything after “page 1” And once you start thinking about it you might just say “fuck it… everything is the same ‘page’”. Instead of a “page” you have a viewport into a infinite, constantly changing pane of content. But since it is impractical to load an infinite list of items at once, you’ve got to load chunks of it on demand. And suddenly you’ve invented infinite scroll.

Aerroon 4y ago

Don't. I have yet to use a service where I prefer having infinite scroll. I always prefer having pages.

d0gbread 4y ago
Do. I have sometimes used services where I prefer having infinite scroll. I sometimes prefer it.
- deleted 4y ago
  [deleted]
- stemlord 4y ago
  In what contexts do you prefer it? As others have said it breaks findability, default browser nav (back then forward again you have to start over or watch it gracelessly attempt to autoscroll back down 600 posts and often fail), renders the scrollbar visually near-meaningless, detrimental to performance, and seems to largely be utilized just to maximize scroll time on visibility driven ad platforms, like all popular social media. What do you like so much about it? Just the miniscule added convenience (that happens to be weaponized against you anyway as stated above)?
  - joegahona 4y ago
    I would prefer my main feed on Twitter to be infinite scroll. Pagination can be "weaponized" too -- note the awful publishers such as WebMD who break articles up into a billion pages, to increase pageviews and hence ad impressions. Incidentally I prefer pagination for taxonomy pages and search-results pages, because it puts navigation more in my hands.
    - stemlord 4y ago
      >Pagination can be "weaponized" too Good point, hadn't considered that.
Kiro 4y ago

deleted 4y ago

[deleted]

seydor 4y ago

The latest ikea redesign is , oh boy how awful. I wonder if they are losing sales already? There is zero reason for inf. scrolling unless we re talking about addictive substances like fb, tiktok etc. Instead , put plenty of entries in each page (it's 2022, we have good bandwidth, people) and use the tried-and-true, browser-compatible pagination. So that i can send a link to a friend, and i won't need to call her to explain how many times she has to scroll down

spookthesunset 4y ago
Sure but on a dynamic site, there is absolutely no guarantee that what’s on “page 2” for her is what you saw when you copied the link. It’s dynamic, after all.

drosan 4y ago

csydas 4y ago

Infinite scrolling isn't so much of an issue but I've noticed a few sites don't seem to handle feeding content into it well even when they undoubtedly have the content to back it. A few image sites I've checked seem to do this pretty poorly and reload previously loaded content repeatedly and it's annoying; I understand what is happening on the server side, but I'm shocked that this happens. Even Youtube does this and the video I just watched is in the suggested videos feed fairy high up on the list, which makes no sense to me. It's also annoying to fill the scroll with unrelated content -- Twitter (as best as I can tell) seems to do this but I'm not sure how far it goes as Twitter spams login prompts after what I assume is the end of the main thread.

mhb 4y ago

Zeno's scrollbar. So annoying.

amaccuish 4y ago

The worst is when there's important links on the footer of the page. You end up trying to race the loading to click the link you need in time.

gcau 4y ago

There's some small satisfaction and fulfillment from reaching the bottom of a page. Each page is like a breakpoint, imagine if books were 1 long page.

_emacsomancer_ 4y ago
You're talking about scrolls (which preceded paginated books).

chrisweekly 4y ago

> "Infinite scrolling is also not a good fit if you have a large user group from areas with low bandwidth or if your website is visited frequently by users with accessibility needs." Good thing mobile is a passing fad and a11y doesn't matter. /s

ivanjermakov 4y ago

My biggest issue with infinite scrolling is that content position is not preserved in the URL. Page reload/history back returns to the top of the page and specific position cannot be linked

ozten 4y ago

They should do usability testing on Google’s solution before promoting it.

donohoe 4y ago

My confidence in the guidance from this article was shaken when it talked about “Increased page load” and “Poor SEO performance” issues. Their points are wrong and border on naivety. Page load issues can and should be nonexistent fire to loading via xmlhttprequest/fetch ahead of time, and SEO issues are minor and typically negated by sitemap XML. There are plenty of other best-practices to address lingering concerns.

gernb 4y ago

I think my only problem with infinite scroll is poor implementations. If I click a link which takes me a new page and then click back I need the page to go back to the state it was, not jump back to the top. Not sure which sites I've had that issue on recently I also need it not to crash. I haven't tried it in a while but Patreon used to have the issue that I'd sponsor some content creator and then try to go through their 200 posts. Pateron's infinite scroll is manual with a "load more" button that adds to the page. Let's say each click adds 20 posts. So I'd see 200-181, then plus 20 so 200-161, then plus 20 so 200-141, and say 101 the page would F up. The only thing to do was start over at 200 and click more 6 more times. IIRC it's basically if you expanded a few posts it would F up so starting over from 200 and not expanding posts would get you past the point you made it last time.

dqpb 4y ago

OpenAI Dall-e uses infinite scrolling to display your saved images. If your window is large enough to not have an active vertical scrollbar, it will never load all your images. So, instead of pagination, you have to resize your window to the size of a phone and rage scroll downward to load more images. Odd UX choice.

janmarsal 4y ago

I hope the answer is never.

franze 4y ago

for a major job portal we tested infinite scrolling, the main KPI "job posting views by job seeker" went down after a honeymoon period of ~2 weeks - compared to pagination for a shopping site, infinite scrolling on average improved item views and checkout - average over all product categories, but not all. no honeymoon effect was observed

oblak 4y ago

I can't think of a single good reason to have infinite scrolling bar but I have been asked to implement them multiple times. Bad, bad, bad... for the user.

peanut_worm 4y ago

The only time I would use it is if I wanted to break the scroll bar, break the back button and make the page unlinkable. So, never.

repple 4y ago

A benefit of infinite scroll bar is that it takes up less mental overhead by reaching content with fewer taps or clicks on target on a page.

croes 4y ago

Why infinite scroll and pages together?

sejje 4y ago

Just have a user preference toggle. Infinite scrolling IMO is part of the dark patterns that are attempting to collect all of your attention. Having the mental break of waiting for a new page load is a significant change for me--I'm way more likely to quickly step away from paginated scrolling than infinite.

shmde 4y ago

I remember browsing a website where I wanted to check the about us section footer. Every time I reached the bottom to click on the footer link it triggered the infinite scrolling. Felt like I was playing cat and mouse. Horrible.

Cyberdog 4y ago

I picked up a client site which uses infinite scroll, so though I didn't do the original implementation, I've done a lot of work and improvements on it. It's basically a site which publishes video game strategy guides, so it gets a good amount of search engine traffic from people searching things like "how to beat X boss" or "how to find Y item in Z level," and the site owner is very interested in making sure the people who hit those pages can smoothly find the other pages (and the ads thereupon) in a guide. Here's some thoughts on the problems and challenges we've faced. One, as mentioned in the article, the memory pressure and exhaustion issues - these were the biggest problems when I first started on the project. These were especially a problem on mobile, and a problem as guides grew in page count, page length, number and size of images, etc. To resolve this, after loading a new page, we basically do a rough count of the number of words in all guide pages currently loaded, and if it's over a certain number (I can't recall what it is off hand; 10,000, maybe), we start deleting pages in the opposite direction that the user is scrolling until we're under again - so if they're scrolling down, we remove the "previous"/"up" pages, and vice versa. (Gotta make sure to not actually delete any of the pages that are currently visible in the viewport, though…) Oh, I guess I should mention that too; we actually have it working in two directions, so when you land on a page from a search engine result, the requested page loads, then we also load in a previous page and a next page. If you start scrolling up and getting near the beginning of the previous guide page, we again load another page above it which you can keep scrolling into if you'd like. That "two-way" infinite scroll is probably a bit more difficult to implement than just doing it in one direction. Anyway, a huge problem that happens when you're adding and deleting pages like this is that the viewport would jump around, making it really annoying to try to read things. This is especially a problem when scrolling up and getting that page added above the existing content, or when scrolling down and a page above the existing viewport content is deleted. I can't remember the fine points of how I solved this but it basically involved measuring the height of pages as they get added/removed and then offsetting the location of the viewport by that height immediately after adding/removing the page such that it appears to the user that the jump never happened. This also means we had to make sure images on all pages have width and height attributes so that they don't cause repaints which reposition things as they load. Same with ad slots. This sort of math and trying to figure out what the browser is doing got hairy quickly and I always bristle when they want me to go back and touch up something to do with this code, but fortunately it's now in a state where that rarely happens. Off the top of my head, I recall that another trick we're doing is that if the user clicks the link to another guide page, we capture that click and see if that page is already loaded, and, if so, scroll the user to that guide page rather than reloading the whole thing. In the end, as a developer, this part of the code is not at all fun to work with, and as a user, I don't particularly like normal browser behaviors being hijacked for the purposes of locking in my attention like that. But I'm a step or two away from having to worry about user engagement analytics and all that nonsense, so I accept that the bosses have different priorities than I do and I do what they tell me to do in the best way I can do it. That's what they pay me for after all. Edit: Also, we use the browser history API to change the URL appearing in the location bar when the user sufficiently scrolls on to a certain guide page, so for the most part, bookmarking, back and forward buttons, the "History" menu, etc all work as expected.

Marazan 4y ago

To answer the two questions: Never, Always.

ChoGGi 4y ago

When to use it: Never When to avoid it: Always

flenserboy 4y ago

There should always be an option to paginate. As others have said, the user-hostility is significant on any infinite scroll — one side-product of this is the refusal of apps/sites such as Twitter (sometimes) or Facebook to stay where the user left off, reloading the page when the app or page is returned to. (One other truly hostile aspect of such sites: the user's choice of display order, especially on Twitter, is rarely respected, returning always to what the site believes to be most advantageous to itself. User settings should never be changed remotely, or without user approval.)

jimmySixDOF 4y ago

Infinate Canvases are better than Infinate Scroll. Change my mind.

WaitWaitWha 4y ago

Never; the time to use infinite scrolling is never. Specifically, infinite scrolling, where the remaining/invisible data is not loaded until getting towards the end of the loaded segment. For the visually impaired infinite scrolling breaks search and text-to-speach tools. A better solution is give the option to paginate with the set size, 25, 50, 1000, or whatever; or load the entire list in one shot.

deleted 4y ago
[deleted]

awinter-py 4y ago

> lack of landmarks to help users orient themselves. With pagination, users may remember the page that an item was on and that an item was close to the top of the page or towards the middle, but in an infinite list of items, it is hard to remember the location of any specific item and return to it. > especially disruptive for the user experience when websites do not save the user’s spot in the list during pogo sticking. Frequently, users will click on an item in the infinite list or feed to go to its detail page and, when they come back, using the Back button, they will find themselves at the top of the list ^ cmon this is just the design spec for the twitter web UX

lupire 4y ago

> Even the small interruption of clicking Load More might make users consume less content and cause them to switch tasks. In other words, infinite scrolling promotes addictive behavior.

dustinmoris 4y ago

When to use it: never

nashashmi 4y ago

After reading the comments and taking everyone's input, here are a couple of points: * infinite scrolling turns webpages into web apps yet not everyone likes or expects web apps; * infinite scrolling fails to tell people when they reached the end and this is frustrating; * infinite scrolling fails to tell people how far along they have consumed the content, or how far back is the top bar; * infinite scrolling breaks the basics of UI tools (no scrollbar, no end key, no home key) * infinite scrolling should never be other than a gesture for more (scroll for more) * infinite scrolling should still allow for going "back" e.g. either it scrolls back up and/or allows for going back to the beginning. * infinite scrolling should have an "end" e.g. a bar at the bottom that phases away when scrolling further down and then appears at the next end. * infinite scrolling is a bad habit for more, and may be should be discouraged e.g. electrocute the user every time he asks for more /s I hope you agree.

Schroedingersat 4y ago
There's also the bit where you put important contact, privacy, or similar information below the infinite scrolling element so it's only reachable via debug tools or turning the internet off (the latter doesn't always work because it often results in an 'oopsie wooopsie somefing went wong' error popup).
deleted 4y ago
[deleted]

weare138 4y ago

Never. Always.

ajwaxman 4y ago

Not when you have a footer that you want people to be able to click. Can't stand when infinite scrolls make footers impossible to interact with!

cudgy 4y ago
Maybe when presented with such an unfortunate design you may be able to search the items for a nonsensical search term, resulting 0 items in the list. Then, the footer should be visible.

iio7 4y ago

Infinite scroll is one of the several cancers of modern web development. It breaks the scroll bar, it ruins search on the page, the back button stops working, it's a pain for people with accessibility issues. Never use it!

Hippieblog 4y ago

HereIGoAgain 4y ago

When to use it: When you give an option to opt-out.. FULL STOP! If I had my way though... never!

alexmingoia 4y ago

It doesn’t have to be either or. Provide a toggle for the user to choose their preference.

PostOnce 4y ago

Not only does archive.org have infinite scrolling... It has no pagination interface for regular people! AND YET! It has pagination on the backend! It's a URL parameter! So I emailed them. At first, they didn't understand, they said the design team wanted infinite scroll, so I said, that's fine, infinite scroll is fine, that doesn't preclude pagination, in fact pagination is already implemented on the backend. I offered them a couple of possible 5-minutes-to-implement unobtrusive designs and also offered to do it for free. All it requires is links since the backend is done... https://i.imgur.com/R12ckYU.jpg https://i.imgur.com/R12ckYU.jpg (the proposal) They don't care. They choose to die on this hill for absolutely no discernable reason; regular users who can't edit url parameters be damned. I love them and their mission so much, but good lord, this one particular decision is so stupid. Just put the damn pagination buttons on the site so regular people can use them, they don't know how to use URL parameters! edit: If the value of pagination isn't self-evident, one of the values of pagination is that it allows you to go back to where you were a different day or on another machine, instead of scrolling through 70+ pages of stuff you've already seen... Or, perhaps, to skip 50 pages to find much older/newer/more interesting stuff, etc...

cudgy 4y ago

“Frequently, users will click on an item in the infinite list or feed to go to its detail page and, when they come back, using the Back button, they will find themselves at the top of the list, having to scroll down through screenfuls and screenfuls of already seen content.” This is such a common problem with web sites that I have reverted to habitually clicking “Open in new tab” when clicking a detail link on these types of screens to avoid this issue. How this type of terrible UI is allowed and even commonplace on websites (and some hybrid mobile apps) speaks volumes about the company’s regard for its users.