Ask HN: Please stop making infinite scrolling websites

https://news.ycombinator.com/item?id=9416017

by gcatalfamo • 11 years ago

197 94 11 years ago

news.ycombinator.com

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

gdilla• 11 years ago

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.

gcatalfamo4• 11 years ago

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• 11 years ago

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

joopxiv• 11 years ago

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• 11 years ago

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.

pbhjpbhj3• 11 years ago

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_UK2• 11 years ago

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.

gcatalfamo4• 11 years ago

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• 11 years ago

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

recursive• 11 years ago

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

avn21092• 11 years ago

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• 11 years ago

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.

LukeB_UK2• 11 years ago

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/

bbcbasic2• 11 years ago

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• 11 years ago

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• 11 years ago

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• 11 years ago

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

cjensen2• 11 years ago

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• 11 years ago

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

pbreit2• 11 years ago

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• 11 years ago

Pretty sure Facebook used to do that with the footer.

gcatalfamo4• 11 years ago

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.

cjensen2• 11 years ago

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• 11 years ago

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

asdfdsafueu33• 11 years ago

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

acomms• 11 years ago

Agreed - nicely done

cscharenberg• 11 years ago

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• 11 years ago

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.

vkjv• 11 years ago

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

gcatalfamo4• 11 years ago

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

pbreit2• 11 years ago

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

alrs• 11 years ago

Infinite scroll makes me nauseous. Literally.

seanwilson• 11 years ago

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.

moron4hire• 11 years ago

Torgo• 11 years ago

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.

inDigiNeous2• 11 years ago

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• 11 years ago

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.

dredmorbius3• 11 years ago

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.

inDigiNeous2• 11 years ago

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

briholt• 11 years ago

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-r2• 11 years ago

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_watcher4• 11 years ago

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.

rileyteige2• 11 years ago

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• 11 years ago

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

mark-r2• 11 years ago

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

pbhjpbhj3• 11 years ago

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_watcher4• 11 years ago

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• 11 years ago

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• 11 years ago

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• 11 years ago

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• 11 years ago

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• 11 years ago

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

dennisnedry2• 11 years ago

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.

FooNull• 11 years ago

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

RogerL• 11 years ago

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• 11 years ago

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• 11 years ago

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

devmach• 11 years ago

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• 11 years ago

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• 11 years ago

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• 11 years ago

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

gone35• 11 years ago

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

ArekDymalski• 11 years ago

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• 11 years ago

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• 11 years ago

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.

joshka• 11 years ago

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

barnacs• 11 years ago

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.

grumblestumble• 11 years ago

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.

exodust• 11 years ago

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

yellowapple• 11 years ago

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.

tummybug• 11 years ago

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

Toadsoup• 11 years ago

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.

cubei• 11 years ago

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

selfagency• 11 years ago

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.

Ask HN: Please stop making infinite scrolling websites

Related Stories