Interactive Design: Paging or loading is a problem

[Editor's note] @ Zi mu yoyo, author of this article, published on his personal blog. No matter on web pages or mobile apps, information is often not displayed on a single page. This requires some interactive modes that can expand page information: Pagination) and load (Continuous Scrolling ). Paging and loading are very common interaction modes that we encounter every day. It is precisely because they are too common that we do not even feel the existence of them. When we browse to the bottom of the page, click it when you see the page, and continue reading after it is automatically loaded.

However, this is a small point that will also give users a very different subtle feeling. This article will talk about the differences brought about by these small differences.

　Paging

By page, the content of a large part can be divided into small parts and displayed on a separate continuous page, which is easy for users to understand and find. Users can clearly know the content they want to browse, the part they have browsed, and the remaining content. Paging allows users to have clear expectations on the content they are browsing.

A long article will certainly use paging. One is the expectation of the user's content, and the other is a pause for the visitor. If you have read more than a dozen screens and the scroll bar stays in the middle of the browser, it is much more desperate.

　　

 

Let's take a look at the search engine and e-commerce websites, and we will certainly see the page control.

　　

 

When you search for or view the product list, the amount of content is unpredictable. The first function of paging is to tell the user the amount of information to browse. Second, pagination allows users to quickly skip unwanted information, or quickly jump to the home page or the last page, and choose the content they want to browse. Third, the page is very easy to locate and find. Maybe when I search for a skirt, I have already turned to the fifth page. Suddenly I think there is a pretty good line on the second page. I can jump to it and find it quickly.

The paging control actually creates a natural pause for the website content. If this pause is used well, it can make the product more rhythmic. However, when you browse a page of content, you 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. In case of paging, the user is likely to think about it. Is it true to continue browsing? Or leave the website? Therefore, when pages are displayed, some users are often lost.

　Continuous Loading

Continuous loading is an interactive mode opposite to paging. There is no obvious boundary or pause between information. When the page scroll to the bottom, new information will be automatically loaded in.

Various social networks are especially fond of using such controls. Users are not interrupted and can browse and immerse themselves smoothly.

　　

 

However, because the information is automatically loaded, the page does not seem to end, and it is difficult to predict the content of the page. Blindly loading may lead to a lost feeling: What is the content of this page? How much content have I browsed? When can I read this page? It is also difficult for users to search for information they have seen on such pages without pause. However, it is very suitable for casual and entertainment-based social products to use loading methods that do not interrupt user information flows.

When using the paging control, you must click to view more content. Therefore, information retrieval is requested by the user. When continuous loading is used, new information is automatically loaded and the user is passively accepted.

　　Discount Method

Paging and loading have their respective advantages and disadvantages. Today, many websites also adopt some ways to fold: Paging loading is used together.

For example, Quora will display a "More" button after automatic loading four times. After the continuous information flow, the user will be paused to actively obtain More information.

　　

 

Sina Weibo also adopted this compromise mode, and the page appears after automatic loading twice. For most users, when Browsing Weibo in their spare time, loading the content twice can satisfy them. For users who need to browse more information, they can also know how much they actually browsed.

　　

 

To enable users to quickly see more images, Google image search also uses the continuous loading method. However, when searching images, users also need to specify their locations, it is also very likely that you will go back to the image you just saw, So Google will also mark the page number on the same page for easy location and search. This is another method of compromise.

　　

 

　Mobile client

On mobile phones with smaller screens and more varied use cases, sliding is obviously easier and easier to operate than accurate clicking. The mobile phone product information architecture is relatively simple, and the user's browsing duration is relatively short, so the user's attention is relatively dispersed during use. Therefore, most apps use continuous loading. Besides, loading saves more space than paging controls.

　　

 

However, products such as search engines retain the paging design.

　　

 

Loading or paging is only a small design point, but excellent products are composed of countless such small points. According to the features of the product, the most appropriate interaction method is what the interaction designer wants to do.

Link: http://www.leeyue1007.com/index.php/2012/09/05/pagination/