12 ms·
Google’s suggestion for a better infinite scroll?
- jonshariat 13y agoMore explanation on their blog: http://googlewebmastercentral.blogspot.com/2014/02/infinite-scroll-search-friendly.html http://googlewebmastercentral.blogspot.com/2014/02/infinite-...
- khyh 13y agoThanks. I could not find what was new witouth explanation.
- donutdan4114 13y agoLove this. If only Hacker News and Reddit would implement it.
- iancarroll 13y agoDoesn't RES have this?
- BlackDeath3 13y agoRES uses infinite scrolling of some sort, yes.
- aylons 13y agoActually, a pretty decent infinite scroller, with markers so you know which page you are (and this makes it a lot easier to navigate).
- Nagyman 13y agoIt intelligently remembers where you were if you click a link and then back; it restores your previous scroll location. Pleasantly surprised by the behaviour as I usually do not enjoy infinite scroll.
- nandhp 13y ago... and Google.
- criswell 13y agoIt would be nice to get rid of that first page mentality. I think it would do some really great things for the not so big guys.
- coin 13y agoPlease do not implement infinite scroll. I find it super annoying.
- izolate 13y agoNo. Grab an extension like HN Special or RES if you want the functionality. Infiniscroll is an evil creation, made worse by developers who insist on creating a footer at the end of the scroll view, just out of reach so that you can never quite get to it.
- meritt 13y agoI don't even know how to get a second page of HN results. Never had the need. Infinite scrolling creates a daunting never-ending feeling. I like the sense of accomplishment after scanning/reading through a fixed list of results. Infinite scrolling makes that carrot forever out of reach.
- recursive 13y agoIt's the "more" link at the bottom.
- lubujackson 13y agoIt still jumps around if you hold and drag the scrollbar - always my complaint with these.
- jonshariat 13y agoDitto. I wonder if that can be remedied by preloading a page or two and holding it for when the user hits the next page
- dclara 13y agoGood idea. I think it's better than infinite scroll, but cache one page before and one page after to improve the page loading more smoothly using AJAX, just don't push me to the next page until I hit the "next" button.
- usaphp 13y agoI wonder how many people do hold and drag the scrollbar, I am so used to scrolling using a touchpad on Mac and mousewheel on PC, so I never even touch a scrollbar.
- ef4 13y agoYou'd be surprised. I've done many user tests and training sessions only to inwardly wince every time the user painstakingly does that. (And this on their own hardware, with their own mouse they use every day at work.) After you explain it, they say "wow, that's neat." And then promptly forget it and start dragging the scrollbar again.
- Lagged2Death 13y agoI was until recently a devoted scroll-wheel-user. But I'm starting to see the first signs of arthritis in my fingers (far too early if you ask me) and scroll wheels are becoming increasingly uncomfortable. I've been surprised to find that dragging an old-fashioned scroll bar is actually a faster and more accurate than the wheel if you're scrolling by more than a page or so.
- tedmiston 13y agoThis reminds me a lot of ScrollSpy in Bootstrap [1]. 1: http://getbootstrap.com/javascript/#scrollspy http://getbootstrap.com/javascript/#scrollspy
- dj-wonk 13y agoFavor: could someone share an intelligent (or at least in-depth) write-up of the pros/cons of infinite scrolling? Most of what I'm finding on the web is content farmy. Also: at what point is memory usage worth worrying about? Scrolling for pages on end has to be tough on a browser.
- elicash 13y agoHere's a good piece about why it didn't work at Etsy: http://danwin.com/2013/01/infinite-scroll-fail-etsy/ http://danwin.com/2013/01/infinite-scroll-fail-etsy/ A presentation that goes into some of these results is here: http://mcfunley.com/design-for-continuous-experimentation http://mcfunley.com/design-for-continuous-experimentation
- pauletienney 13y agopro : good for mobile users - con : no footer
- dkurth 13y agoAnother possible pro (from the site-owner's perspective) is increased user engagement. When you are quietly loading more content all the time, it's easier for the user to continue to say, "I'll just look at one more post." On the cons side, as others have mentioned, if you navigate away from an infinitely scrolling page, then click the back button, you often don't land in the correct place.
- icebraining 13y ago"good for mobile users" Well, maybe; mobile browsers are often more constrained in terms of RAM. My Android phone only has 256MB, so infinite scrolling tends to cause the browser to bail out.
- Elepsis 13y agoMost sites that implement infinite scrolling effectively "unload" content that's far enough off the screen, much like they delay-load content that's below your scroll area. The net memory usage shouldn't be dramatically worse.
- PeterWhittaker 13y agoThe permanent menu - with locator options - at the bottom is brilliant.
- evan_ 13y agoUnless you scroll a page at a time using Page Down or Space. When I'm at the top of the page, the last visible item is "Live Room". If I page down once, the first visible item becomes "Black Refraction". I never even see that there's an item called "Live Room Out", it's obscured first by the footer and then by the header.
- eyesee 13y agoI've wondered if browsers couldn't reduce the paging distance by subtracting the height of header and footer regions on the page (as identified by position: absolute?). Something tells me it would not be so simple.
- evan_ 13y agoit should be possible for the page to fix, I think, by listening for a pagedown or spacebar press and changing the scroll position based on the height of the viewport minus the height of the stuff that obscures the viewport. I think it would be really difficult for the browser to come up with a solution that would work anywhere.
- Aoyagi 13y agoI suggest not using infinite scrolling. It's annoying as hell when I want to get back to where I was or just browse some older entries.
- digitaltoad 13y agoDoesn't this still effectively break the back button or at least the users view of the back button? To the user although there are visual hints, he/she hasn't left the page. Scrolling down the page however creates multiple history entries.
- iambateman 13y agoIt does. This would be perfect if clicking the nav didn't cause a page reload. I expect the page to go back to an entirely previous page, if I hit the back button in this case. That would not be the case if the sections of content were different from one another. - A super-scrolling page with different sections of content might keep the back button functionality the way it is here. - Homogeneous content like Facebook posts should not incur a back button through the pagination. IMHO. But this is super cool otherwise.
- DangerousPie 13y agoI don't think it does, at least not on Firefox. When you scroll down the URL just updates without a history entry being added.
- timmclean 13y agoNope, this seems to use history.replaceState, not pushState: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/M...
- digitaltoad 13y agoI was mistaken. I must have clicked through to a page.
- huhtenberg 13y agoThis also needs to keep only N pagefuls above and below the page cut. E.g. if N is 2 and I'm on page 5, then it would only have pages 3-4,5,6-7 in DOM. This would ensure that users get the same scrollbar range on page 5 regardless of whether they infi-scrolled themselves there or just clicked on "page 5" in the index.
- deleted 13y ago[deleted]
- _frog 13y agoI really liked Discourse's approach to infinite scrolling[1], it updates the URL as you go with the History API's replaceState() function so you can safely navigate away from the page without losing your position. [1]: http://eviltrout.com/2013/02/16/infinite-scrolling-that-works.html http://eviltrout.com/2013/02/16/infinite-scrolling-that-work...
- jonshariat 13y agoIf you look at the URL bar in google's example it does that as well.
- prawks 13y agoThe difference is that Discourse does it on a per-item basis, Google's on a per-page. A small implementation detail.
- navs 13y agoWell with discourse you want to go to a very specific comment in the thread so doing it per item is best. But that's not for every use case.
- Flimm 13y agoThe difference is that it doesn't break the back button! Clicking back takes me back to HN, not back a page.
- yeukhon 13y agoAlso, visually, the up page# down could be shown on the right hand side. [http://try.discourse.org/t/discussion-happens-so-much/127/98 http://try.discourse.org/t/discussion-happens-so-much/127/98] and with a bigger font. that's more clear. putting it in the bottom is hard to read.
- berns 13y agoIt's not without problems though. It breaks the incremental find in chrome. When the URL changes, the find dialog gets closed.
- kzahel 13y agoOne of my favorite features of infinite scroll is how it can make clicking on the footer of a page nearly impossible. E.g. try clicking on "About" or "Careers" on the bottom of http://venturebeat.com http://venturebeat.com
- toxik 13y agoThere's a link to the footer, and the footer links are in a fixed footer that is always visible. Not super-pretty but I think infinite scroll just means no footer.
- jfoster 13y agoOn Facebook there is a footer, and seemingly no way to get to it unless you find a short enough page or manage to get to it faster than the infinite scroll can load.
- garethadams 13y agoAll of the links in the footer are also at the bottom of the right-hand main column
- jfoster 13y agoThank you for pointing that out. I think that area might have been a blind-spot for me. (immediately below the ads)
- fiatjaf 13y agoYou would be happy to live here in my town where the faster internet connection possible is 700kbps and you have plenty of time to click on footers of pages while the infinite scroll is loading.
- syntern 13y agoThis is an implementation choice, and not the failure of infinite scrolling: you could embed the infinite scrolling inside a DIV and have a visible footer DIV underneath. Or alternatively, implement a sticky footer, or e.g. a fixed footer that appears on certain conditions.
- watwut 13y agoReminds me how much I dislike infinite scrolling.
- davb 13y agoI'm surprised at how many people here seem to like infinite scroll. I personally can't stand it. Imagine having a book where no matter how much you read, it never seems to end. No milestones, no sense of progress. Just page after page after page. It just feels... icky.
- mindrag 13y agoThere's an elegant way to add some sort of progress indicator to infinite scroll. I just haven't figured it out yet :)
- Crito 13y agoHave a little screen overlay that displays how much memory your browser is using. As it climbs higher and higher, you'll know that you are making progress.
- dclara 13y agoYou're so funny. I guess they will make a fix number of items in the memory for the DOM.
- dclara 13y agoThey do have a page list on the bottom and show which page you are on.
- anaphor 13y agoSure but a progress bar or "page" counter at the top would alleviate that somewhat.
- nfoz 13y ago... isn't that part of what a scrollbar is for?
- jfoster 13y agoI think it solves a business problem rather than a problem that consumers necessarily feel. Google have good reasons (lessen effects of SEO & boost ad impressions) for not wanting all of their traffic to go to the very top results or the first page. Infinite scroll encourages users to keep going. It's similar to how certain demographics will scroll through Pinterest for hours. It removes the boundary where someone might say "OK, that's the last page I'm going through."
- geminitojanus 13y agoInfinite scrolling like this works pretty well if you want to do scrolling for, say, search results. It's all around horrible for something like Twitter, IMO. The problem with Twitter is that it's conversational, and it's showing the newest part of the conversation at the top. So instead of having a nice conversation history: Hi! Hello to you good sir. How are you doing today. I'm fine. You get: I'm fine. How are you today? Hello to you good sir. Hi! ...and you lose the navigation state, so it's impossible to tell where you were at last on Twitter except by memory. tl;dr: don't copy Twitter's UI. Please.
- ivanca 13y agoTwitter already fixed this in iOS (you always apparead where you left so you read everything in order), is just taking them a while to fix it in the browser.
- duncans 13y agoThis dentist had it all figured out 3 years ago http://tumbledry.org/2011/05/12/screw_hashbangs_building http://tumbledry.org/2011/05/12/screw_hashbangs_building Discussion: https://news.ycombinator.com/item?id=2592741 https://news.ycombinator.com/item?id=2592741
- thatthatis 13y agoSometimes there is no substitute for the insight of an outsider saying "that makes no sense, this is how I expect it to work"
- jakub_g 13y agoI would feel kind of okay with infinite scroll if it wasn't creating memory problems. Especially on image-heavy (tumblr) / DOM-heavy (facebook) pages. If I browsed the web in 90s mode (one window, one page opened) that would maybe work, but when I have dozens of tabs opened, youtube playing in background and I start browsing an endless memory-hungry page, my laptop (3 GB RAM) starts dying. Another issue is the one mentioned in the other subthread here, often when you accidentally click some link on the page, you can't go back, it'll start loading everything from scratch. Happens to me e.g. on facebook on IE Mobile (apparently they don't use pushState). This effectively means I have to open links in a new tab.
- smoyer 13y agoGoogle's Wave used (and reused) a fixed number of DOM elements that were filled by fly-weights containing the data to be shown on that page. While the scroll bar showed the appropriate position in the thread, there was a limited amount of data for the items above and below the visible set, and an even more limited number of DOM elements that could be filled with data.
- jakub_g 13y agoThat's interesting. So whenever I scrolled a lot down, and wanted to scroll to the beginning, the related data was re-fetched? Or it was stored in the data model, but just not displayed in the DOM?
- smoyer 13y agoI think the message tree was stored in its entirety assuming it wasn't too big. But each of these messages was significantly smaller than the memory footprint of the DOM element in which they would have been displayed. The efficiency of putting new content into a DOM element at the bottom of the list (below the visible content) and reordering it within the parent (so it was at the top was significantly faster than deleting that bottom DOM element and adding a new child element at the top. Give me a few minutes and I might be able to find the Google I/O talk where this was described ... Wave used GWT to generate its Javascript but it's a great technique for browser-based clients regardless of how you end up with your Javascript. The method of "recycling" DOM elements is described in minutes 20-25 of this video: https://www.youtube.com/watch?v=T_CLzgEL7FA https://www.youtube.com/watch?v=T_CLzgEL7FA. I can't find the reference, but I also remember hearing that they used some preloading to make other operations on the screen react much faster (e.g. loading the first 25 messages for each wave headline in the list).
- sergiotapia 13y agoI hate infinite scrolling with a burning passion. You're reading the article and scroll down 2 pixels too far and WOP you're loading something again. Qz.com is one of the worst offenders here.
- deleted 13y ago[deleted]
- donohoe 13y agoYou're welcome. In this case I called it pre-loading (it's not infinite either). You get to the end of an article and we have the next one ready for you. No need to make a choice on what to do next, just follow through if Headline is of interest. Not perfect, but those who use it most do love it.
- jolt 13y agoWhy is this so hard that even Google can't get it right? If a page has little to no other content than the content in the list, why is it worth the hassle?
- mayneack 13y agoOff Topic: I don't know what the connection between the things the elements linked is, but many of them have single digit view counts: http://scrollsample.appspot.com/item?id=33 http://scrollsample.appspot.com/item?id=33
- jolt 13y agoIts easy when you are just dealing with "text elements" of equal size. But if you are loading images or injecting content in the list elements, the back-button starts to break.
- ericgoldberg 13y agoStumbleUpon has been doing this for a couple of year. I always liked the built-in pagination.
- RRRA 13y agoSo is there a way to use any of those devices coming out (including health monitoring!) without leaking everything to the cloud? I'm getting really annoyed that none of those will actually give you the tools to dump your data yourself in total privacy. (And no, I don't care how many step you had today!)
- wdewind 13y agoI don't think this fixes what is the core issue with infinite scroll: when I click into a subview and then press back, I am not returned to the same place where I was before. iOS, for instance, handles this extremely well by literally stacking the new view on top of the old one rather than changing the contents of the view. This implementation attempts to fix it, but only gets close, and so I have to re-contextualize myself every time I press back.
- bicknergseng 13y agoI would argue that Airbnb's old Infinity.js is way better than this. Smoother and has a fully functioning scrollbar still. This one's pretty janky imo.
- faddotio 13y agoDesigners: please stop it with infinite scroll. They are painful to work with and work around. When a service switches to infinitely scrolling lists, I stop using it.
- louthy 13y agoDesigners: Please continue to use infinite scroll where it's appropriate, it is much better than pagination much of the time, especially on mobile devices. When a service sticks with pagination (like Amazon's movie service) I stop using it.
- stickhandle 13y agoI'm not a fan of infinite scroll in the main, but there are use cases for it. I've often thought search results would be a good candidate. The don't suffer from the need to provide user feedback on progress of completion. I also think it provides Google with more ad opportunites including placing them within the infinite scroll at some interval, and, of course, the highly prized sticky ad ;) [edit - wanted to add that it would also lessen the blow of being on p2 ... in fact I would expect search users to frequently get deeper into the results yielding an improved feedback loop]
- Springtime 13y agoI've been using a userscript [1] for the past year that adds the feature to search results and the like. Huge improvement, and with a little custom CSS styling the additional pages are appended more seamlessly. The feature I appreciate about this particular userscript is it's clear where the page breaks are, and adds links to each newly appended page, allowing the user to link directly to them - which would be useful to see in more infinite scroll implementations, and seen used in the main HN link. [1] http://userscripts.org/scripts/show/121191 http://userscripts.org/scripts/show/121191 [1a] http://userscripts.org/scripts/show/164782 http://userscripts.org/scripts/show/164782
- MaxwellM 13y agoIngenious. Now if only I could Ctrl-F through unloaded elements I'd be a happy camper.
- brianbreslin 13y agoWhy do so many designers/developers of pages with infinite scroll forget they put their footer menu in there and it is now inaccessible due to the scroll ?
- dclara 13y agoI'm also concerned about the footer menu, may it be sticky or keep it on the bottom not shown. Looks like most of the sites have the latter. Maybe the footer is not that important, just to embed more links.
- EGreg 13y agoWhy is the title mentioning Google?
- stonogo 13y agoFucks up my scroll bar -> will not use
- eeasss 13y agoTelerik's RadGrid has this same feature for quite some time http://demos.telerik.com/aspnet-ajax/grid/examples/performance/virtualization/defaultcs.aspx http://demos.telerik.com/aspnet-ajax/grid/examples/performan...
- nroose 13y agoIf you are someone who actually likes to have some control over what is happenning on your computer, and if you want to have some organization when you are dealing with a list of things that is pretty long - hundreds/thousands or more items - then pagination is useful. And continuous scroll is tempting/seductive, but ultimately flawed.
- islon 13y agomy suggestion for infinite scroll: make it finite.
- weland 13y agoI would like to add a suggestion for better infinite scroll: ban it.
- KineticLensman 13y agoMy problem with infinite scrolling is that it is very hard to go straight to the last element. My example: A Flickr user with over 1000 images in their photostream. photostreams are loaded most recent first. But what if I want to see the first picture they submitted? Virtually impossible.
- flurdy 13y agoInfinite scroll is fine, if it remembered state when you click on a link/article and go back to the scrolled page. They rarely do, and you have re-infinite scroll to wherever you where before. So frustrating every time.
- pooshoot 13y agoI can't believe all the negative comments on here. If you have enough tabs open that infinite scrolling starts to bog down your browser, you should probably find a girlfriend/boyfriend and get out of your mom's basement or replace your computer with one made after 2003. Infinite scrolling, especially as shown here, is fantastic because it doesn't require endless hitting of the back button to get to the original post. The only time I've had a problem with infinite scrolling is for facebook friend purging and even then, who cares!?! If you don't like sites that use infinite scrolling, don't use those sites. This hybrid pagination/infinite scroll option looked awesome to me.
- jimeuxx 13y agoI'm not a big fan of infinite scrolling, and when it breaks standard desktop functionality like CMD + Up Arrow, as in the case of Google image search, I could really do without it.
- Ryel 13y agoInfinite scroll is about making it as seamless as possible for the user to get new information. How many times do you go on a paginated page, get to page 5 and say "okay, after page 6 I'm done." Then you either leave or continue on that process... Infinite scrolling takes away your perspective of exactly how much content you're consuming and how much time you may be wasting. It is only until youre done and you attempt to scroll back up that you realize how much time youve spent. My side-project now is very much like Tumblr/Pinterest and I found this post interesting because for awhile ive been trying to find the best middle-ground between infinite scrolling and some form of incremental, pagination-styled display of content. Honestly I'm stumped but for right now my best solution is to load about 20 items, lazy load another 30, and use pagination for the rest. Although I've been thinking about just displaying an infinite scroll toggle switch on the bottom of the viewport after the user reaches the end of the initial item list.