How to load a long page: pagination, "show more" or infinite scroll?

Long site pages, catalogs - how best to download them and what is more convenient for users? Online stores solve this problem in different ways, and solutions differ for mobile and desktop versions of sites.

General testing results

If you look at the most popular online stores, it is easy to see that pagination is more often used to break down content. The “show more” button works better, but the infinite scroll can even be harmful.

Users note that pagination with a large number of buttons and categories is slow and inconvenient. Often, after seeing such a breakdown, the user leaves, and does not remain to study the assortment. But thanks to it, the user spends more time on pages with categories.

Infinite scroll allows you to view the contents of the directory without barriers. But so the user's attention is scattered. It turns out that the page scrolls and scrolls, but no target action occurs. If there are too many products in the catalog (more than 150), scrolling is not a good solution, as it does not allow you to focus. This also makes it difficult to see the footer, which often contains important buying information.

But the “show more” button is popular only in 10% of online stores. Although pressing it requires a decision (however simple), and therefore most users return to the bestsellers at the top of the list. In this case, individual products are given more attention than when scrolling.

Features of using the "more" button

The most popular technical implementations of the "show more" button are:

• combination with "slow" loading in categories;
• on internal search results: it's good if this page is updated automatically at the user's request;
• on mobile: fewer products are loaded here.

The best option is when the “more” button is complemented by a slow download. In this case, 10-30 products are loaded on the screen, and after the user scrolls through about 70-80 products, you can display the "show more" button. It is worth calculating the number of simultaneously displayed goods individually: for example, for expensive product categories (such as household appliances), it is better to have few positions on the screen.

However, slow loading, just like scrolling, makes it difficult for the user to get to the footer of the site. If you insert "more" in time, this drawback is eliminated.

On the internal search results page, there are names that are not even directly related to the query. Therefore, here it is worth demonstrating no more than 25-70 products at a time, and gradually “loading” the rest. Infinite scroll is not used here. After all, a quick scan is not needed here, it is important to study the selected positions in depth.

Mobile versions: main nuances

Pagination won't work on mobile. First of all, because a page with a lot of buttons is hard to use from a smartphone. An infinite scroll will not allow you to get to the footer, and most users still expect to find information about the company here.

The "Show more" button will be the best solution, but taking into account some features that are specific to mobile versions:

• small screen size limits the number of simultaneously displayed products - no more than 30;
• scrolling a long page with your fingers is inconvenient, so a short list is better;
• "Slow" loading in mobile versions is implemented with difficulty.

Also keep in mind that after clicking the "Show More" button, users can use the browser's "Back" button. Well, if the user gets to the previous list - this point is very important to foresee.

So, use the "show more" button to break down products in long catalogs, but keep in mind that its technical implementation must be perfect.