Infinite Scroll

They know roughly how far down it was, so they scroll. The list loads more as they go, in a different order from yesterday because two hundred items have been added since. There is no page to return to, no address to reopen, and no way to say how far through they are. After four minutes they use the search box, which does not know what they are looking for either.

Loading more content as somebody nears the bottom removes every interruption from browsing. That is the whole appeal, and it is real.

What it removes along with the interruptions is the ability to know where you are and to come back. This module is mostly about which lists can afford that.

Anatomy of a Long List

Every long list is built from the same pieces, whatever loads them. Naming the pieces makes the three patterns comparable rather than a matter of preference.

The Parts

Eight, and the last three are the ones that go missing.

The items. The batch, meaning how many arrive at once. The trigger that fetches the next batch, which is either a scroll threshold or a control somebody presses. The loading indicator. The end state, for when there is nothing more. The footer, which sits below the list and belongs to the page rather than to it. The position, meaning whether the list can say where somebody is and be returned to. And the filters, sort and search that let somebody avoid the list entirely.

Three Ways to Load

The same eight parts, arranged three ways.

Pagination splits the list into numbered pages, each with an address. Infinite scroll appends the next batch as somebody approaches the bottom, with no boundaries. Load more starts like infinite scroll and hands over a button after a while, which is why Friedman calls it the hybrid and recommends it for most catalogs.

The Property That Decides

One question separates them, and it is about the person rather than the content.

Does anybody need to find a specific item, return to a place, or send somebody else a link to one? Where the answer is yes, the list needs a stated position, and only two of the three patterns have one. Where the answer is no, because the list is a stream organized by recency, position means nothing and continuous loading costs nothing.

Batch Sizes Worth Starting From

The batch is the one number to settle early.

Friedman's starting point is 10 to 30 items in the first load, nearer 10 on a phone and 30 on a desktop. The switch to a button comes somewhere between 30 and 70 items. Crutchfield shows 58 before its Load more button appears. Those are starting points to test against rather than rules, and having a number beats the usual approach of loading whatever the API returns.

Pro tip: Ask one question about your longest list before anything else. Does somebody ever need to come back to a specific item in it? The answer decides the pattern, and everything after it is detail.