Script endless scrolling demo. Everything has a beginning

Websites with endless scrolling or very long scrolling are becoming one of the most popular ones today. Yes, the trend appeared a couple of years ago, but is gradually becoming more and more famous. And calling such scrolling fashion, style, or a “trick” is not correct. Rather, it is a necessity. The need to present large pieces of content to the eyes of visitors. Literally open up to them everything that is on the site.

We all know the endless downloads of news on VKontakte, Facebook, Twitter and other social networks, so it’s not difficult to imagine what we’re talking about.

And what’s most interesting is that such scrolling has advantages. On the one hand, there is almost 100% user involvement in learning the content. He doesn’t have to be distracted, study menus, sections, wait for the next pages to load, he doesn’t even have to think about navigation.

On the other hand, infinite scrolling is in demand on mobile devices X. How smaller size screen, the more scrolling is necessary. There is little that can be placed on such a screen, so headings, a short description, a small picture, and this is quite enough. Already on big screens You can also display navigation, buttons, frames, different blocks, etc. Moreover, by managing space on mobile screen, scrolling becomes more accessible for use.

But this is one side of the coin. What about designers? What do they find in the endless scrolling? Why are they trying to apply it to projects of different themes and styles, even if they don’t have a mobile version? It's simple: infinity is convenient for conversion, for attention, for artistic ideas, for example Apple Mac Pro, Boat, firewatch.

And even though not every site can use infinite scrolling, there are ideas and solutions from experts on how to achieve success.

Promotion

Users will scroll further and further only when they are interested. Especially when the download is complete home page. Therefore, if they see the photographs, headlines, and text they need, then there is no doubt about their actions. The designers embodied this in, for example, Cheetos, Photobazaar, Komarnicki selections on Pinterest, DeviantArt They try to first create interest in the content, and then allow visitors to search and explore what is available.

Unobtrusiveness

Many web designers strive not to impose long scroll to the spectators. And this is true, because not always and not all users want to endlessly scroll and scroll through content in search of something interesting or necessary. Moreover, you always want to have some guidelines in front of your eyes: where we are, what section, what else is on the site. This is why we often see a floating navigation bar at the top of the page. And this is convenient, since endless scrolling simply hides the menu line from view, and switching to another section is not always convenient. This Uplug, Voux, Geranandpartners, Company.airbus(navigation has been moved to the right).

Everything has a beginning

Endless or even long scrolling can cause users to get lost on the page. It is more difficult for them to navigate: at the beginning they are still or already in the middle. Moreover, even if there is a “up” or “back” button (usually in the form of an arrow), visitors return to the beginning of the page, and not to where they left off. In the VKontakte news feed, “Back” is implemented precisely for convenience. That is, it returns our gaze to where we hit earlier. The work was carried out similarly on flickr. If you select an image, open it in the same window, and then press the “back” button, we will return exactly to the moment where we were before, and not to the beginning of the page. Online stores work the same way. etsy, amazon.

But, on the contrary, the project Fomo doesn't allow this. The top of the page with tiles and materials will always load. And even Boomandthearty no either, despite it seemingly not so much simple navigation at large volume content.

For the most part, web designers strive to ensure that information about the page position of a particular visitor is remembered. And it's convenient even on mobile devices.

Activity before eyes

Agree, but it is very convenient if you not only know that the information on the page is updated with some frequency, but also see this update. And designers use this often, adding a variety of loading progress indicators. The indicator is also used to load content. At the same time, the loading animation is so fast, almost instantaneous, that often the eyes do not even catch it.

For example, this is the use of “load more” buttons or almost instant loading animation Time, Vogue, Yandex Zen, Voux, Ria.

Impact on infinity

Even if a page has infinite scrolling, users want to scroll through it faster. Subconsciously. This is especially noticeable if the scrolling is not endless, but simply long and sooner or later, it ends. The desire of web designers is different - to keep visitors on the site, so most often the scrolling of pages always has the same speed. In other words, no matter how fast we turn the mouse wheel, the speed at which new material appears will not increase and content will appear only when the developers intended. This is perfectly implemented on Apple Mac Pro. You can even set the scrolling speed in the number of lines in the mouse settings, but the content on the site will change at its specified speed. It works the same way Amur Tiger, company.airbus.

It's difficult to say whether this is good or bad. Depends, of course, on the content, its features, and requirements for assimilation.

Ease of viewing

First of all, this concerns online stores and product cards. For example, webmasters add “Like” or “Add to Bookmarks” icons to each product. This makes it easier to study content if there is a lot of it. Moreover, during the search, the quantity found is also displayed. That is, even if the page with the selected products is incredibly long, the user already knows roughly how much he has viewed and how much is left for him to do. This is convenient, although designers often ignore this approach. It’s much easier to create cards with products and load them onto a single canvas. That's what they did on Ericbeauduin, Vagabond, Skechers even a photo bank Photobazaar does not suggest selecting photographs for the future.

But other projects, on the contrary, allow you to sort information. This and Wildberries, Ozon, Lamoda.

Effects, more effects

It’s hard to imagine a modern website without effects. Without them he would be boring. Some would even call it simple and dull. And the easiest way to spice up long and endless pages of content is to add loading animations. smooth appearance content tiles. And of course, parallax in its various manifestations.

As you know, on average a user stays on a website page for 8 seconds. If he is interested, he will stay longer and will return in the future. And just like that, parallax can add interest and attract the attention of visitors. We talked earlier about the essence this effect, and how it affects conversion.

But sometimes designers, using it when endless loading The villages, on the contrary, only do harm. For example, you want to buy something, and every time you have to watch the parallax effect while waiting for the product information to load or watch the animation effect. Nice? Not good. Shop Ericbeauduin I used the pseudo-parallax effect, but very little. It doesn’t disrupt our usual flow of content learning, but adds a little zest.

Innovation

Infinite scrolling The village is interesting, it gives scope to imagination and creativity. But it’s one thing to simply consider implementation methods and some aspects of such a phenomenon as endless page scrolling. Finding it is another matter. Really beautiful.

Lexus offers the study of technology, development and other things in a very unusual form. The content topic is selected using mouse movement, and after selection, it redirects to the appropriate page. Here, all the images are distorted in perspective, and additional loading of the material is offered. There is animation of transitions and appearances, but it is light and almost imperceptible. And parallax is used on the main page for selecting topics.

Claridgeicon has a long scrolling, but interesting. Even if we ourselves have nothing to do with construction or building design, this site will captivate you. There is so much content, and so different, that you involuntarily scroll the page and look at it. Either videos, then drawings, then infographics, then photographs. And, yes, the top “sticky” menu is always visible, and each item is attached to the wanderer section. What can we say about 360 degree panoramic video?

Foodisforeating with a secret. The navigation is so miniature that it is easy to miss and not notice, but it has one large page with scrolling that affects... content display and infographics. Yes, this happens too. In other words, you don't just scroll down. Using the mouse wheel you can see the loading of images, the gradual appearance of text, graphs, etc. It's difficult to describe, but it's better to see it with your own eyes. There are many effects, but overall everything looks simple and functional.

Channel National Geographic is also capable of hitting. The page may not look large and long, but the content can be scrolled different sides. There are many sections and sections, and scrolling in each one is left-right and up-down. In this case, it is not just a selection of posts that is loaded, but the entire environment (photos, videos, news, articles) on some topic. Original and clear. You really look, search, even examine. And such involvement has a positive effect on conversion.

Powerofpossible talks about human energy, technology, human capabilities, oil and solar energy and much more. But it tells in an animated form, where each piece of content appears as you scroll the mouse wheel. Moreover, everything was created on beautiful backgrounds, with the mysterious idea of ​​people and thoughts appearing in the clouds, and then they descend to earth and under water (the underwater world). Long page, long scrolling, but interesting content.

Twinpinejourney also offers history and details of the Twin Pine casinos and hotels in California. On the one hand, it is proposed to simply view the page from top to bottom, on the other hand, scroll through individual sections from left to right in order to find out some details. Even the road map has animation, which depends on scrolling the mouse wheel. And it even depends on your scrolling speed. The whole thing is interesting and beautiful.

Completion

There are still many innovative ideas and scrolling endlessly or for a long time on such sites does not cause either irritation or inconvenience. One way or another, this, if not a trend, but a phenomenon can create a completely unimaginable exciting experience when viewing a site. If scrolling is intuitive, similarly user interface, then she is only welcomed.

In any case, you need to clearly decide for yourself whether infinite scrolling is needed this project or not. It is not enough to simply select content and write code so that it all loads immediately on the main page.

This means that there is a lot of room for ideas and they can be implemented many times and always in different ways. Which once again confirms that web design is a very creative, innovative, and technological field.

If you've ever been on Twitter or searched for an image on Google, you've probably seen infinite scrolling ( endless scrolling, infinite scrolling) in action. You could spend hours scrolling through a page with no end in sight.

In recent years, marketers have been actively experimenting with various types content. However, now the question of how best to display information on the screen so that the user feels as comfortable as possible is increasingly at the forefront. And infinite scrolling is one of the most popular solutions nowadays.

Want to understand how infinite scrolling affects SEO and whether it's even worth using it on your site? First you need to decide what this tool is.

Advantages and disadvantages of infinite scrolling

The same approach to work can lead one company to success and another to failure. Infinite scrolling is without a doubt one of the most promising ways to present content to readers. However, this does not mean that you should immediately switch to infinite scrolling: first, you should consider all the pros and cons.

The benefits of infinite scrolling

1. It is convenient for mobile users

When using a touchscreen phone, it's much easier to scroll a page than to click on small links.

2. It helps keep the reader's attention

3. It makes it more convenient to display large amounts of information on the screen

Do you want to post an impressively sized article on your website, but don’t want to divide it into several parts? Endless scrolling will help you get out of this situation.

4. It is ideal for sites that update information in real time

Infinite scrolling is optimal solution for resources that provide real-time data. This is another reason why social networks like this tool.

5. Infinite scrolling does not cause any inconvenience to users related to loading speed

Resources that implement an infinite scrolling system offer, on average, 7 new messages to the user with each scroll, which is not much different from the indicators of sites with other types of navigation.

Disadvantages of Infinite Scroll

1. It makes it difficult to find the information you need.

If the reader needs to get to specific element content on a site with endless scrolling, he will be forced to spend certain time to scroll the page. This is why Google does not offer users infinite scrolling to view search results.

2. It doesn't allow you to use a footer

The footer is a place where you can place a link to the company’s history or, for example, contact information. Many people are accustomed to looking for this information at the end of the page. If you use infinite scrolling, you'll have to find a different place to place your help information.

3. It does not allow the user to skip uninteresting content in one click

A visitor to a site with endless scrolling who comes across content that is not very interesting to him will be forced to scroll through it manually.

4. Infinite scrolling increases the load on servers

When introducing infinite scrolling, JavaScript is actively used, as a result of which the requirements for server performance are constantly growing.

How do you know if your site needs infinite scrolling?

The pros and cons of infinite scrolling listed above give you general idea about this tool. If you're still not sure whether to use it, answer two questions:

1. Does your business require users to search for products or services on the site?

If so, opting for infinite scrolling could have extremely negative consequences for you.

Companies operating in the field ecommerce, for example, cannot know what their next client will need or what information they should provide. If you expect the user to get to the section he is looking for, your task comes down to making his path as easy as possible. And the endless scrolling in this case may create problems for the client.

Take, for example, Etsy, a large online trading platform. The company tried using infinite scrolling on its website, but was unable to gain any benefit from it. Etsy chief engineer Dan McKinley can't give a clear explanation this fact. Here's what he says about infinite scrolling:

“People are extremely sensitive to any interface changes. But if the search algorithm returns the 16 most relevant results in top part list, infinite scrolling allows the user without spending extra effort, to obtain an "infinite" number of less suitable results (which, in the absence of an infinite scrolling system, he would have to press the corresponding button to obtain).

I don't mean to say that endless scrolling is stupid. This tool can bring a lot of benefits, but before you decide to use it, try to determine how users will react to the innovation.”

If you're serious about using infinite scrolling on your site, it makes sense to do split testing. This will allow you to understand how much your customers like this type of navigation.

2. Does your site primarily offer content?

If so, infinite scrolling is probably what you need.

All content of sites designed to entertain visitors has the same usefulness for those. The owners of this kind of sites do not care which page a person ends up on. The main thing is that the content that he finds there is capable of attracting his attention.

As clear example You can cite the news site Inc. As you can see, a significant part of the page is occupied by . At the same time, the information is arranged in such a way as to make the process of its perception as easy as possible.

Resources like Inc. or Mashable, often do not have a footer, which quite successfully replaces the menu button at the top of the page. The user thus has a choice: he can instantly move to specific element website, or just scroll through the feed in search of interesting materials.

How does using infinite scrolling affect SEO?

If you are going to implement infinite scrolling, you should find out how they “treat” this idea search engines. Here's what Scott Langdon of HigherVisibility has to say about this:

"When scanning a website with an infinite scrolling system Google robots will “see” only that part of the information that the user sees before the first scroll. The remaining content will not be indexed and, accordingly, will not be able to appear on the search results page for a particular request.”

However, this problem can be dealt with. The advice of John Muller, representing Google, will help you do this:

1. An infinite scrolling site should have static links that break up the information on the page so that robots can “understand” it correctly.
2. To carry out pagination (that is, breaking information into several pages), a company must have a content management system (CMS) at its disposal.
3. After dividing the "infinite" content into individual pages you need to make sure that each of these pages has a full URL.
4. You also need to make sure that none of the elements are included in several pages at once.
5. When dividing a site into several parts, it is necessary to make changes to . When it comes to indexing, any changes made to , are ignored by Google robots.

The diagram below shows how to and how not to paginate (in the second case, some of the content elements will be indexed twice).

When it comes to online marketing or web design, it is extremely important to initiate and shape successful ideas in your own field. Today we'll talk about one of these trends - endless scrolling (scrolling) of pages on a website: what opportunities does it present for business? What is the best way to implement and when should this feature be abandoned? The material is written based on the translation of an article about Infinite Scrolling from SpeckyBoy.

Main sections of the article:

Millennials are known for their habit of skimming websites in a matter of seconds, deciding whether to stay or leave. Competing projects must know exactly how to gather and retain audiences, or they risk being left in the shadows. In an effort to attract the attention of the masses, for example, using the parallax effect, many have also decided to introduce infinite scrolling. This approach has been actively used for several recent years, and very examples such as Facebook, Twitter and Instagram only confirm its effectiveness.

However, the fact that infinite scroll is suitable for these sites does not mean that it will be suitable for your web resource. The feature is quite useful when performing certain tasks, but on some projects it can, on the contrary, hinder the achievement of goals.

What is infinite scrolling?

Since this term can be used to refer to various characteristics And functionality, in this case we mean endless scroll with automatic download content as the user scrolls down the page. It seems that the page is endless and the user can scroll as much as he wants.

Infinite scrolling capabilities

Infinite scrolling works best with certain types content. For example, it is ideal for sites with low level engagement, such as Twitter. Because this web resource is filled with short blocks of text, visitors quickly scan the content.

Most often, infinite page scrolling works well with large amounts of easy-to-digest content. If it suits your company's goals, this function It will suit you too.

Positive characteristics of the method:

• User Retention. This is one of the main characteristics of infinite scrolling, plus it allows you to quickly engage visitors. In addition, it also motivates users to stay on the page since they can endlessly scroll through the content by scrolling down.
• Easy navigation/ease of use. Scrolling – easy to understand and universal method, not requiring special effort for execution. It immediately gives visitors access to the main information of the site.
• Suitable for viewing illustrated materials, as well as for mobile device users. Infinite scrolling is a good way to ensure that you see a lot of simple visual elements. Also good for mobile devices where the best way Navigation is considered to be scrolling with one finger.

This is why this approach is great for Instagram, whose main goal is to quickly present a series of . There is no need to linger on each image for a long time, plus most visitors to the service use mobile devices.

Reasons to Avoid Infinite Scrolling

Despite the advantages, it is best for owners of some types of web projects to refuse to implement such a mechanism altogether:

• Commercial sites. They make it easy to search and purchase products that meet certain characteristics. Web resources designed for sales should provide simple and accurate tools. If your company's main goal is to make sales, using infinite scroll is not recommended. Develop a simple and user-friendly design With disabilities so that consumers can concentrate on their purchase.

• Any sites that provide searches for specific products or services. When users land on an infinite scrolling project, they are faced with a lot of options. This is not always suitable for those with specific goals. Too much a large number of options will most likely force the visitor to leave the web resource.
• Sites with content oriented for a long period of time. Magazines and web resources where articles require in-depth study will not benefit from the use of infinite scrolling. Continuously loading content can feel overly overwhelming and will cause users to leave the site rather than continue reading.
• Difficulty in navigating when repeatedly searching for specific information. One of the main reasons not to switch to this function is the difficulty of repeating specific information. This may affect in a negative way in commercial niches. For example, due to endless scrolling, it is almost impossible to make a bookmark. Many Pinterest users have encountered similar problem, when, returning back to news feed, couldn't find the desired entry, present on the page just a few seconds ago.
• Impact on search engine optimization. One of the most discussed problems in the topic is the negative impact on SEO optimization. Infinite scrolling pages are essentially one single page, meaning the amount of content available to search results, is decreasing. Moreover, only one meta-description will be entered, and as a result, the possibility of specifying relevant information about your brainchild. The situation is similar, but they don’t care so much about SEO.
• User convenience. Some site features are simply not compatible with infinite scrolling. For example, if you have footnotes and headers. People will scroll down the page looking for footnotes, but they won't be able to get to them. As a result, most likely, they will not remain on your web resource. It will also be difficult for them to get to the footer and the information in it.
• Lack of choice. Currently, this kind of scrolling is not targeted to the preferences of visitors, since they do not have the option to select content. Even if the user wants to skip some information blocks, he will not be able to do so. This is frustrating for those who prefer to view texts in a more limited amount.

By the way, regarding commercial sites. The tips above work well if you need to sell one or more products. In the case of a large one, it is unlikely to be possible to place all the information on one page. You can combine infinite scrolling with other navigation options.

That is, in the example above, if you wish, you can load products by clicking or use navigation. Having a menu allows you to partially solve problems with searching for specific products and the inability to exclude certain information.

If you do decide to add infinite scrolling to your website, the following techniques can improve the user experience:

• Develop a Backup Plan. Since this function is implemented with using JavaScript, some people will not be able to access scrolling. Developers should anticipate this situation and add pagination.
• Keep Navigation Visible. If visitors have to scroll through an endless stream of articles to get back to the previous page, they probably won't do it.
• Don't use a scroll bar. Some developers do not recommend combining an infinite scroll with a scroll bar that shows users the amount of information remaining on the page. This misleads them into thinking that the article is close to completion when content continues to be added.
• Provide loading display. It's a frustrating experience when visitors browse through a seemingly endless stream of data and find themselves stumped. Be sure to add a loading icon to indicate that the process is in progress.

Total

Similar to others, endlessly scrolling a page can lead to both positive results, and to negative ones. It all depends on your goals and type of project. Owners of sales-oriented sites, as well as web resources whose content requires detailed study, should think carefully before implementing such a feature. At a minimum, add alternative options navigation. Remember that indiscriminate use of this trend may result in the loss of visitors.

Please write your additions and thoughts on the topic below.

In 2011, it was very fashionable (in my opinion, this fashion came from Facebook) to create “endless scrolling” on your websites: this is when the user turns and turns the mouse wheel, and all new search results are loaded by Ajax at the bottom of the page, turning ordinary scrolling into endless and causing “cognitive dissonance” in the user encountering this for the first time.

I also recently saw an article on this site in which the author expressed his dissatisfaction with “endless scrolling” and called for the use of good old “pagination”.

I agree with the author. I myself am a drug addict, and sometimes I sit at the monitor, enchanted, with glassy eyes, spinning, spinning, spinning the magic wheel, unable to go to work/to work/to the store/eat/drink/to the toilet, and I spin it with with one single thought: “Well, when will you all end?!” (What can you do - I'm used to finishing things).

One morning I got up and firmly decided: “Stop putting up with this!”

I present to you my small script, which I recently wrote for my “ social network"(with blackjack and whores).

To see the demo, download the archive and run the file “test/test.html”.

What innovations does this script offer:

Since they turned the main “scrollbar” into something unclear, we need to return the normal “scrollbar”, which we did by drawing a gray stripe on the right side of the page, immediately to the left of the regular “scrollbar”.

How far this bar at the top has reached is how many sample results we have already scrolled through. In general, this strip is kind of black. Where it is gray is the place in the entire sample where we are now.

Please also note that the page address changes as you scroll. So you can scroll halfway through this evening, bookmark the page, turn off the computer, go to bed, wake up in the morning, turn on the computer, go to the page you bookmarked yesterday before going to bed, and continue scrolling from the same place you were on. stopped. And, moreover, you can scroll from this place not only forward, but also backward.

And regarding navigation to any desired page: You can get to any page here - just substitute the number of the selection page you need into the web page address. Since human readable URLs are now standard, this should be a viable solution.

This script is obviously not something carved in granite, and I myself rewrote half of it when I got up this morning. However, the performance seems to be stable, and has been tested in latest versions Chrome and FireFox. I’ll say right away: I’m not chasing “cross-browser compatibility” - it can always be completed if someone wants to use this script on their “cross-browser” site.

It seems like everything, the demo speaks for itself. The post provokes comments.

What else can be done (based on comments):

When you click anywhere on the strip, you go to the corresponding selection page.

Remove data pages from the top of the web page when there is too much data on the web page (so as not to slow down).

Examples of improved "infinite scrolling".

“What should I use for content – ​​pagination or scrolling?” Some designers still struggle with choosing one method or another for their projects. Every decision has its own strengths and weak sides, and we will look at all of them in this article. It will be easier for you to do right choice for different projects.

Infinite scrolling is a technique that allows users to scroll through a massive stream of content without a visible finish line. This technique refreshes the page as you scroll down the content. As tempting as this may sound, it is clearly not a one-size-fits-all solution for every site or application.

Benefit #1: User Engagement and Content Deployment

When you use scrolling as the primary method of data navigation, the user stays on the web page longer, thereby increasing user engagement. Due to popularity social media,Users often deal with massive streams of content; endless scrolling offers effective method browse this ocean of information without having to wait for pages to load.

Endless scrolling is almost a must-have for discovery interfaces. When the user is not looking for something special, but just needs to look through a large number of elements to find what he likes.

A sea of ​​pins on Pinterest

You can see the benefits of infinite scrolling using the Facebook news feed as an example. By tacit agreement, users know that they will not be able to see everything in the feed, since the content is updated too often. With infinite scrolling, Facebook tries to show users as much information as possible as they view this stream of data.

Facebook news feed: user scrolls more and more to update content

Benefit #2: Scrolling is better than clicking

Users find it more convenient to scroll than to click. Using the mouse wheel or touch screen scrolling is faster and easier than clicking. For a long section of continuous content, such as a lesson, scrolling is much more convenient than cutting the text into several separate screens or pages.

If you use clicks, then each portion of content update requires an additional click, as well as time to load the page. For scrolling: content is updated continuously; only one action is needed. Source: designbolts

Benefit #3: Scrolling is good for mobile devices

The smaller the screen, the longer the scroll. The popularization of mobile browsing also favors scrolling. Gesture controls on mobile devices make scrolling very easy. As a result, users get a truly responsive experience regardless of the device they are using.

Disadvantage #1: Page performance and device resources

The speed of page loading largely determines the user experience. Many studies have shown that slow loading times cause people to simply leave a site or delete the app, which leads to low conversion rates. And this is bad news for those who use infinite scrolling. The more the user scrolls down the page, the more content will load on one page. As a result, the performance of the page slows down greatly.

Another problem is limited device resources. On many infinite scrolling sites, especially those with a lot of images, resource-constrained devices like the iPad can become sluggish due to huge amount downloaded sources.

Disadvantage #2: Finding and locating data

Another problem with infinite scrolling occurs when users reach a certain point in the thread, they can't bookmark their location and come back later. If they leave the site, they will lose their progress and will have to scroll down again to get to the same point. The inability to determine the user's position when scrolling not only causes inconvenience for users, but also spoils the entire experience of interacting with the product.

In 2012, Etsy spent a lot of time implementing a scrolling interface and discovered that new interface didn't work as well as old version with pagination. And although the number of sales remained almost unchanged, user engagement was reduced - people did not use search as actively as before.

Infinite scrolling search interface on Etsy. The current version is based on pagination.

As Dmitry Fadeev notes: “People will want to return to the list of search results to check the positions they just saw, compare them with other products somewhere at the bottom of the list. Infinite scrolling not only breaks this dynamic, it makes it difficult to move up and down the list, especially when you need to return to the page at another time, and you are thrown back to the very top, having to scroll down again and wait for the content to load. Therefore, an infinite scrolling interface is actually slower than a paginated interface.”

Flaw #3: Irrelevant scrollbar

Scroll bars do not reflect the actual amount of data available. You'll happily scroll down thinking you're close to the end, which in itself forces you to scroll a little more, only to see that the results have simply doubled in number. From the point of view of accessibility and understandability of the interface, this is not very good.

The scroll bar should reflect the actual length of the page

Disadvantage #4: No basement

Footers exist for a reason: they contain content that users need - if users can't find something, or they need Additional Information, they often go there. But since the data feed scrolls endlessly, when the user comes to the bottom, another piece of data is loaded, and the footer simply cannot be reached.

When infinite scroll was introduced on LinkedIn in 2012, users could scroll the screen before content had even loaded.

Sites with infinite scrolling should be able to reach the footer, making it sticky, or move links to the header or sidebar.

Facebook has moved all the links from the footer (e.g. 'Legal', 'Careers') to the right panel.

Alternatively, you can create a Load More button to load content upon request. New content will not automatically load until the user clicks the button. This way, users can reach the basement without any problem.

Instagram provides a ‘Load More’ button to ensure that the footer is always available to users.

Pagination divides content into separate pages. If you scroll down the page and see a series of numbers, this series of numbers is the pagination of the site or application.

Benefit #1: Good conversion

Pagination works well when the user is searching for something in a list of results rather than just browsing through a stream of data.

You can appreciate the benefits of pagination using an example Google Search. Finding the best search results will take a second or an hour, depending on the subject of your research. But when you decide to stop searching Google in the current format, you know the exact number of search results. You can decide when to stop and how many results to look at.

Results data Google search

Benefit #2: Feeling in control

Infinite scrolling is like endless game– no matter how far you have come, there is a feeling that you will never reach the end. When users know the number of available results, they can make more informed decisions instead of digging through an endlessly updated list. David Kieras, in his study “The Psychology of Human-Computer Interaction,” notes: “Achievement end point gives a feeling of control.” The study also explains that when a user has limited but relevant results, they can more easily determine whether what they are looking for is there or not.

In addition, when users see the total number of results (of course, when it is not infinite), it is easier for them to estimate how long it will take to find the desired material.

Benefit #3: Element Position

The page-based interface makes it possible to constantly remember the location of an element. Users won't necessarily remember exact number pages, but they'll remember it roughly, and the numbered links will help them get there faster.

With pagination, users control navigation because they know which page to select to get to where they were.

Pagination is good for commercial sites and applications. When users shop online, they want to be able to return to where they left and continue shopping.

The MR Porter website uses pagination for products

Disadvantages: Additional steps

To go to a new page using pagination, the user must find the target link (for example, “Next”), hover over it with the mouse, click and wait for it to load new page.

To get the content you need to click

The main problem is that most websites show users a very limited amount of content on one page. By making pages longer without compromising loading speed, you will provide users with large quantity content on the page and reduce the number of clicks required.

When should you use infinite scrolling/pagination?

There are only a few cases where infinite scrolling is effective. It is best suited for sites and apps with user-generated content (Twitter, Facebook) or visual content (Pinterest, Instagram). Pagination, on the other hand, is robust and well suited for sites and applications that cater to targeted user actions.

Job Google search engine is a great example of such sites. Google Images uses infinite scrolling because users can process images much faster than text. Reading search results takes much longer. This is the reason why Google Search results are still displayed in a more traditional manner.

Conclusion

Designers must weigh the pros and cons of infinite scrolling and pagination before making a choice. The choice depends on the content design, and how that content is delivered. In general, infinite scrolling works great for projects like Twitter, where users consume an endless stream of data without looking for anything specific, and pagination works better for search results pages, where people are looking for something specific, and where the position of data elements is important.