Does "infinite scrolling load" apply to your product?

It's a miracle that I still have a clear idea of Saturday Sunday at home.

Today brings a short translation of infinite scrolling load. In fact, before the micro-blog also spit a burst of groove, the deepest impression is that there is a time on what the site to point footer in the "About Us", really dot, often the main point when the contents of the automatic loading on top down, endless ... At that time, I was jealous of you want this footer with hair ah? This time to see this article, feel that there are a lot of the content can arouse their own resonance, so take over to do, I hope you can also bring some useful things to friends. Walk on.

Enter the translation here. How to present a series of data content in a friendlier way, including articles, links, pictures, search results, and so on-is not easy for designers. In this regard, page number navigation (pagination) is a proven and trustworthy solution.

In recent years, however, we've found that more and more websites are starting to render content using an infinite scrolling (infinite scrolling)--when the user browses to the bottom of the page, the traditional "next page" data is automatically loaded and exported to the current page.

Infinite scrolling is really a good model for some types of Web sites or mobile applications, but in some cases it can also have disastrous consequences.

Let's take a look at the pros and cons of infinite scrolling loading.

Advantages

Effectively reduces the interface complexity and saves space: we no longer need bloated and complex page number navigation links or buttons.

For touch-screen devices, the interactive approach is more intuitive: in the interactive environment of mobile applications, sliding up the operation of the rolling screen has become the most basic user habits, and the need to operate far less accurate than the click of a link or button.

Higher participation: The ease of interaction that comes with these two points allows users to focus more on content rather than on operations, making them more willing to immerse themselves in exploration and browsing.

Disadvantages

Limited Use cases: infinite scrolling is only applicable to some specific types of content in certain types of products. For example, in the Electronic business site, users often need to switch between the product list and the details of the page, in this case, the traditional, with page number navigation can help users more secure and accurate return to a particular list page.

Additional complexity: Those used to create infinite scrolling JS library Although all claimed to be easy to use, but you always need to be in your own products to different degrees of customization to meet your own needs, and these JS library in terms of browser and device compatibility performance is also uneven, You must do a good job of testing and adjusting.

Goodbye, footer: If you use a more typical infinite scrolling load mode, this means you can say goodbye to the footer. It's a good idea to consider the importance of the footer for your site, especially the user, and if it does have more important content or links, then it's better to move to a more traditional and secure approach. Do not manipulate your users, when they browse to the bottom of the page, see the footer, but because the automatically loaded content suddenly appear and in any case can not click the link in the footer, they will become more angry.

SEO: Focus on a page dynamic loading data, and a page of output compared to the same way more conducive to SEO, which is you must consider the problem. For some types of websites, it is not cost-effective to take risks in this area.

The impression of the number of pages: In fact, from the point of view of the user, this is not negative; however, if it is important for your site to show more relevant information (including ads) through more content pages, then a single page of infinite scrolling is not applicable to you.

Knowing the pros and cons, let's take a look at the two sites I personally think are in place in terms of the use of unlimited scrolling.

Twitter

Twitter is an important reason for using infinite scrolling is that each content unit is very short refining, itself is the content as a whole, users do not need to switch between "list index" and "content details" to get all the information, and when the mouse hovers over a content entry range, the corresponding action ( Replies, deletes, favorites, etc.) are rendered; All content and functionality are concentrated in the current context.

Tumblr

By default, Tumblr loads content through infinite scrolling, but they provide users with an option to disable unlimited scrolling in their settings, which is very thoughtful. Tumblr's product characteristics determine the universality of its content type, and the content of different types of users may have a great difference in form; allowing users to set content-loading methods autonomously can take care of different user groups.

The default infinite scrolling mode

Users can choose whether to enable unlimited scrolling

When disabled, back to the traditional way of page number navigation

Here are some examples that I personally think are not suitable for unlimited scrolling.

Bing's Image Search

Similar to Google, Bing uses an infinite scrolling load in the search results page for images and videos. However, when the user clicks on a thumbnail to enter the picture Details page, and then back to the search results list will lose the previous positioning, which makes the user must scroll the page to find the location before the click. If your keywords will produce a lot of search results, this way will cause great inconvenience to you. (now Bing has changed this practice, and when users click on the thumbnail in the search results, they will immediately output a pop-up layer that contains large images and relevant information), and the new process allows the user to no longer detach from the current environment-translator C7210 Note)

Youtube

I love the overall design of YouTube, but also understand their intention to constantly modify and adjust the design, but they have recently changed the homepage of the page number navigation to unlimited scrolling practice or let me somewhat uncomfortable. Similar to the problem with Bing, YouTube's actual content (video) is on a separate page, and the user obviously doesn't want to go back to the list page after watching a video and find the list reloaded.

The other thing that's embarrassing is that YouTube's unlimited scrolling load is not so "automatic" that users need to click a button to get the list to load more video content; In a way it's not bad, because it does give control to the user, and it implements the same Tumblr as mentioned earlier, But the form that combines infinite scrolling directly with manual triggering is somewhat nondescript.

Best practices

I hope you can learn from the above to see if your product is suitable for the use of infinite rolling load. If the answer is yes, the following points may help you avoid some of the key problems in your practice:

Provides a downgrade scenario: front-end developers should provide a solution that provides a smooth downgrade, taking into account the inability of javascrit to function in a particular environment.

Can be set: if possible, consider providing users with settings options to facilitate their choice of the most appropriate way to browse. This will make the user feel intimate and improve their satisfaction and loyalty to your product.

Visual feedback Tip: When new content is automatically loaded, to provide the user with the necessary visual feedback, such as a variety of animation effects that can express "load", users will not be able to understand the current situation; without visual cues, if the load time is too long, the user will be mistaken for the next content.

Help users locate: Do not lose the list before the user accesses the content details and clicks the rollback button on the browser. If there is no way to do this, and this is important to your product, then it is better to consider the traditional way.

Testing: Testing the actual performance of an infinite rolling load scheme using a variety of devices that the target user group might use.

If you want to reprint, please specify: This article from the IS for Web

Original English: Http://uxmastery.com/infinite-scrolling-fad-or-fab