top | item 20937062

Stop Infinite Scrolling

362 points| kiyanwang | 6 years ago |hackernoon.com

200 comments

order
[+] tontonius|6 years ago|reply
The article puts forth 10 reasons to think twice before implementing infinite scrolling, but many of them are just a variation of the final reason: Terrible user experience.

For the sake of argument, there are several very successful websites that use infinite scrolling in one way or another. Facebook, Instagram, Twitter, Reddit just to name a few. Is infinite scrolling on these sites disorienting the user? hard to navigate? rendering a "terrible user experience"? One could certainly argue that the data says otherwise.

The article doesn't even suggest that there might be situations where infinite scrolling might befit the site. I'm not a big fan of infinite scroll but black-and-white rants like this often leave out the vital context and nuances in the topic they aim to analyze.

[+] wlesieutre|6 years ago|reply
Facebook's is compounded by the mysterious newsfeed algorithm - if you're infinite scrolling a limited set of items in chronological order it wouldn't be as bad. But I've seen things in my newsfeed and then not been able to find them again if I accidentally closed or reloaded my tab.

If you noted who posted/shared it you can find it on their profile, but if all you noticed was the headline or image on a shared item it might as well be gone forever once you lose your place in the feed.

I wouldn't say that's the main reason I don't check my Facebook feed anymore, but it's one of them.

[+] TOGoS|6 years ago|reply
The infinite scroll is one of the reasons those websites are so addictive. My lizard brain has a hard time closing the tab when I "haven't reached the end of the page yet."

So it may be 'good' for keeping people on the site. But in the grand scheme of things I'd rather the page had a bottom.

[+] neves|6 years ago|reply
Infinite scrolling in Facebook, Instagram, Twitter, and Reddit doesn't exist to improve the user experience, but to make these sites addictive. Different priorities here.
[+] marcosdumay|6 years ago|reply
Facebook's feed is horrible. People are lost all the time with it, and it's a huge impediment for the site to be used for anything remotely serious. Ditto for Instagram, but expectations here are more aligned with nothing serious ever getting on the site.

Twitter would be better without infinite scrolling, but nobody ever cares about messages down the line, so it's not that bad. I have never noticed that Reddit does it. Is it on the new design only? This may be one of the reasons people do not use the new design.

[+] bryanrasmussen|6 years ago|reply
Well there are some arguments to be made that Facebook, Instagram, and Twitter are terrible for their users. I am going to assume you are familiar with these arguments because you are on this site. Perhaps infinite scrolling contributes to whatever is so powerfully bad about these sites for their users, if indeed those arguments are correct.

Which I have a strong suspicion they are.

[+] ken|6 years ago|reply
> many of them are just a variation of the final reason: Terrible user experience.

If we're playing Architecture Astronaut, that's true of every possible issue. Compiler crash? Security hole? Deleted all user data? All merely variations of "terrible user experience".

> several very successful websites that use infinite scrolling in one way or another. Facebook, Instagram, Twitter, Reddit just to name a few.

Yes, all sites which first took several years to build up a massive user base and benefit greatly from network effects. Most websites are not Facebook. 20 years ago, it was "But Microsoft does it!" -- and the response was "But you're not Microsoft."

I'd love to find out how many people use "old.reddit.com" specifically to avoid infinite scrolling.

> Is infinite scrolling on these sites disorienting the user? hard to navigate? rendering a "terrible user experience"? One could certainly argue that the data says otherwise.

What data, exactly? Yes, I do think it's disorienting, hard, and terrible, and I hear similar complaints all the time. If I had a nickel for every time I clicked something by mistake in Facebook, or clicked "back" and wasn't taken back to what I was looking at before, I'd have ... a big ol' jar of nickels, anyway.

> The article doesn't even suggest that there might be situations where infinite scrolling might befit the site.

You're right. These are 10 reasons it's bad for users. There's one obvious one that benefits the site: because there's no obvious stopping point, it's great for sites that want to be addictive. People eat more if they have a infinite bowl [1], too. If there's any user benefit to infinite scrolling, I have not heard it.

[1]: https://www.ncbi.nlm.nih.gov/pubmed/15761167

[+] magduf|6 years ago|reply
>For the sake of argument, there are several very successful websites that use infinite scrolling in one way or another. Facebook, Instagram, Twitter, Reddit just to name a few.

Comcast is a very successful company. Do they have a great user experience?

[+] baddox|6 years ago|reply
My favorite example I discovered recently is the Coinbase prices page. You can’t get to the links in the footer (or their big “enter your email to learn more” CTA which I’m sure their marketing team works hard on) because it keeps loading new pages when you scroll to the bottom of the page. Presumably they will eventually run out of pages and you’ll be able to see the footer.

https://www.coinbase.com/price

[+] alpaca128|6 years ago|reply
Not to mention one misclick that brings you to a different page will instantly make you lose all scrolling "progress", on some fast-paced websites without a chance to find the original position again.
[+] cm2187|6 years ago|reply
Even in some case scrolling back to the top makes you lose the progress. And that happens automatically when you do a Ctr-F and start typing, the matching of the first character you type will likely be at the top of the page.
[+] bzbz|6 years ago|reply
You can still implement this by updating the URL dynamically as you pass the (invisible) page delimiter. I’ve seen infinite scrolling news sites implement this.
[+] littlecranky67|6 years ago|reply
To be fair, this only happens due to programming bugs on the website. You can easily store the scroll position in the HTML5 pushstate API. The big websites like Twitter and Facebook get this right.
[+] tummulfingur|6 years ago|reply
What about techcrunch, where if you scroll all the way down in an article it automatically re-directs to the main page.

This is so annoying to me that I have JavaScript and cookies disabled for techcrunch just to circumvent this nonsensical behaviour.

[+] MisterTea|6 years ago|reply
That's just as heinous as those news sites which load the next article when you scroll to the bottom of the current article. It appears to sometimes be part of the article you're reading and then your on another page trying to figure out what the hell happened. I really don't know how these so-called designers get paid to confuse their readers and customers.
[+] glandium|6 years ago|reply
My "favorite" infinite scrolling fail is when there is a footer on the site, and it keeps being pushed down by the infinite loading of new data, such that you can't reach any of the links the footer contains (like, you know, "About" or things like that).
[+] _ooqq|6 years ago|reply
Was wondering that and then told myself, come on, nobody would be that evil, the whole idea is nonsense. And you're suggesting there are websites out there that actually do that?
[+] cm23|6 years ago|reply
Came here to say just this! It's even better when you actually might want to click on something on the footer.
[+] stjohnswarts|6 years ago|reply
None of the sites that I use that have infinite scroll have a footer worth mentioning. Can you point out a site? That seems more like just bad coding than a problem with infinite scroll.
[+] panzerdp|6 years ago|reply
To overcome this problem and reach the footer, I usually search for About page.
[+] akskos|6 years ago|reply
Yep, then you have to view the source and find the links from there
[+] jonstaab|6 years ago|reply
I've seen this argument more and more lately, and it's starting to bother me because some places work great with infinite scrolling (twitter, serial comic strip viewers).

This article offers a small disclaimer at the end, but otherwise says things are impossible, when they simply aren't. #1 is easily solved by removing offscreen content once it's been scrolled past, and autoloading in both directions. Numbers 3-4, 8, and 9 (several of which are redundant complaints) are definitely the worst part of infinite scroll websites, but are pretty easily fixable with client-side routing.

The problem is people implement infinite scroll in terms of finite-scrolling documents, when there are a number of other dynamics to take into account. It's like saying "Don't make video games because you can't play them with a remote".

[+] bhauer|6 years ago|reply
> some places work great with infinite scrolling (twitter, serial comic strip viewers).

I would contend that Twitter does not work great with infinite scrolling. In fact, I kept envisioning Twitter as I read the article. One of my biggest grievances with Twitter (shared with much of modern computing because multi-device computing doesn't have something like PAO [1], which would keep all my devices' views the same) is that I can't easily resume reading my Twitter stream between devices. I can't even easily navigate to "show me the stream at 11am today," which would be a viable workaround for multi-device views. If I want to find a last-read point, I just need to sit with my finger on the page down key until I see something familiar.

Ultimately, my user experience with infinite scrolling is simple: I give up and stop bothering to try to be thorough in my consumption of Twitter content. I wonder if Twitter has the necessary metrics to realize that infinite scroll can hurt engagement. I doubt it.

[1] http://tiamat.tsotech.com/pao

[+] lunchables|6 years ago|reply
>some places work great with infinite scrolling (twitter [...]

First time I've ever heard someone refer to infinite scrolling on Twitter as great. I can't tell you how many times I accidentally scrolled to the top of twitter because I accidentally tapped too high on my iPhone and it jumped to the top, losing my place, which was dozens of "pages" down. It's the reason I never use twitter for more than a couple of minutes.

[+] mjevans|6 years ago|reply
If there are MULTIPLE views for a type of data, an infinite scroll consumer is a valid 'secondary' view.

In the case of Twitter I think I'd find it WAY more useful to have a view that breaks things down by month or week, with the old items gaining permanent addresses on such pages, and actions that break out of the infinite scroll re-directing to those permanent places.

[+] oftenwrong|6 years ago|reply
Paging should be incorporated into web standards. Imagine your browser indicating "you are on page 2 of 8". Imagine having browser hotkeys for "next page", "previous page" and "jump to page".

The browser itself could even provide a non-broken, customisable, universal-across-all-sites implementation of infinite scrolling.

[+] leokennis|6 years ago|reply
I remember from ~10-15 years ago, in the Opera browser there was a button to go foward even when you did not go backwards. It was pretty good at guessing what the next page was going to be (example.com/1.html > 2.html, 2005-08.jpg > 2005-09.jpg etc.)
[+] Symmetry|6 years ago|reply
There are definitely sites (usually documentation) where I can press Alt-N to get to the next page and Alt-P to get to the previous one and I have no idea how that happens.
[+] silentguy|6 years ago|reply
If you use vimium or similar browser extensions for mouse-free access, they have keybinding for paging. It's not perfect, but it's still better than nothing.
[+] amelius|6 years ago|reply
The problem is that browser windows have different sizes, so pages will be of different size. Formatting a document to fit on a page size is not rocket-science but also not trivial to do nicely.
[+] cm2187|6 years ago|reply
I’d add: if you do pagination, do large pages instead of a huge number of small pages. It’s easy to scroll quickly through a fixed size page, it’s a pain in the ass to have to click through pages.
[+] theobeers|6 years ago|reply
More small pages means more opportunities to show ads. And in the case of search, a larger portion of the first page can be given to sponsored results. :-(

Somehow the web has evolved to a place where the poles of infinite scroll and excessively short pages are two of the great annoyances.

[+] greenhatman|6 years ago|reply
Or if you can, make the pages the same size as the screen. Then you don't have to scroll and can just keep your pointer on the next button.
[+] MentallyRetired|6 years ago|reply
I once implemented infinite scroll that 1) didn't auto-scroll from the first page, you had to click to continue and then it would infinite scroll. This way, people could see the footer and didn't have auto-loading content unnecessarily and 2) the infinite scroll worked bi-directionally. 5 "pages" would be loaded at any given point, with the goal that the user would be on page 3, in the middle of the stack of pages. This way, memory was kept low, and we even implemented the History API so you could link to the pages by post ID.
[+] talove|6 years ago|reply
I run a collection of websites that all use infinite scroll and serve ~90 million MAUs.

#1 Poor performance issues

We started doing off-screen clean up, but it's a similar pattern to any ListView like component. Setup and teardown. The browser is smart though. It's not any more work than the setup/teardown a typical SPA should be doing.

#2 Footer is drowned

Footers are useless. Put it in the menu.

#3 Difficult to implement analytics

No more difficult than triggering a SPA pageview. This is misleading.

#4 Navigation is muddled

This is the most valid argument. We solved by being clever about History.pushstate(), triggering when the next article title hits 50% of screen. Bookmarking works fine.

#5 Scrollbar is hard to use

Misleading. The web is mostly mobile. People generally use efficient scroll input devices, scroll wheels trackpads. Most browsers hide the scrollbar because of this. Scrolling many tens-of-thousands of pixels is NBD.

#6 It is hard to use

Misleading, not quantifiable.

#7 Disorients users

Misleading, not quantifiable.

#8 No skipping allowed

Easily solved. We built an in-between module to provide the user with the option to modify their infinite scroll path. If you pick something here we use that to make the rest of articles closer to your interests.

#9 No bookmarking

Solved with History.pushstate()

#10 Terrible user experience

Any UI pattern can be abused to be bad UX.

# Pagiantion UX is usually bad

To counter the arguments. Arguably pagination is more broken. Navigating pages. Generally they aren't bookmarkable unless you implement advanced cursor pagination.

# Content consumption flow

Data supports that users want to consume content with minimal interaction and engagement. If you provide a consistent scroll experience to get from one thing to another, and it's relevant enough, people will really stick around and consume it.

Bounces, time spent, and other KPIs for web-traffic engagement have all gone up as a result of using infinite scroll.

Perhaps we're an outlier and paid attention to the difficult to solve implementation nuances but I don't mind it on other sites.

The alternatives were footers full of information I'm not interested in and outbrain modules...

[+] qwtel|6 years ago|reply
that is mostly a complaint against poorly implemented infinite scrolling. there’s no reason why it would have the break urls, indexing, or the back button.
[+] crispinb|6 years ago|reply
Not being used by social media, I don't come across infinite scrolling much. But where I do it's most annoying. Discourse: how dare you take over my ctrl-f keyboard shortcut.
[+] croo|6 years ago|reply
... but I like infinite scrolling. I just don't like infinite content.

I prefer having a webshop list everything they have in a sub instead of pagination. I prefer Amazon layout which just goes on and on with all kind of stuff related to an item. I like to be able to ctrl-f on a page and see if I hit what I need without clicking through mazes of links. I just don't like pages that just generate more content after I finished the current one in the hope I get bored and click on ads.

[+] Grumbledour|6 years ago|reply
I remember when Google Reader came along was probably the first time I saw infinite scrolling and it was glorious! The best thing ever! I don't want my RSS feeds any other way!

But for anything else? Not so much.

[+] vezycash|6 years ago|reply
I cant count how many times i've had to turn off wifi, or use firefox's offline mode just because of infinite scrolling.
[+] seriocomic|6 years ago|reply
Title / Article should be "Stop Badly-implemented Infinite Scrolling". As many commenters have pointed out, some of these "reasons" are due to poor implementation.
[+] chriswwweb|6 years ago|reply
To me infinite scroll or not is more about what kind of content is it, statistics like generated clicks and of course UX, than the questions what's more difficult to implement.

With the abundance of ready to use opensource solutions, I'm sure most devs don't need to implement infinite scroll or a pagination mechanism themselves but they just use a component that does it out of the box and solves all those technical problems for them.

To be sure what works best for your users and type of content, I would do two versions, one with pagination and one with infinite scroll and let the numbers decide which technique makes the user click / visit content and maybe which technique does the user spend most time on the website.

I'm not totally against infinite scroll, for a social network news feed I think it's a good use case. Also all the potential problems listed have a solution and also some of the problems also exist when using a pagination. For example letting a user bookmark a page url with a pagenumber on a website with lots of new content is bad, as the content on the page number XY will have changed after few hours / days. Some good solutions if you really want to implement it on your own are listed in this google blog post: https://webmasters.googleblog.com/2014/02/infinite-scroll-se...

[+] CorvusCrypto|6 years ago|reply
Infinite scroll is not for user experience. It's to increase session times. If you increase the time spent in an app or on a page you increase the chance of getting revenue in ads for social or media sites or purchases in marketplaces. In other words screw UX because this is about increasing engagement to increase monetization. Stressed or not, users do increase session time on infinite scroll pages than when using regular paginated views
[+] textmode|6 years ago|reply
One of the websites where one can find this annnoying "infinite scroll" is YouTube channels.

I wrote a quick and dirty script to address this annoyance.

It can be used to output a table of all the video urls and video titles for any YouTube channel.

"yy032" and "yy025" are some utilities I wrote to decode html and transform urls to HTTP for HTTP/1.1 pipelining, respectively.1 Instead of using yy025 and openssl, one could alternatively make a separate TCP connection for each HTTP request, e.g., using something like curl. Personally, I prefer not to make lots of connections when retrieving mutiple pages from the same domain.

Here is a hypothetical example of how to use the script, "1.sh", to make a table of all the video urls and video titles in a channel.

   echo https://www.youtube.com/user/example/videos|sh 1.sh|yy025|openssl s_client -connect www.youtube.com:443 > 2.html
   sh 1.sh urls < 2.html > example.1
   sh 1.sh titles < 2.html > example.2
   rm 2.html
   paste -d '\t' example.1 example.2

   # 1.sh
   case $1 in
   "")
   exec 2>/dev/null
   export Connection=close
   yy025|tcs www.youtube.com |sed 's/%25/%/g'|yy032 > 1.html
   while true;do
   x=$(sed 's/%25/%/g;s/\\//g' 1.html|yy032|grep -o "[^\"]*browse_ajax[^\"\\]*"|sed 's/u0026amp;/\&/g;s/&direct_render=1//;s,^,https://www.youtube.com,');
   echo > 1.html;
   test ${#x} -gt 100||break
   echo "$x" 
   echo "$x"|yy025|openssl s_client -connect www.youtube.com:443 -ign_eof > 1.html
   done;
   rm 1.html;
   ;;-h|-?|-help|--help) echo usage: echo https://www.youtube.com/user/example/videos \|$0 ;echo usage: $0 "[1|2]" \< 2.htm
   ;;1) sed 's/\\//g;s/u0026amp;//g;s/u0026quot;//g;s/u0026#39;//g'|grep -o "ltr\" title=\"[^\"]*"|sed 's/ltr..title=.//'  
   ;;2) sed 's/\\//g;s/u0026amp;//g;s/u0026quot;//g'|grep -o "[^\"]*watch?v=[^\"]*"|sed 's,^,https://www.youtube.com,'|uniq
   esac
1 https://news.ycombinator.com/item?id=17689165 https://news.ycombinator.com/item?id=17689152
[+] 0xdeadb00f|6 years ago|reply
All YouTube channels have an RSS feed too, which might be more intuitive to parse.
[+] textmode|6 years ago|reply

   Corrections:
   /tcs/s//openssl s_client -ign_eof -connect/;s/.com/&:443/
   s/1|2/titles|urls/
   s/;;1/;;titles/
   s/;;2/;;urls/
[+] jcims|6 years ago|reply
Maybe it's just me because I just realized how irritating it is, but I really dislike when the title of an article commands me to do something. I don't really even understand why people do it, is it supposed to make me hate-click the link? It just makes me think the author is juvenile and i lose interest.
[+] brlewis|6 years ago|reply
I think it's to draw the attention of people who want to tell others to do the same thing. E.g. if you're saying the title of this article internally while looking at an infinite-scrolling web site, then the title will get your attention.
[+] stordoff|6 years ago|reply
I actually found it a little misleading in this case. I thought it was a way to stop sites infinitely scrolling.