Explanation on whether to choose paging or loading in interactive design

The author of this article @子木yoyo posted it on his personal blog. Whether on a web page or a mobile app, information often cannot be displayed entirely on one page, which requires the use of some interactive modes that can expand page information: pagination and continuous scrolling. Pagination and loading are very common interaction modes that we encounter every day. Precisely because they are so common, we don’t even feel their existence. When we browse to the bottom of the page, we click on the pagination when we see it, and continue reading when it loads automatically.
But it is this small point that will bring users a very different and subtle feeling. This article will talk about the big differences these small differences bring.
Pagination Pagination can divide large content into small pieces and display them on separate continuous pages, making it easier for users to understand and find. It allows users to clearly know how much content they want to browse, which part they have browsed, and how much is left. Pagination allows users to have clear expectations about the content they are browsing.
Longer articles will definitely require pagination. First, it gives users an expectation of how much content there is, and second, it provides a pause for viewers. How frustrating it would be if a user has scrolled through more than ten screens while reading an article and the scroll bar is still stuck in the upper middle of the browser.
Interaction Design: Paging or Loading? That's the Question 123WORDPRESS.COM

Interaction Design: Paging or Loading? That's the Question 123WORDPRESS.COM

If you look at search engines and e-commerce websites, you will definitely see paging controls.

When searching or viewing a product list, the amount of content is unpredictable, so the first function of pagination is to tell users the amount of information they need to browse. Second, pagination allows users to quickly skip information they don’t want to read, or quickly jump to the homepage or last page, and independently choose the content they want to browse. Third, pagination makes it very easy to locate and retrieve. Maybe when searching for a skirt, I have already turned to the fifth page, and suddenly I remember that there is a good entry on the second page, so I can jump directly to find it quickly.
The paging control actually creates a natural pause for the content of the website. If this pause is used well, it can make the product more rhythmic. However, when the user finishes browsing a page, he or she must stop reading and click to jump to get more content. It is undeniable that this pause will interrupt the user's thinking to a certain extent. When encountering pagination, users are likely to think about whether to continue browsing or leave the website. Therefore, when encountering pagination, some users will often be lost.
Continuous loading Continuous loading is an interaction mode that is the opposite of paging, with no clear boundaries or pauses between messages. When the page scrolls to the bottom, new information will be loaded automatically.
Various social networks particularly like to use this type of control, so users will not be interrupted and can browse smoothly and immerse themselves in it.

But because the information is loaded automatically, the page seems to have no end, and it is difficult to predict how much content the page will have. Blind loading will make users feel lost: How much content is there on this page? How much content have I browsed? When will I finish reading this page? For this kind of page without pauses, it is also difficult for users to search for information they have seen before. However, for this kind of social product that focuses on leisure and entertainment, it is still very appropriate to use a loading method that does not interrupt the user's information flow.
When using paging controls, users must click to view more content, so information acquisition is actively requested by users. When using continuous loading, new information is loaded automatically and the user passively accepts it.
Compromise method Paging and loading have their own advantages and disadvantages. Many websites nowadays will also take some compromise methods: paging and loading together.
For example, Quora will display a “More” button after automatically loading 4 times, giving users a pause after the continuous flow of information, allowing them to actively obtain more information.

Sina Weibo also adopts this compromise method, and paging appears after automatically loading twice. For most users, who browse Weibo in their spare time, loading the content twice is enough to satisfy them. For users who need to browse more information, it also lets them know how much they have browsed.

In order to allow users to quickly see more images, Google image search also uses a continuous loading method. However, when searching for images, users also need to clearly know their location and are likely to go back to look for images they just saw. Therefore, Google will also mark the page numbers on the same page to facilitate positioning and searching. This is another compromise.

On mobile clients with smaller screens and more varied usage scenarios, sliding is obviously simpler and less prone to misoperation than precise clicking. The information architecture of mobile products is relatively simple, users’ browsing time is relatively short, and their attention is relatively scattered when using them. So most apps use continuous loading. And loading also takes less space than paging controls.

But products like search engines still retain the pagination design.

Choosing to load or paging is just a small point in the design, but excellent products are made up of countless such small points. Choosing the most suitable interaction method based on the characteristics of the product is what an interaction designer does.

<<: Solution to automatically submitting the form and jumping to other pages after pressing Enter on the web page

>>: Super detailed tutorial to implement Vue bottom navigation bar TabBar