Live data from Hacker News

Infinite Scrolling: When to Use It, When to Avoid It

nngroup.com

101–110 of 175 posts

Re: Infinite Scrolling: When to Use It, When to Avoid It

#101

Earlier quoted context omitted.

> you’re brought back to where you left off Which is all fun and games until the “page” is actually a mutable and constantly changing list. With a mutable list there is no concept of “where you left off”.

As alluded to in sibling comments—does pagination fix this problem?

This is caused by pagination. Without pagination, there's no pages that can get out of sync.

More specifically it's caused by offset pagination. The kind of pagination where you track "user is 90 items deep into the list" or "user is 3 pages into list and each page is 30 items"

Alternatively, index based pagination works by going "the last item the user viewed was id=12345". With this model refreshing the view won't cause a change, but the downside is you lose an easy way to tell the user how many "pages" deep they are. Even though "pages" is a flawed metaphor in a dynamic stream of data, users still like to see "you're on page 3 of 1 million"

Also this is only considering "append-only" style lists. Like comments sorted by time, or a list of versions of software, etc. If your list is dynamic, like the pages of Hacker News, where isn't ordered consistently but is instead a dynamic order or has mutable items, pagination will still be inconsistent.

Re: Infinite Scrolling: When to Use It, When to Avoid It

#102

Infinite scrolling makes the contents of the page unlinkable, breaks searchability and caching. It always makes the experience worse for unclear benefits. What's the problem it solves? Not resending the header and the footer on changing pages? Really?

Apparently it keeps people on page longer which is good for ad supported businesses. It’s user hostile though.

Re: Infinite Scrolling: When to Use It, When to Avoid It

#103
post #57
post #2

Infinite scrolling is universally bad for one, very simple reason: It breaks the scroll bar. One of the purposes of a scroll bar is to indicate how long (and/or wide) some piece of content is relative to your window. Another purpose is to indicate your current X/Y position within some piece of content. Both of those purposes are completely broken with the use of infinite scrolling, because the length (and/or width) o…

It also breaks the find button. The item you wanted to search might get unloaded, or not loaded yet, in some bizarre attempt at optimization when the javascript library resposible is an order of magnitude larger than the actual content anyway. My phone has gigabytes of memory. If you want to present five hundred items in a web shop, just list them and do not bother with any type of pagination, invisible or otherwise.

It also breaks the “back” button.

If you click on an item after significant scrolling, view the item, then click back, where are you? almost never where you were. Usually just at the top of the list.

Re: Infinite Scrolling: When to Use It, When to Avoid It

#104
post #84

Earlier quoted context omitted.

This is my primary issue with infinite scrolling. However, I wonder if it’s mostly a problem with today’s web browsers. Heck—maybe it’s not even browsers, but websites. I’m pretty sure a website could change the URL as you scroll, so if the page is reloaded (or bookmarked, etc) you’re brought back to where you left off. I usually dislike it when websites mess with URLs, but this seems like an excellent use case!

It's a problem with web technologies in general. A real application framework would have hooks for knowing where the viewport is. The web was designed from the ground up to display documents, so we would have to resort to URL hacks.

This doesn’t make sense. You can build this feature into a web app. It just isn’t often worth it when items aren’t in deterministic order, you’d have to track the hundreds of items the user has already scrolled, and the user doesn’t really care if they start over.

There’s nothing magical about this that a “real app framework” gives you.

Re: Infinite Scrolling: When to Use It, When to Avoid It

#105
post #2

Infinite scrolling is universally bad for one, very simple reason: It breaks the scroll bar. One of the purposes of a scroll bar is to indicate how long (and/or wide) some piece of content is relative to your window. Another purpose is to indicate your current X/Y position within some piece of content. Both of those purposes are completely broken with the use of infinite scrolling, because the length (and/or width) o…

This is like saying that electric cars are universally bad because they break the MPG meter…

Scroll position as measured by a scroll bar doesn’t make sense for an infinite (or indefinite) document. That doesn’t make an infinite document bad.

Re: Infinite Scrolling: When to Use It, When to Avoid It

#107
post #57

Earlier quoted context omitted.

It also breaks the find button. The item you wanted to search might get unloaded, or not loaded yet, in some bizarre attempt at optimization when the javascript library resposible is an order of magnitude larger than the actual content anyway. My phone has gigabytes of memory. If you want to present five hundred items in a web shop, just list them and do not bother with any type of pagination, invisible or otherwise.

Gigabytes of memory yes but there is load time and render time too. And rendering a 120mb payload of items and their thumbnails before I can even view the top of the page seems… not the best user experience. I don’t think there is an easy answer here. All options have some trade offs.

Deferring rendering of the images seems like an easy enough thing to do if your alternative is infinite scrolling. Pre-load the text and layout but leave the images and video until they're close to the viewport.

Re: Infinite Scrolling: When to Use It, When to Avoid It

#108
post #54

Earlier quoted context omitted.

> Infinite scrolling is universally bad for one, very simple reason: It breaks the scroll bar. It also breaks the back button, in all implementations I have seen so far.

What is “back” on a dynamic page like Reddit, Facebook or even this site? If “back” means “show me exactly what I last saw” it might mean you are showing stale data. I dunno. Shit ain’t easy once you think about it for a while. If all you have is a static unchanging set of items… might as well just use old school pagination! At least in my opinion. It’s when the list of items is constantly changing that things get in…

It might be stale, but it's the content I want to see. The F5 key still works if I care about getting it up to date.

Re: Infinite Scrolling: When to Use It, When to Avoid It

#109
post #2

Infinite scrolling is universally bad for one, very simple reason: It breaks the scroll bar. One of the purposes of a scroll bar is to indicate how long (and/or wide) some piece of content is relative to your window. Another purpose is to indicate your current X/Y position within some piece of content. Both of those purposes are completely broken with the use of infinite scrolling, because the length (and/or width) o…

It is possible to implement infinite scrolling and maintain the scrollbar height if you know the full number of results you’re going to scroll through and the height of each element (both of which are usually knowable). You simply set the scroller div to elementCount * numElements regardless of the number of elements. Most libraries that provide infinite scrolling do this.

Re: Infinite Scrolling: When to Use It, When to Avoid It

#110
Just have a user preference toggle.

Infinite scrolling IMO is part of the dark patterns that are attempting to collect all of your attention.

Having the mental break of waiting for a new page load is a significant change for me--I'm way more likely to quickly step away from paginated scrolling than infinite.

Post reply on HN