Website User experience: "Infinite scrolling load" for your product?

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

"Editor's note" This article author Danielle Arad, a user experience expert, translator @c7210. 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 required precision of operation is much lower 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.

Shortcomings

Limited Use cases:

Infinite scrolling works only for certain types of content that are part of a particular type of product.

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:

The JS library, which is used to create infinite scrolling, claims 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; In addition, these JS library in the browser and equipment compatibility and other aspects of the performance is also uneven, you must do a full test and adjustment work.

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, 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 single page of dynamic loading data, and the output of a page, which is more conducive to SEO, this is a problem you must consider. For some types of Web sites, it is not cost-effective to take risks in this area.

Impressions about 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 display more relevant information (including ads) through more content pages, then a single page of infinite scrolling does not apply 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 the 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.

Default Infinite scrolling mode

Users can choose whether to enable unlimited scrolling

After disabling, go 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 approach will bring you great inconvenience. (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 related information, and the new process will not leave the user out of the current environment-translator C7210 small)

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.

Translator Blog: Beforweb http://www.beforweb.com/