Stop Infinite Scrolling
hackernoon.com
hackernoon.com
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.
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.
I agree with the problem of finding something again in a long, cryptically ordered list of several hundreds or thousands of items. Not sure a paginated facebook feed would solve that issue though
Compared to Instagram where I see every single thing that someone I follow posts (might be because I follow so few people on it). If I want to go back and see one of the posts again, I scroll back in time and eventually find it.
For losing posts on Facebook I’m not talking about trying to find something from a month ago, I’m talking about things that I swear I saw yesterday and now I can’t find it.
Like, I follow some newspapers on fb, an often they only show up once per day, reload the feed and it’s vanished.
This is actually what facebook does when you're offline. When it runs out of content to show, it cycles round and shows you the same content again.
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.
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.
Seems about par for the course for a Hacker Noon post. They're not meant to be read, they're meant to pad the career of the author.
The new redesign also adds infinite scrolling.
FaceTwitGram may depend on IS; I don't know, I've never used a FaceTwitGram account. Reddit seems to work fine without Javascript.
If I'm forced to enable Javascript for some specific site, I enable it for that site, then (if that's not enough) for it's companion sites, CDN and so on. By this time the site has already caused me resentment.
If that's not enough, then usually I've already gone somewhere else.
Way too many sites will give you a blank screen just because JS is disabled. But if you insist that I totally drop my pants and enable ALL scripts, you really have to have a compelling reason (e.g. buy product unavailable elsewhere, um err can't think of any other compelling reason; luckily neither my bank nor the taxman mandate 3rd-party scripts).
Some UI gimmick such as infinite scrolling is certainly not a compelling reason.
The purpose of infinite scrolling is to retain the eyeballs of mobile users - to stop them navigating away from your site. I am old, my eyes are dim, and my fingers are shaky; I use my mobile phone primarily as a phone, and never as a browser. Younger folk may have a different experience.
Interestingly the approach I think works the best (except for the poor input experience on anything that isn't a touch screen) is infinite horizontal scrolling since the footer and header elements remain expectedly stable while not overlapping any information the user wants to view... horizontal scrolling is very poorly supported by input devices and using the scroll wheel to move left/right makes the user think too much.
Oh, but there is a visible load time still. Unless you're browsing on a supercomputer with infinite RAM, after a minute or two of scrolling Facebook you'll realize the performance drops fast with the amount of feed you've loaded, while the load times increase. In my experience, both the page slowdown and load delays are about O(n) with respect to the side of the feed, but I haven't measured it precisely.
In the case of reddit, infinite scrolling is one of the most common reasons I hear used to explain why other users opted out of Reddit's new UI.
the problem is people who cargo-cult Facebook and use infinite scrolling in their business apps which don't have ads
Comcast is a very successful company. Do they have a great user experience?
What I meant was that some of the worlds most popular sites employ "infinite" scrolling, and it kind of makes sense on those sites.
If they have a great user experience? That's highly subjective. I guess they had a lot better user experience than their failed competitors.
That's like the logic that Microsoft Windows must be great just because it's the most-used operating system. You're completely ignoring all the other factors that are involved in a company or product getting to a dominant position.
infinite scroll limits the amount of data downloaded over mobile, without forcing you to "click" to next page.
it used to be absurdly user hostile but now it's limited to 2 loads before it stops and you are presented with a page index.
it's a great compromise with a great underlying UX reason.
Which I have a strong suspicion they are.
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.
it can even be sticky at 2X or 3X the screen hieght so that it doesn't get in the way of the freshest/most important content near the top of the (very long) page.
in practice, I don't think I've ever seen a sticky footer that didn't flake out somewhere. it's always broken weird screen sizes, or mobile, or one browser, or after a browser update. or it hides content because someone forgot to add padding. or it jumps around because they're using absolute position for some insane reason.
Infinite Scrolling is not bad, but you have to design the page for it instead of jamming the feature in later. Otherwise, it hurts.
I thought this was common knowledge, guys. /s
The question is, is this the best use of your time? Are you willing to invest more time in it when you give it to the user? Because the user will do something you haven't thought of, they will break it, and you will need to fix it.
Which may now be obsolete. Over the last year firefox has implemented some amazing flexbox layout computation improvements that make appending to a flexbox with many elements (>5k) stay fast. It only re-computes the changed ones.
Of course you need to do some profiling to check that you don't accidentally deviate from the happy path by introducing changes that touch all elements.
I noticed when trying to screenshot a Twitter thread in Firefox that twitter does this, on the mobile site at least.
Although to be "fair", that's probably largely intentional crippling of the site to push users towards their app.
This is so annoying to me that I have JavaScript and cookies disabled for techcrunch just to circumvent this nonsensical behaviour.
how does someone mess up their website that badly? i dont even know how something like that is possible
E.g. in Germany the impressum (often also called "imprint" in English versions of German websites; a mandatory page listing the physical address, contact information, registration numbers and other legal information, typically linked in the footer) must be easy to find and accessible with no more than two clicks (though this seems to be more of a heuristic than a strict legal definition).
I don't think they did it deliberately, but I'd bet someone said "We could increase engagement if people didn't have to click anything to keep seeing more content" and nobody bothered to think about other design consequences of automatically expanding the content downward forever.
EDIT: A screenshot of Facebook's in mid-2013 is shown here under the "Unreachable" header https://www.smashingmagazine.com/2013/05/infinite-scrolling-...
Or straight to the image: https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42...
They have useful info in the footer. But it's impossible to get to the footer.
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".
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.
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.
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.
The browser itself could even provide a non-broken, customisable, universal-across-all-sites implementation of infinite scrolling.
If you're curious, the implementation is here: https://github.com/qutebrowser/qutebrowser/blob/master/quteb...
javascript:(function() {var num = null;var found = window.location.toString().match(/(\d+)(?!.*\d)/);if (found != null) {num = parseInt(found[0])+1};if (num != null) {window.location=(window.location.toString().replace(/(\d+)(?!.*\d)/,num))};})()
The "works in" browser icons gives some idea of the date on that. IE, Phoenix, Netscape 4, and Opera. Probably some of the oldest still-in-use javascript in the world :P
Ran it through prettier.io:
javascript: (function() {
var e, s;
IB = 1;
function isDigit(c) {
return "0" <= c && c <= "9";
}
L = location.href;
LL = L.length;
for (e = LL - 1; e >= 0; --e)
if (isDigit(L.charAt(e))) {
for (s = e - 1; s >= 0; --s) if (!isDigit(L.charAt(s))) break;
break;
}
++s;
if (e < 0) return;
oldNum = L.substring(s, e + 1);
newNum = "" + (parseInt(oldNum, 10) + IB);
while (newNum.length < oldNum.length) newNum = "0" + newNum;
location.href = L.substring(0, s) + newNum + L.slice(e + 1);
})();I remember Opera also had (and Vivaldi has, I just found) an optional feature where continuing to press space after reaching the end of the page would trigger fast-forward and take you to the next page. Sort of an alternative way of infinite scrolling.
<link rel="next" href="/page/2">
Somehow the web has evolved to a place where the poles of infinite scroll and excessively short pages are two of the great annoyances.
#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...
As a user this bothers me the most. If I have no intention of reading the next article but scroll to the end it then takes two clicks to leave the site via back button - sometimes more.
IF you wanted to do it right, only set history when the title of the next article is at the top of the viewport. 50% just isn't enough and likely just messing up your kpis.
I'm going to rail against your attitude here, not you:
0. Appeal to authority.
1. Sounds like job security.
2. Footers are NOT useless. Menus are aggravating.
3. Analytics are 99% evil, 1% hot gas.
4. Stay out of my History.pushstate(). I don't need 50 things in my back stack just because your "page" couldn't fit on one screen.
5. Too many incorrect facts to address in one line.
6. It depends on what the definition of "is" is. No. Single cluttered pages are quantifiably easier to use than a dynamic page of unknown length. Is it ever going to stop?
7. It disorents me, and I'm a super-ultra-mega power user. Spinning a 3D model when the user scrolls down is downright unexpected behavior. It's a trick. A gimmick. A distraction. It's disorienting.
8. I don't want a choose-your-own-adventure. I want a damn single page with damn information on it.
9. I don't think that's a solution.
10. I don't care about "User Experience." I want "User Interface". "UX engineer" is just job title inflation for non-committal designers.
The real problem with infinite scrolling is that it's temporarily addictive, and the only reason it exists is to maliciously keep you scrolling. I don't like that and I think infinite scrolling should not be used by (and is not adding anything useful to) benign services/products
That is a pretty broad statement. What threshold of "most" is high enough that you are willing to write off the non-mobile population?
https://www.perficientdigital.com/insights/our-research/mobi...
It says in 2018, mobile was 58% and desktop 42%. Optimizing for the 58% is fine, but when it comes at the expense of the 42% it is harder to justify just handwaving it away.
More interestingly, the above page indicates that while there are a greater number of mobile visits, they don't stay as long and are twice as likely to "bounce", which I infer means leave the page before spending any significant time.
So by those metrics, although desktop users are fewer, they spend more total time. Again, ignoring their scrolling preferences to optimize for mobile seems questionable.
Scrollbar hijacking is a valid objection but I do wonder how many users in that 25% it affects. I'm on a Mac and the freaking scrollbar disappears after less than a second of non-use. I think I've pretty much ignored it since Mac started doing this...
Which makes it impossible to use Ctrl+F through a page.
Please tell me which ones so I can be sure not to visit them. Infinite scrolling is high on my list of things I hate about the web.
Because 100% of infinite scroll sites/apps that I have seen can't get this right.
None of these measure actual value to the user. You could just be sucking up more of the user's time without adding any actual value.
The point is whether those same ~90 million Monthly Active Users would be better served by more traditional page flipping or some other navigation mode.
I believe that it greatly depends on the specific site and its contents, but the original article sounds like good (and often "rare") common sense, if you have good reasons (and can actually provide a working, not annoying, solution) go "infinite scrolling" if you are not 100% sure stick to more traditional pages.
I have no idea what you mean by indexing, given the word index doesn't feature in the article. You also ignore the problems of making the scrollbar useless & the footer unreachable. I don't see any fix for those issues at all.
These criticisms are all really bad
You could use the browser's built-in search functionality by choosing Edit -> Find in This Page from your browser's toolbar, but in this case it would be pointless as the results would be inconsistent as most data you've come past is not present.
I'm curious how much worse the performance would be if they did not apply this specific optimization.
Here's a thread with 618 replies, for example: https://users.rust-lang.org/t/crate-of-the-week/2704
> I'm curious how much worse the performance would be if they did not apply this specific optimization.
Pages without continuous scrolling that can have large numbers of posts or entries don't typically show all by default. There are all the usual options - paging, allowing the user to choose the number per page, etc. They're all imperfect workarounds, and all better (for me) than continuous scrolling.
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.
But for anything else? Not so much.
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...
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
Corrections:
/tcs/s//openssl s_client -ign_eof -connect/;s/.com/&:443/
s/1|2/titles|urls/
s/;;1/;;titles/
s/;;2/;;urls/Argue whatever you want, but if something works, people are going to use it. And as long as it's not misleading people, it's hard to present it has a dark pattern.
Every time I want to find a meta link, I need to have a race between my reaction speed and the JavaScript loading time... Worse, some background scripts are written in a way to trigger even if you press "Esc", which is supposed to stop the current executing script.
What I would like to see is a permission though, like when browsers ask for your location: "This site want's to manipulate your clipboard. Allow?"
Now that the Javascript genie is out of the bottle, you can't stop single-page apps from doing their own navigation. But if you make it simple enough for developers, many new sites will choose to support a standard HTML feature rather than continue to manage it themselves.
That would, of course, take time and be the usual HTML-evolution clusterf*. But if Google or Mozilla decided to start it, in conjunction with one or a few major blog/social-media providers, it could probably be widely supported within a decade.
No signs from other vendors than Chrome though.
I think photo blogs are a good place to use infinite scroll.
The thing that irritates me a lot with infinite scrolling is that it ruins history. If the content somehow botches open in new tab then this basically constrains the user to only ever see one piece of detail before getting crazy.
I wish i could turn it off like tumblr
Infinite scroll works in a lot of ways, and is integral to a content absorbing functionality (if that's what you want).
What developer suggests this? Seems like the author can't tell the difference between a developer and a "growth hacker".
it's insane
Honestly scrolling on mobile gets me halfway to a repetitive stress injury, I’ll take a next button anyday
if there were a single piece of paper long enough to hold the entirety of a book, and it were written out on that page, would that make it any less of a book? it may not be one in the sense that it is no longer bound together, but at the same time, in the former example the pages were bound together by some chemical process into one monolithic page; the only thing missing is a cover to hold it together, though I have seen college textbooks come as just loose leaf paper that one has to bind themselves but that's still a "book" prior to binding.
also: what if a story or some such were to be written on a scroll? just because it doesn't fit the precise literal definition of what a book is, doesn't mean it doesn't contain the same semiotic substance as "book" and as such doesn't mean that it automatically isn't one. but maybe im just being pedantic ¯\_(ツ)_/¯
(I'm wondering if you think the objection is to scrolling, it's not, there is a difference between a long page with scroll bars that give an indication on how far you are on the page, and infinite scrolling where the page gets longer each time you read the end of the page)
From dictionary, book: "a written or printed work consisting of pages glued or sewn together along one side and bound in covers."