HN Explorer

Ask HN: Please stop making infinite scrolling websites

197 points by gcatalfamo ↗ HN
Please, stop.

Sarcastic disclaimer: I am not backing my statements with facts. I think infinite scrolling websites are already a fact against themselves.

- They might be visually appealing (sometimes) but they are against usability, load and usefulness in general.

- Not even Pinterest (one of the most famous infinite scrollers advocates) allows you to go back to your scrolling level if you refresh.

- They are annoying. Their format fits mostly mobile devices where knowing where you are in a page is perceived differently (and sometimes totally not important).

- Fitting analytics (that make some sense) on infinite scrollers is another pain.

- If I am using a website for anything different from leisure, I want to use its content as a reference for something I need to share or use later.

- They were already despised in 2013: http://www.smashingmagazine.com/2013/05/03/infinite-scrolling-lets-get-to-the-bottom-of-this/

- They got XKCDed: https://xkcd.com/1309/

Even Google didn't like them, then got used to them: http://www.zdnet.com/article/google-tries-to-save-the-web-from-the-curse-of-infinite-scrolling/

Other sources http://www.nngroup.com/articles/infinite-scrolling/ http://www.sitepoint.com/ux-infinite-scroll-good-bad-maybe/ http://designmodo.com/infinite-scrolling/ https://econsultancy.com/blog/61703-infinite-scrolling-pros-and-cons/ https://www.linkedin.com/pulse/20140626160300-5182010-bad-website-bad-infinite-scrolling-pages https://www.quora.com/Is-infinite-scroll-and-parallax-design-good-or-bad-for-conversions-for-single-product-sites

- The only funny source: http://whitemenwearinggoogleglass.tumblr.com/

EDIT: improved readability

94 comments

[ 2.3 ms ] story [ 160 ms ] thread
gdilla
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.
gcatalfamo
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/

stn
Not sure if it helps but you can always jump to the top with just the "Home" button press
nfoz
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.
joopxiv
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.
vesinisa
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.
pbhjpbhj
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.
LukeB_UK
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.

gcatalfamo
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.

MisterBastahrd
Nobody has ever come up with a decent implementation. I'm not even sure it's possible. Flipboard might have a better solution.
recursive
There is no implementation of infinite scroll that does not violate my expectation of how scroll bars work. They are mutually exclusive.
avn2109
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.
mbrock
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.
dennisnedry
What are you talking about? It was an example, nothing more.
cheapsteak
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.

avn2109
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.
LukeB_UK
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/

bbcbasic
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!

Cyberis
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!
lotsofmangos
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.
tbyehl
The only thing I hate more than infinite scrolling is having to click Next Page.
cjensen
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?
oneplusone
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...

pbreit
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.

wlesieutre
Pretty sure Facebook used to do that with the footer.
joeframbach
The workaround to get to the "developers" link was to mash the escape key while scrolling. Those were the days.
gcatalfamo
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.
cjensen
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.

bduerst
Couldn't you use a script to remove elements at the top of an infinite scroll page? Would that remove it from browser memory?
pipeep
Some implementations do this, but then it breaks ctrl+f.
scott_karana
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. ;)
pbhjpbhj
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.

pas
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).
Y-bar
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.

foota
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.
dredmorbius
Oddly enough, there's a way of providing this in a discrete fashion: "next page".
asdfdsafueu33
There are plenty of scripts to only display the ones which are visible. They get hidden as they are scrolled off screen.
acomms
Agreed - nicely done
cscharenberg
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.
calinet6
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.

alrs
Infinite scroll makes me nauseous. Literally.
seanwilson
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.
Torgo
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.

inDigiNeous
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.
maaaats
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.
dredmorbius
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.

inDigiNeous
How will you automatically close the tab ? I mean, does pressing left or right somehow trigger your browser to close the tab ?
dredmorbius
Not automatically. But immediately.

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

briholt
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.
mark-r
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.
the_watcher
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.
rileyteige
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.

jamesondh
An average user wouldn't be able to, websites shouldn't do this in the first place.
mark-r
Not sure you'd want to apply for a job at a place that makes broken web sites.
rileyteige
Wouldn't want to work there myself, but to somebody on HN who's trying to "race their browser" it seemed a feasible workaround.
the_watcher
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.
pbhjpbhj
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_watcher
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.
the_watcher
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!
xasos
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
BorisMelnik
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.

markbnj
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.
ffn
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

delecti
I think those are far worse than even infinite scroll pages. I want a webpage to be a page, not an amusement park ride.
dennisnedry
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.
bbcbasic
The spinning @ sign never really went away. At least not in spirit.
FooNull
I think it's a fad and I wish it would stop
RogerL
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.

jewel
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...

xanderstrike
What problems of infinite scrolling does this solve? Sounds to me like you've just implemented it in an unusual way.
devmach
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.
tangent128
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

danso
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/

anigbrowl
Hear hear. They're a terrible time sink, and I think this is deliberate.
ArekDymalski
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.

geuis
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.

jasonkester
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.

barnacs
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.