Ask HN: Please stop making infinite scrolling websites

To my knowledge, the most prominent analytics-based example of where infinite scroll was harmful comes from Etsy. My most read personal blog post [1] was a summary of a great Etsy talk given by then-engineer Dan McKinley on "Design for Continuous Experimentation" in which he mentioned how infinite scroll failed at Etsy:

http://mcfunley.com/design-for-continuous-experimentation

One of the examples he uses was how Etsy spent months engineering an infinite scroll feature in their product search -- without any debate over whether it would be successful (at that time, just about every big site, Tumblr, Facebook, Twitter, etc had implemented it)...When they finally finished, their A/B testing found that infinite scroll had a profound negative impact on user engagement. This talk was from a couple years ago, I rechecked Etsy and it still looks like they haven't gone back to infinite scroll.

McKinley said they didn't know exactly know or investigate why infinite scroll (he said that there didn't seem to be any technical problem) caused this negative effect, just that it was undeniably a negative effect, and it was a lesson in how you should not just jump into a big project without experimentation at every step. My theory is that when it comes to finding for what you are intentionally searching for (and this applies to Google and Amazon) and then acting upon it (i.e. a purchase), infinite scroll may seem more helpful but in reality, it may cause the user to get "lost"...The user might see something interesting in the first page of results, but rather than stopping to check out those results, the infinite scroll tempts them to keep going and going...and after having consumed several pages of results, the user forgets that there were good things at the top, and never returns to them.

edit: that said, when it comes to just browsing a stream, i.e. leisurely discovery for Facebook/Twitter/Tumblr...I think infinite scroll feels like the right feature.

[1] http://danwin.com/2013/01/infinite-scroll-fail-etsy/

My pet peeve are infinite scrolling sites with a footer that is the only place to find the contact/jobs/etc links. It becomes a race against your browser.

Couldn't you temporarily disable JS to resolve this?

EDIT: not saying it's optimal, just that it ought to at least get you to where you could apply for a job.

An average user wouldn't be able to, websites shouldn't do this in the first place.

Not sure you'd want to apply for a job at a place that makes broken web sites.

Wouldn't want to work there myself, but to somebody on HN who's trying to "race their browser" it seemed a feasible workaround.

That was a bit of creative license. I'm aware that's not exactly what is happening and know that there are workarounds (which I use), but it definitely can feel like that, and given the context of the thread, I thought it made sense.

Sounds like they need help, no?

Where's the pause JS button ..?

You could stop by adding a breakpoint, for sure, but it seems like you're suggesting there's a method accessible to normal users? An addon. (I'm on FF but interested if there's such an option in any other mainstream browser).

The solution is to choose between a footer with links and infinite scroll. It's really simple, since choosing one should preclude choosing the other.

Yes. This is one of my methods for dealing with it. Another is to just inspect the source and look for the relevant href. Point is, don't have a footer with links if you are using infinite scroll!

This is why I prefer to have infinite scrolling sites with a nav bar at the top, so that I don't have to scroll for ages

Just because people implement them poorly doesn't mean they are inherently bad. Scrolling is easier and more enjoyable than clicking. However, basic features like back/forward remembering your location is vital. And it is probably a good idea to provide some pagination tools even with infinite scrolling.

Discourse does a pretty good job of it. http://www.discourse.org/ or if you just want to try it http://discuss.emberjs.com/t/ember-cli-the-ramcat-way/7666/1...

They aren't inherently bad but they are inherently easy to misuse and implement poorly. Which actually does support restraint in deciding to use them.

One thing I see frequently which is preposterous is infinite scroll on pages that actually have a footer which is pretty much impossible to access.

Pretty sure Facebook used to do that with the footer.

The workaround to get to the "developers" link was to mash the escape key while scrolling. Those were the days.

YES! For sometime Facebook had it! I needed to access the FB's dev section and it was like a clicking contest. When they moved it to the right, I had already memorized the website.

Browsers do not and should not have infinite memory. Each time an infiscroll website scrolls down, more memory is consumed. On my iPad1, that's a guaranteed insta-crash for Safari.

What is a crash on an iPad1 is a major slowdown on a netbook. In five years when web pages get even heavier, it'll be a crash on a netbook too.

Couldn't you use a script to remove elements at the top of an infinite scroll page? Would that remove it from browser memory?

Some implementations do this, but then it breaks ctrl+f.

Not necessarily... just like how another poster mention's Tumblr's use of empty divs to keep the scrollbar position happy without sucking up resources, couldn't mixed-resource divs be replaced with text-only divs? Then search works fine, and memory still doesn't balloon (much).

Eg:

  <div>Cool meme: <embed>...</embed><img></img></div>

Goes to:

  <div>Cool meme:</div>

Even more work in implementation, admittedly. ;)

That's The Right Way™ of doing it.

This seems like the way to do it. You basically have the browser load in pages of content, keep x pages above the viewport, y pages below ready to scroll on to, then you're holding x+y pages. You remove pages when scrolled far enough past and add pages to keep y-1 pages in hand. The problem then is that a user might scroll through a lot of content and then choose to scroll back - eg if they're sampling for quality first and then selecting on a subsequent pass.

How do pdf viewers handle this wrt memory conservation. If you have a 1000 page pdf, scroll through a couple of hundred pages (using a infinite scroll type view), what does the viewer do with viewed content, it has to cache it somehow, right?

Maybe the infinite scroll needs to be more accomodated by the browsers rather than just not used. I know in certain circumstances (image search, reddit on mobile) that I find it useful.

I think PDF viewers cache a low(er) resolution rasterized version of pages. And are simply much faster, because - as far as I know - PDF has rather precise position and dimension data already included, so there are no need for further passes (no reflows).

Yes, removing elements from the DOM will allow browsers to free the memory.

Some site (Tumblr I think) did something like this a while ago where it would do something like this, it was very fluid:

1. When a new section has been appended to the bottom of the page…

2. Calculate the current height if the topmost div and save it explicitly as the div's height…

3. Then remove all content from that div.

4. And when another new section has been loaded and appended do the same thing, but with the second topmost and so on.

Thingiverse does this: http://www.thingiverse.com/search/page:1?q=puppy&sa=

Notice that when you scroll, the page value changes, and when you scroll back up, the browser re-fetches the content.

This is exactly what tumblr does, it has infinite scrolling on the dashboard and when elements go past the top of the page they get replaced with a div with width and height equal to the post they it is replacing.

Oddly enough, there's a way of providing this in a discrete fashion: "next page".

There are plenty of scripts to only display the ones which are visible. They get hidden as they are scrolled off screen.

Agreed - nicely done

I am really curious is there is data on "Scrolling is easier and more enjoyable than clicking". That seems like it requires evidence from trials on a variety of different types of webpages. I can imagine if you are browsing visual items like clothing, art, memes, etc the scrolling flow is great. However when reading long documents or forums it may be the opposite.

If the "infinite" scrolling goes beyond a few pages, it turns the browser into molasses. If I accidentally navigate away, which happens all the time because terrible UI correlates with infinite scroll, when I go back then it rushes to reload everything which bogs down the whole system.

Just give me the option to turn it off or something.

I think "infinite scroll" is best when implemented as scroll triggered pagination. An example of this hit hacker news awhile back:

http://scrollsample.appspot.com/items https://news.ycombinator.com/item?id=7314965

yep if you check my Google source there is the same link within the ZDnet article

Hmm...that's kinda yucky. Too much extraneous chrome for very little gain.

Yes, I agree infinite scrolling is kind of inconvenient, but what do you guys think of one-page-websites in general? For example, a lot of company landing pages do this nowadays, and it looks something like this:

--------

some background pic

some call to action

---------

about section

----------

product section

----------

other people are saying section

---------

example usage section

---------

api docs section

---------

some social section

----------

footer

-----------

And as you scroll down the page, various transitions and animations (powered by jquery) popped out telling you more about the product / asking you to make an account.

I personally have made a good handful of websites like this, but I never really enjoyed the scrolling down craze because I use Emberjs and dumping everything into one application.hbs really isn't what Ember is about. But what's the consensus out there? Do people enjoy layouts like this?

edit: formatting

I think those are far worse than even infinite scroll pages. I want a webpage to be a page, not an amusement park ride.

I think your amusement park analogy is spot on. It's really annoying to sit there and watch a bunch of bullets and text whiz by when I just want to read what the product does.

The spinning @ sign never really went away. At least not in spirit.

I think it's a fad and I wish it would stop

Loathe it. It's a gimmick. First one I saw was 'cool'. Useless, but fun to see.

Now I battle it. Are you scrolled halfway between this animation and that one? Good luck, things are halfway animated, or block things, and my attention is drawn from the information to this stupid moving thing.

It is somewhat more reasonable with a touch screen; either my laptop or phone, but I don't tend to do serious browsing on my phone anyway (I ain't a young'un, and my eyesight doesn't reward such activities).

At least it is better than the text on top of an image thing that used to be the rage (thanks Wired!) which made the page impossible to read.

The only thing I hate more than infinite scrolling is having to click Next Page.

Why not both? Load the additional resources as the user scrolls down, but still have a Next Page after allowing a generious amount of scrolling?

I'm working on a photo organizer for my family's photos which has about 115K entries. I want all of these to be visible in a single pane, so I implemented what I call "near-infinite scrolling". It could also be called "transparent pagination".

It avoids the issues of infinite scrolling really well. What you do is have a very tall div, say 8 million pixels. Inside of that you add a div that you move around as the page scrolls, let's call it the viewport. Whenever there is a scroll event, you check and see if the viewport is no longer visible on the screen and then repopulate its contents.

This is indistinguishable from a very long page as far as the user is concerned. You can grab the scrollbar and jump halfway down. You can hit the "END" key and jump all the way to the end of the results. If you scroll faster than content can be loaded, scrolling doesn't suddenly stop when you reach the end of the loaded content, then have the content appear and have to start scrolling again.

The back and forward buttons work as expected, at least in all the browsers I've tried. Refresh does too. This doesn't require any extra work on my part. The browser goes back to the page and sets the scroll position correctly, which fires an onscroll event. This is then treated like a normal user scroll, which will cause the viewport to be moved and the necessary information to be drawn.

In my case it's a grid of square images so the math is straightforward. I load three extra rows above and below what is visible in the viewport.

Unfortunately, I don't have a demo available in a public place. I've implemented this in jquery, then again in ember, then again in react (as ember was too slow). I'm working on getting it working with the ember glimmer branch. If you're interested in looking at my broken code, it's at https://github.com/jewel/hypercheese.

If you are using infinite scroll to replace pagination, please consider using this technique.

Edit: SlickGrid has something they call "virtual scrolling" that appears to be using a similar technique. Here is a spreadsheet with 500,000 rows: http://mleibman.github.io/SlickGrid/examples/example-optimiz...

What problems of infinite scrolling does this solve? Sounds to me like you've just implemented it in an unusual way.

One possible downside of this technique would be searching in previous "pages" would be difficult / impossible. Since element is removed once its out of view port, browsers' search function can not find given text. Although it should be acceptable if you have only images.

I used essentially the same technique when coding an alternate reader for a long-running webcomic[1][2]

With use of url hashes, you can even deep-link to specific scroll positions, allowing links to be shared sanely.

As you have to know the dimensions of each "page" upfront to keep the scrollbar honest, I think this technique fits better with image-based content; textual content can have unpredictable flowing with different browser fonts, plus as siblings have noted it breaks ctrl-f.

[1]: http://tangent128.name/depot/toys/freefall/freefall-flytable... [2]: https://github.com/Tangent128/freefall-speedreader

I agree with gcatalfamo, while infinite scrolling websites seem like, "hey that's cool, I want to be with the in design crowd" they are actually pretty heinous for all the reasons mentioned above. I want a scroll bar that reflects were I actually stand with info contained on the page, not the content that is currently on that page. Refreshs and navigation don't bring you back to where you were. I just think they are obnoxious. I'd rather page through results and be able to predictably get the results from those operations that I expect. Just say NO to infinite scroll!

Infinite scrolling usually is usually time ordered data. If you could type a link with an arbitrary date and time and it took you to the right place, then that might help slightly and would not be that hard to set up. The problem with infinite scroll is it needs extra elements to make it nice, not that it is evil in and of itself.

Your complaint is more that all the implementations you've come across are poor and you have decided that because of this, nobody should ever do it.

This argument has been used many times in the past against things that evolved to be common. Complain about the poor implementation, not the concept.

I agree with your argument, but we could debate about how this is one of those design concepts that "favours" bad implementations...

It's like how javascript doesn't mean dirtier code, but it can certainly favour it.

Nobody has ever come up with a decent implementation. I'm not even sure it's possible. Flipboard might have a better solution.

There is no implementation of infinite scroll that does not violate my expectation of how scroll bars work. They are mutually exclusive.

What you say is true: The examples of North Korea, the USSR, and Cuba don't prove that Communism sucks. But after enough failed examples, with no successes, we start to get pretty suspicious.

That's an unnecessary politically charged remark, bordering on flamebait, IMO. Discussing communism is interesting, but this really isn't the place for it, and anyone who strongly disagrees with your remark has to either let it slide or enter into a completely tangential discussion.

What are you talking about? It was an example, nothing more.

It was a poor example.

Does the fall of Rome prove that republics/democracies suck?

Does Chernobyl and Fukushima prove nuclear power sucks?

Electric cars, smartphones, personal computers, there are so many things that sucked before someone figured out how to get things right.

There's always more than one factor in play, and there are many arguments to be made on the viability of Communism, perhaps it was just ahead of its time.

All of these things are different from communism because there are examples of success. e.g. there are plenty of good democracies/republics (Denmark/Finland/Sweden/Japan) and plenty of good nuclear plants (all the French ones), etc.

The early examples of the plane were prone to crashing, yet people still board modern aircraft.

An example of an infinite scroll that works is the one used in Discourse: http://www.discourse.org/

The concept is pretty poor. In any infinite scroller you need a page height that progressively increases. When that page height gets too big it is unwieldy to navigate.

One way around this for a user ironically is to use page up and page down. I.e. hacked pagination of that vertical beast!

I've thought about and implemented this a number of times, and I've noticed along the way that the hate against infinite scrolling often boils down to "I just want to do things the way I've always done them, get off my lawn", or "this particular boneheaded implementation of infinite scrolling will be the case I use to damn the entire concept"

- Infinite scrolling is best used for browsing content, especially ephemeral content. It's an anti-pattern for content that needs to be managed in a granular way.

- A common argument is "I want to save this link" and return to it at a later time. Unfortunately, unless you're looking at completely static content, even e-commerce inventories change over time and page 10 isn't going to be the same content the next time you return. This is what detail views are for.

- Memory bloat is commonly cited, and yes, it's painful to implement a good scrollview, but at the same time, it's pretty much a solved problem at this point. The Mashables of the world are just too lazy to fix it. There are a number of active open-source widgets that will solve this for you. Well-thought out libraries like Angular's Ionic will deal with this transparently.

- The old "disappearing footer" is, IMO, a "dark pattern", and one that just happens to be empowered by infinite scroll. It's a business decision to make it difficult for you to get to that footer. It would take about 10 minutes of CSS to solve that problem.

I'll admit that for conversion/sales focused browsing, it's an anti-pattern. When new content keeps popping up, people are more likely to continue browsing than jump into a detail view and make a purchase. For newsfeed browsing, the hate is, for the most part, misguided.

"It's a business decision to make it difficult for you to get to that footer"

You can't be serious. No business will sit down and say "can we make the footer disappear when scrolling because we don't want people clicking on it".

Perhaps I've misread your meaning, but the idea that purposely breaking the site footer is some sort of business decision is ridiculous.

I actually feel the opposite - I much prefer to not have to fiddle with pagination - if (and only if) the following conditions are true:

* I won't lose my place if I click on something and go back to the page in question (though this is easily resolved by tabbed browsing; middle-clicking a link will open it in a new tab on the majority of modern browsers)

* The footer of the page is always visible (it's rather annoying when one can't actually access a footer's links because it keeps on being pushed below the stuff that's being infinitely-scrolled)

The Reddit Enhancement Suite is on the right track with the former part by serving as a wrapper around Reddit's pagination and by preserving some reference to pagination in the URL as one scrolls; that way, if you leave the page and return to it with the Back button, and for some reason your browser forgets where you were scrolling-wise, it'll still know where to plop you down at thanks to the URL.

Infinite scrolling: fine. Really not that bad. Yes, you need to do some stuff to make sure it's usable, but you need to do a similar amount of stuff to make sure pagination is usable too.

Parallax scrolling: get out.

"I want to use its content as a reference for something I need to share or use later"

The infinite scrolling part is a list of articles or images or something else. When you find an interesting part you can click on it and a new page opens with a perma link to this exact piece. It doesn't make sense to save/share the main page with a overview list (infite scrolling or not). E.g: you won't share/save your twitter timeline, but a specific tweet.

I don't understand the rest of your "arguments" -.-

I can't stand these type of websites, especially on news sites. LinkedIn Pulse, or whatever it is called is a huge culprit of this. From my experience (I talk to people about websites for a living) people really, really hate using websites like this.

Just because you can use a feature, doesn't mean you should.

One thing in particular that really annoys me is things like Ctrl + A tend to be really annoying. If you want to select everything, it makes it really difficult.

Also, please don't break page up/down, home/end navigation.

And don't use links/buttons that simply scroll to a different part of your way too long page.

Just don't even put completely different pages (about 1 screen height each if I'm lucky) below one another.

To be more constructive: If you must have a sticky header bar with link buttons, just let me use left/right arrow keys or left/right swipes to navigate them

Thank you.

I find infinite scrolling through search results works OK. You tend to only delve so deep and don't tend to return to the same search results page. If it's a page where you want to keep track of how far you got, yeah, it's annoying.

While we're at it, please everyone who is doing content that has multiple pages spanning, add keyboard shorcuts (left/right) for changin pages! Makes it so much easier to use. Look at imgur for how it works.

Wasn't (isn't?) there a meta-tag for this? I remember in Opera, I could press some shortcut that would go to the next page in forums etc.

No.

Left/right navigate _within_ a page or position a page. I'll immediately close the tab where I go to a different page.

Imgur is an extreme exception.

NY Times is the worst case of abuse which comes to mind. Fuck them.

How will you automatically close the tab ? I mean, does pressing left or right somehow trigger your browser to close the tab ?

Not automatically. But immediately.

As in: in utter disgust of the page's behavior and hijacking of UI controls.

It is possible to do reverse infinite scrolling well. I did it for Snapguide. https://snapguide.com/guides/

The tricky part is inserting the previous content. It requires a combination of setting overflow:hidden on the container to disable the scrollbar, inserting the previous content, adjusting the top positions, then re-enabling overflow to restore the scrollbars. It has to be done very quickly to avoid visible content jumps and getting it to work well across browser platforms wasn't easy.

Worth noting, scrolling on that site is completely broken on an iPad. Click an article in landscape and it shows an image that covers all but the bottom 50 px of the screen. It's position:fixed, so the actual article text scrolls under it, giving you that tiny slice in which to view four lines of text at a time.

Switch to portrait and at least the text scrolls past on top of the image. But text and image are the same colour, so you can't actually read it.

There's a fairly good article on implementing this that solves many of the problems at http://tumbledry.org/2011/05/12/screw_hashbangs_building previously discussed on HN at https://news.ycombinator.com/item?id=2592741

This. I would go even further: there should be a Dogme 95-like movement[1] to bring HTML back to its roots.

This could be a good start: http://motherfuckingwebsite.com/.

[1] http://en.wikipedia.org/wiki/Dogme_95

When I saw this post in was on the HN at item #186. I would never have found it without my browser's HN infinite scrolling plugin.

Sure there are some cases where infinite scrolling are a pain. Trying to get to a footer, losing your place, and the sometimes blurred lines between your content and other content make the usability poor.

Those issues can be figured out and I'm sure they will be.

Signed. They drive me nuts other than in some specific cases. It can be ok, for example, for a picture blog where I am just browsing, have no defined goal, and don't care where I am in the available results. For everything else under the sun: no thanks.

Infinite scrolling makes sense only in one case: ephemeral, disposable content.

So, if you agree that your content isn't worth remembering/referencing later, go for infinite scrolling. Every visitor will instantly see the value of the site.

Hear hear. They're a terrible time sink, and I think this is deliberate.

Meh, they can be annoying. but if top nav is static, I find it less annoying. It basically allows you to jump easily to sections independent of position, which is the same as multipage sites.

I agree but the ones with the static top nav are not that common (if you venture out of well known websites)

take this: http://www.bld3r.com/

Not sure if it helps but you can always jump to the top with just the "Home" button press

Assuming that you have keyboard focus in the page, but outside of any text fields or plugins (e.g. flash). Which might mean you need to find somewhere "safe" in the page to click that doesn't actually click something, like a button or ad.

I don't think this is what he means with infinite scrolling. Afaik, infinite scrolling is like Facebook, which loads new (older, actually) posts when you get near the bottom of the page.

Might be suitable for some contexts (like displaying a "feed" of individual items / search results / etc.), but then it's pivotal to provide users with an obvious way to hyperlink back to individual item. Think linking to one YouTube video (from your infinite "My subscriptions" list) or Facebook post (from your infinite feed). Most big sites seem to get this right, luckily.

I think Facebook do "nearly infinite scrolling" (to coin a phrase) as, IIRC, when you scroll for a while they stop and offer you a "load more content" button, possibly at year boundaries, maybe by number of stories shown, not sure.

infinite scroll has proven to increase page views and reduce bounce rates on news sites.

http://www.poynter.org/news/mediawire/257466/time-coms-bounc...

it's not about the technology. it's about where and when to implement it.

Infinite scroll makes me nauseous. Literally.

soundcloud will bring you back to your position after a page reload.

No

Agreed. On the same note, please stop putting in scroll-activated moving objects. You might think it's cool that that stock picture slides 50 pixels left and fades when I scroll to point X, but really you're just making my browsing experience slow and choppy when my PC needs to re-render your page 100 times every time I scroll.

Forget the work the PC has to do, think of the eyes! I hate trying to read something that's jumping all over the place as objects displace the words.