Why not to use infinite scroll on your website | Hacker News Reader

Why not to use infinite scroll on your website

geeks.bizzabo.com

75 pointskatzboaz78 comments

I personally despise infinite scroll, at least on mobile sites, as it limits:

1. My ability to orient myself in the content. 2. My ability to control my consumption of the content (e.g., jump back to top, jump to end, jump to rough internal location).

Some sites have added navigation buttons or tool bars, but, to be useful, they must always be visible, so they take up valuable space that should be used for content. Depending upon implementation, they can also be distracting.

There are certainly ways that navigation options could be restored while still not significantly interfering with content, of course. If decent feedback of current location were also provided, then infinite scroll could be OK.

Most content breaks down pretty naturally into some smaller increments, though (pages, chapters, sections, topics, days -- whatever), so I think it typically makes more sense to present it in that way.

Just because we can do infinite scroll, doesn't mean we should.

All these problems are solvable. I co-founded Discourse (http://discourse.org) which uses infinite scrolling heavily. Discourse is also 100% open source so you can see how we did it.

My responses below:

> Users will lose the page length orientation - the browser scrollbar become useless.

We have a fixed "x/y" posts widget at the bottom with a progress bar.

> There’s no ability to jump to the end of the list.

The aforementioned widget has an up arrow and down arrow to jump to the top/bottom.

> Your users will not be able to get back to the same in-page position in 1 click.

We use replaceState to update the URL as they scroll. The back button works fine, and you can link to any position in the topic.

> There’s no visible footer until your users come to the end of the list/content.

Isn't this true of all sites where the user scrolls anything? I guess the difference is you see it more often with pagination. We instead have a fixed header with navigation options and extra details.

> Slow Experience - You are using a lot of browser memory as the page scrolls down.

We unload posts that have scrolled off the screen. We released a library for it too - http://eviltrout.com/2014/01/04/hiding-offscreen-ember.html

> If you switch away from the page by following a link there's no way of getting back to where you left off.

The back button works fine thanks to replaceState!

> Lack of sense of completion- no closure for users.

The progress bar and constantly increasing numbers in the widget help a lot.

> There’s no SEO opportunities for content located below the first scroll.

We serve up google indexable content just fine. See: http://eviltrout.com/2013/06/19/adding-support-for-search-en...

> You lose the ability to bookmark a dedicated point of interest.

With replaceState and updating the URL, you can bookmark at any point and return right back to where you left off.

> Distraction - The fear of missing out on data or other options will deter your users from completing an action.

I'm pretty sure this isn't relevant since we support all the above.

I think discourse handles this fantastically well!

I think discourse handles this impressively, and I thought of them for almost every point on this list. They're almost all fairly minor technical obstacles if you really want to solve them. Discourse really wanted to solve them and they did it masterfully.

But the funny thing is...I still don't like using infinitely long pages, even in discourse. The scrollbar is a very capable control that works exactly in a way we are familiar with, and we're accustomed to it in ways that the little progress widget simply can't compete with. And we're not going to get accustomed to the widget in the same way unless it really is universal and behaves in a very standard way (like a scrollbar does), so until that happens, I wish people would stop insisting that a page with a goofed-up scrollbar can be just as good because, hey, magic widget!

EDIT: just to give discourse a chance to prove me wrong, as it had been a long time since I looked at their widget, I went and looked at a 1000 post thread on try.discourse.org and I'm sorry, but the experience completely sucks compared to having a real scrollbar. There's no way to tell how long the thread is at a glance (the widget just says "2" and the scrollbar indicates maybe 40% is visible), there's no way to scroll to somewhere in the middle (say, you know you're looking for something around post 200) without incredible tedium, there's no fast scrolling. Their solution is technically gorgeous, but it's just jaw-dropping to me that anyone could be so stubborn as to suggest that this is a reasonable replacement for a scrollbar for content that is of a very long but known length.

Agree completely. For long threads, Discourse is a usability disaster. phpBB is awful software, but everyone in the world can click on page 20 and know where they are. Jumping 2/3rds into a long topic using Discourse is essentially impossible for the average user.

But I love Discourse for at least trying something new and different - thats how progress is made. But some of their UI/stack decisions seem to have been made with no thought for normal people/web admins.

Question: Why do you need to jump to page 20?

In a long topic, what value does it give you?

We have found that the vast majority of users either link to a single post or scroll downwards. For mega topics, we have a summarize option that shows the "best of."

"We have found that the vast majority of users either link to a single post or scroll downwards."

Well they don't have any choice do they :D

I think that the summary tool of discourse is fantastic. So are the membership management tools/spam tools. A generation above phpBB. Just to balance out the criticism.

But the infinite scrolling is a deal-breaker (for me).

> Question: Why do you need to jump to page 20?

Question: why do you assume that an end user's lack of ability to articulate a need negates it?

So you're essentially rebuilding a browser inside of a browser?

Kinda, but on a different level.

A browser displays the web, but it uses an optimization where instead of loading all of the web, it loads only the web page you're navigating to.

This approach displays a web page, but it uses an optimization where instead of loading the entire page, it loads only the visible sections you're actively looking at.

But isn't that the point of a web browser? You're not viewing the whole of the internet at once, you're just viewing this one document. To go to other documents (down, up, sideways, within) you use hyperlinks?

Very well done. This is essentially the response I would have given in the abstract, but I appreciate that you actually have a presentable implementation.

Served!! Ha ha

What's the benefit? It seems like you've gone though a lot of trouble re-implementing features of the browser but without any obvious advantage in doing so.

It's really nice to be able to read something without interruption.

In terms of engagement, a user is much more likely to bail every time you require them to perform an action like click "next page." On Discourse they can just keep scrolling down as long as they care to read.

It also helps to track their position. On long topics, users often won't read it all in one sitting. I am a member of the Something Awful forums, and since they use vBulletin with pagination they can only know if I've opened a page and they use that to mark the whole segment of 20 posts as read. What if I stopped half way through? What if I opened the page in a new tab then closed my browser without looking at it? They assume I've read it all!

Logically, what is a "page" anyway and why should a user care about it? What does page 669 mean versus 670? How about we not expose implementation details to users and just let them get on with their reading?

Chapters (and page numbers) give people a cognitive clue as to where they are, when reading fixed content. Try removing the chapters and page numbers from a book, and most people will complain.

I haven't used Discourse, but in general I'm not sure pages are meaningful in forum software. The unit in a forum is the post, not the page. I read from post 1 to post N and the page boundary is always arbitrary. If forum software dropped the pagination but added post-ination, I'd take that as a very beneficial swap.

Your site still breaks when scrolling by dragging the scroll thumb down. On a long page, dragging the scroll thumb down (the way many people actually do scroll) makes the page jump around very fast, and skip larger sections as the page goes further down.

This is like saying someone would rather read a 7ft printed document than a 10 page document with normal 8.5 by 11 pages.

Excellent response.

Yet I feel compelled to ask: how much effort was invested in reaching such degree of finesse?

Pagination is (usually) very easy to implement and can be done completely on the server side. Your (very magnificent) solution sounds like it would require days, if not weeks, to be implemented, and adds plenty of javascript to the server-side part.

Do you think there's a "economy class" infinite scroll, or is it only viable for sites with a big budget (in effort at least)?

It actually was (and continues to be) a lot of work. It's the very first thing we started work on for Discourse and will likely never quite "end."

However, browsing posts is the most core functionality we offer so it's worth spending so much time on.

If the argument of the original article was "it's hard to do infinite scrolling well" I would have to agree. Pagination is much easier to implement. But for some sites, say Twitter or Facebook or apps like Discourse it's worth the effort IMO.

Good question, but you have to such fanboy when you ask?

Don't get jealous. You are gorgeous too <3

Jelous for...? more like a cringe when i see to much azz-kissing ;|.

It's not ass kissing when it's true.

I'm not going to apologize for complimenting someone's work. If that makes you cringe, then you will have to live with that. I think you will be happier if you try to choose other things to get upset about.

Your response is excellent.

But something is missing here, an awareness of when infinite scrolling is good vs bad. Infinite scrolling is good when the information is ephemeral, and changing all the time. Dating profiles, twitter stream, live updates.

But infinite scrolling is bad when the content is fixed. Like a forum. There is a cognitive clue when paging through a forum, how far you have read, where you are.

All your answers are technical based. But they don't answer the UI problem that scrolling through the discourse forums gives people a cognitive headache.

Agreed. I think the discourse developers are not considering psychology and HCI, but only the technical aspects. That the implementation of infinite scroll in Discourse gives you the same information that you get in a paginated view, does not mean that infinite scroll is at least as good.

"post x/y" tells you how far you are in the page, but only if you think about it. There's no longer any intuitive connection between the scroll bar and page position. The End key stops working intuitively, sends you to the end of currently loaded posts and then loads more posts so 1 second after pressing it you're not at the end of anything. Then there's the lag as you hit the top or bottom of currently loaded posts; even if you don't want to read any more, you get more. That's clever if you're a tabloid magazine because it entices the reader to read more, but the impression I get is it's not productive.

For maximum usability, why shouldn't the app support both infinite scroll and paginated, and let the USER choose (by url slug or GET param)? (Or by user setting if logged in)

> For maximum usability, why shouldn't the app support both infinite scroll and paginated, and let the USER choose (by url slug or GET param)?

I've always thought we could do this as there is no technical reason why we couldn't offer both.

But honestly we receive very few complaints about it from users of the software. It seems here on HN that infinite scrolling is not super popular, but we are not getting the same feedback from our users.

I suspect all you'd have to do for the other option is disable automatically swapping out pages when the bottom or top of a page is reached. Leaving the box with up and down arrows, adding a second set of double arrows, and using that for jumping N posts forward or back, or to the beginning and end.

I think javascript in-place loading of different pages is great (avoids reloading a lot of boilerplate and dependencies). What I don't agree with is the automatic altering of page contents based on where I am on the page, absent any indication (like clicking a button) that I want to change pages.

Infinite scrolling breaks what was a universal UI convention, and an interaction mode which has worked everywhere for well over 30 years, for a downright nebulous gain. You've made my browser's scrollbar widget dramatically less useful. Even on sites where I now know to expect it, I still end up unexpectedly jumping around the page while I'm trying to scroll through and read the content because the scroll bar I'm trained to use (30 years of training, remember) gets displaced out from under my mouse pointer when the next chunk of content loads.

You've replaced something which required no thought with something that requires conscious effort. Not only that, but I now have to learn how every site that implements infinite scrolling does it, because the conventions I expect for page length and page position don't hold any more. Given your response above, the very best you can hope to say is that compared to a paginated interface, you've only broken it a little bit. That's a very long way away from being worth the trade-off.

Infinite scrolling is gratuitous over-engineering, and as far as I'm concerned, any site which uses it is just broken.

This sounds suspiciously similar to popular arguments against the mostly-button-free iPhone interface to me.

The fact that two of the largest sites Facebook and Twitter use it is good enough for me. All the young ladies I've spoken to don't seem to mind infinite scrolling either.

Everything you said, but completely reversed.

You've addressed the technical concerns well through a solid implementation combined with some workarounds (requiring specific configuration for searchable content and tradeoffs (ie9 bookmarkable content).

But this doesn't really address the usability concerns - you've mitigated them by introducing new interaction mechanisms... but these mechanisms don't solve the problems raised, they just provide a means to work around them. These workarounds are excellent in comparison to other infinite scroll mechanisms, yet not as friction-free as not having it in the first place.

Yes, this is all my unqualified opinion of course - though these opinions are what have stopped me from adopting Discourse.

> But this doesn't really address the usability concerns - you've mitigated them by introducing new interaction mechanisms

New mechanisms that the user now has to learn, as opposed to the scroll bar, which they already know and understand. And of course, every site that does this will implement its new mechanisms slightly differently, so you've traded a universally useful and understood UI convention for a range of site-specific ones.

I don't hear P-interest users complaining. With some content you might want to use a 'Masonry'/'Isotope' layout as P-interest does. That comes with a ragged footer and doesn't really work unless you have infinite scroll.

As for the nonsense about 'never getting to the footer', the footer can be stuck to the window or dispensed with entirely, again a-la P-interest.

It is very easy to put together a '10 reasons why I hate this' blog article, it is much harder to put something together that works to the delight of millions.

Infinite scroll can be implemented well, but more often than not it's implementation is just terrible. Take Soundcloud for example. I love their service, their UI is generally pretty good, their site is usually fast, and in most cases, their product is a pleasure to use. But their implementation of infinite scroll is terrible. I'm not sure what it is, I haven't troubleshooted it too much but when you scroll a playlist with a lot of songs, every so often, the pages repeat themselves. And sometimes when you scroll down below a certain point it will just restart at page one.

So if I open a playlist with ~400 songs and I want to reach the bottom, there is no way for me to do it but to just scroll really fast and wait for each page to load. Okay, fine. But when I do this, usually about ~30% of the time it will start repeating pages or it will just start feeding the playlist from the first song again. In this case, I think infinite scroll does ruins the experience. If anyone out there from Soundcloud is listening, please consider implementing pagination.

Without going point by points to counter every reason I would like to say I absolutely love continuous scrolling when I am shopping or looking at items on a retailers website.

>Users will lose the page length orientation - the browser scrollbar become useless.

This is entirely untrue I can still use my scrollbar to get back to the top of the page again, it can also be used to easily skim the results that were displayed.

For most retail shopping I actually would rather have this than pagination especially if I am lazily browsing on my ipad, no reason to change hand positions.

I really don't like continuous scrolling for retail shopping. its easier to remember what page something was on than a relative position. I don't mind it for pointless content consumption like Reddit and Facebook, because I rarely ever want to go back to something on those platforms.

I can see your point.

The best use I have seen is a hybrid approach. Load 10 or so out of 100 items, use continuos scroll to show the remanding 90 and then use pagination to access the other results.

> This is entirely untrue I can still use my scrollbar to get back to the top of the page again, it can also be used to easily skim the results that were displayed.

Pop quiz: according to convention, while using your scrollbar to skim the results that are displayed, what position do you move the scrollbar to (or avoid moving it to) in order to trigger (or avoid triggering) loading the next chunk of content? Hint: it's not the bottom.

I dont actually know, usually I just slide back to the top of the page and slide down to where I think I need to be.

But please don't paginate a 500 word text into 10 pages either...

If you do use page numbering and next-links, please make the link to the next page amply big. Really big please, you don't have much to lose.

All the time I see people complaining about usage of HTML tables vs. pure CSS, and yet the one thing that drives me absolutely insane is a 4 point smaller than the rest "prev 1..3,4,5..10 next" navigation control at the bottom of a page. Always a treat to use on mobile too :)

I feel like just implementing pushState would be enough to solve almost all of these issues. Some simple design decisions could help with a few more of them.

I think saying flatly to not use infinite scroll lets me know that the writer doesn't have much technical skill. Rather, stating the current issues with infinite scroll and how to fix them is a million times more useful.

What problem does infinite scroll solve? Why add the complexity of more code which needs fix upon fix to get back functionality we already had? Getting infinite scroll "right" takes a lot of work (and nobody's done so yet, to my knowledge). Knowing how to fix the issues might be useful, but being able to spot that you don't need to incur the cost at all is so much more so.

I'm sure there're 10 reasons to use too. infinite scroll as opposed to infinite pagination? I like infinite scroll, it's just fun. It's a lot about the goal. If it's facebook or instagram, users won't go too far, they don't have time and they check feed regularly, however for search infinite scroll might be not the best fit

As an alternative, I'm going to start using something like http://emberjs.com/list-view/

(warning: not mobile optimized)

It solves 1, 2, 3, 4, 5, 7, and 10, and could reasonably be implemented with bookmarking to fix 6 and 9.

SEO is still an issue, but really, when is it not?

For SEO use the next link relation[0] e.g. <a rel="next" href="/resource?page={next_page_in_sequence}" />.

I am assuming more results are loaded based on scroll-depth < 100% + an overlay to stop the user clicking.

Google/bots will be able to activate the link and request the next set.

Uesful resource http://www.iana.org/assignments/link-relations/link-relation...

[0] http://www.w3.org/TR/html5/links.html#link-type-next

I drag the scrollbar and use pageup/down keys as much as I use the mousewheel.

I don't enjoy getting near the bottom of the page and suddenly being warped several screens ahead, then having to go back and figure out where I was. Find a way to prevent this if you're just loading comments to an article.

I find the scrollbar less disorienting because it has a high resolution than most mousewheels, its feedback loop is tighter, and I can jump both short and long distances; that is, there's no tradeoff between speed and continuousness.

I switch to pageup/pagedown/home/end on pages with infinite scroll because I can be guaranteed I won't miss any content and it's just less tiresome that using a mousewheel IMO.

A really stellar example of these sorts of bad user interaction is the Google Art Project if anyone cares.

What a pointless article. Every single one of these can be mitigated if not completely re-mediated. It should be titled, "10 reasons why infinite scroll takes more effort than you think."

What if browsers had dedicated support for infinite scrolling? Just like you trust regular scrolling to the browser or even operating system rather than implementing it yourself in javascript.

You could solve some of these problems, like the browser being able to bookmark or get the url of a specific section, and standardizing the way it's done.

#6 is the one I hate the most. Twitter does an alright job of taking you back to where you were but most sites don't.

True the some of the issues can be solved, the problem is that most of the sites are not solving it. Probably I could name it "Point to take into account when implementing.. " I'm sure hope to see better implementations to infinity scrolls on the web.

8) isn't absolutely true: http://googlewebmastercentral.blogspot.it/2014/02/infinite-s...

Ideally I'd prefer (rather than infinite scroll) progressive gzip and just flush/chunk out more data all at once. Technically not infinite but fast, simple and overall a better experience, in my opinion.

Number 7 is exacty what you want: http://www.nirandfar.com/2012/08/the-webs-slot-machine.html

Here's how linkedin does pagination

https://pbs.twimg.com/media/BkKYEmkCAAA3x8u.png:large

I think an infinite scroll would be better...

Or a limit on the number of pages you cn paginate to.

I think infinite scrolling would be much worse in that case.

These are for sure good reasons to not use infinite scroll. But I think this is more like an implementation problem than a problem with infinite scroll itself.

The scroll bar things is such a serious issue i would never consider using infinite scroll until that is dealt with on a browser level.

infinite scrolling works for things like Facebook, Twitter or any other case when you probably don't want the user to be alarmed by the amount of time they've spent on a site..

If i saw 'page 11' on Facebook, i'd instantly think about all the time i just wasted and try and be sure i didn't so that again.

I totaly agree. It is really great, when you need to click on link in the footer of the page, that keep running out.

As always it's never that simple.

Infinite scroll is great for browsing images. That's whats it's always been good for.

Except it's not. Those image loads start to bring a heavy memory hit. It especially stinks on mobile browsers.

That's something that's fixable. It's just people who use infinite scroll don't do a good job of fixing some of the problems of causes. But that doesn't mean infinite scrolling is bad.

Unless you unload old images after you've already scrolled past them, in which case it works fine.

The use of infinite scrolling does have certain obstacles that have to be taken into consideration. However- when done correctly it can be utilized correctly. Making a simple system that loads content at the end of the page is not enough- if you want to include infinite scrolling on your website you also have to take in mind the memory issue (as pointed out by EvilTrout), as well as other ways to dynamically update the url for book marking.

I am personally not a huge advocate of infinite scrolling (in most cases)but if are you are a seasoned programmer, that's not to say there are practical (and safe ways) to implement it.

If you want to launch a new site, and you have limited time (or are the only programmer) it's not cost effective to spend hours and hours working out all the kinks and make sure it's cross browser reliable etc... the novelty of infinite scrolling is something you should avoid. But if you have a good need, a good team (or yourself can spend time on thinking of all the various issues with it)- there is no reason why you could not implement it successfully.

I will not be using infinite scrolling on the comment system I'm writing for my start-up, pagination is good enough. But I will probably use it for the scroll back on a chat window (no one generally bookmarks chat...)

I agree with rch- people are always resistant to change... when you have something that removes a level of control- people freak out... new challenges introduced does not mean that it's bad, it just means it's a whole new set of things to think about. Humans are pretty resourceful. I liked the full physical keyboard on an old Nokia I had- but I got used to the touch keyboard- sure the touch keyboard is different, but there are many ways to make it better, and a physical keyboard adds a lot of much bulk to the phone.

I agree with the title of the post-- there are many reasons NOT to use infinite scrolling-- especially if it's just more of a novelty. But if done correctly (for for the right kind of content) it can provide an enhanced user experience.

My advice would to be: If you want to implement infinite scrolling-- make sure A) if you want to use infinite scrolling think about the aspects you have to deal with B) know general user's computer systems-- and how much memory you want to capture, C) decide if it's worth all the time to make it work right.

"New technology and trends always have good applications- it is up to you to decide if you are implementing it simply because it's trendy, because you want to learn, or because you want to enrich the community- if it's the latter- the best way to do is by sharing what you have learned, and learn from past failures" - Gus Anderson

And GOD HELP YOU if you have a page with a footer and infinite scroll.

This would have been better if it infinitely scrolled.

They did finish with "Scroll down for 10 more." ;-)

This really should be, 10 reasons illustrating the need for a more robust infinite scroll. Most of these issues seem to be solvable. Except maybe the footer thing, that's just dumb.

Most of those issues can be fixed.

Infinite scrolling also consumes a lot of memory since resources like images pile-up endlessly.

Compare that to a page-number navigation scheme where only the displayed resources on a given page are loaded.

Not everyone has a fast computer (or tablet).

There are ways around that, too. I'm sure there are better descriptions but just for example: http://engineering.linkedin.com/linkedin-ipad-5-techniques-s...

I hate flickr's infinite scrolling because of this. It's impossible for me to browse more than a few pages worth of images on flickr.

And of course flickr doesn't have any good tools for fine-tuning search results, so infinite scrolling is the only way to try and find what you want.

Reply on news.ycombinator.com