TL; DR. Although the endless scrolling is suitable for some cases, but it can create problems.

Infinite scrolling can be misleading, out of control, and stress users.

In this article we will explain why you need to stop creating sites with endless scrolling. But first, consider a brief history of the issue.

Brief history of scrolling

To understand what scrolling is, look at the origin of the word .

scroll ( n.): c. 1400, “roll of parchment or paper”

Scrolls were originally used when the document became too long (for example, religious content). With so much content it became difficult to manage, it is difficult to read and rewrite.

When computers came into our lives, we still needed a way to navigate large portions of content.

The evolution of scrolls in computers

1. Rows (and columns)

After the advent of the web, designers invented / explored many ways to paginate / scroll content. Before the Internet, we scrolled lines on the screen.

Horizontal scrolling made the scrolling tool not only for reading the content, but also for navigating the screen.

2. Windows (not an operating system)

Having scrolling pushed people to create a window interface. With the help of windows, you can simultaneously view several pieces of content.


In the Program Manager Windows 3.1 several "scrolls"

3. Web pages

Scrolling solves the most fundamental problem when browsing the web. However, it can cause many problems for users and can prevent them. Let's take a closer look.

Options for navigating web pages

I will try to determine how developers and designers created an interface for navigating web pages.

Let's start with some server systems pagination.

Layout of pages based on the offset

The most famous pagination system. In this technique, you first need to find how many elements need to be paginated:

-- All posts countSELECT COUNT(*) AS total FROM posts

After that you need to count the pages. Suppose we show the 10elements on the page:

-- First page itemsSELECT * FROM posts LIMIT10

And if we want to go to the page 3, then we need to skip the first 30elements using the offset ( OFFSET):

-- Third page itemsSELECT * FROM posts LIMIT10OFFSET30

Information is sent to the client as follows:

{
  "pagination": {
    "items_count": 100,
    "current": 3,
    "total_pages": 10
  },
  "items": [...]
}

Pros and cons of pagination based on bias:

• Good : easy to go to any page
• Good : more free option for the user
• Bad : Performance Problems
• Bad : Duplicate items may appear as data changes.

Pagination by pointer

Big data makes it difficult to calculate the tables, because the data is constantly coming (think about Twitter). Thus, the developers have come up with new methods for pagination: by pointers (cursor).

Each line is assigned a unique pointer. No need to calculate the entire table and know the exact number of pages:

-- Get extra 1 item to get its cursor.SELECT * FROM posts ORDERBYidDESCLIMIT11

Suppose that each message has a unique pointer (the ID in this example) for pagination. The client will receive the following information:

{
  "pagination": {
    "next": 1234 // extra item's ID (cursor), null if end ofdata.
  },
  "items": [...]
}

And you can request the following page with a pointer:

-- Offsetting records using 1234 cursorSELECT * FROM posts WHEREid >= 1234ORDERBYidLIMIT11

Pros and cons of pagination on the signs:

• Good : more productive, there is no calculation of the table
• Fine : displaying duplicate elements is not possible if someone inserts a row in the center of the table
• Bad : it is impossible to go to any page
• Bad : restrictions for the client, the total number of pages and the number of the current page are unknown

Consider some methods of navigation.

Next and previous

Action : based on clicks
Technique : based on bias or on pointers

It is mainly used to navigate through blogs. This is the oldest version of infinite scrolling. With this approach, the user may not know where the content ends.


WordPress Pagination

Pagination

Action : based on clicks
Technique : based on bias

In my opinion, this is the most convenient type of navigation. It uses pagination based on offset, which allows you to go to the desired page, and also with one click go to the end or the beginning.


Examples of numbering

Google uses this navigation in search results:

Load more

Action : trigger
Technique : based on pointers, although you can implement on the basis of bias, but it will be inconvenient

This is one of the newest methods of pagination, it also uses the previous version of the infinite scrolling.


Load More Button

In the example above, the user clicks the Load More button (Load More) to see more content.

Infinite scrolling

Action : scrolling-based
Technique : based on pointers, although it can be implemented on the basis of bias, but it will be VERY inconvenient

Endless scrolling is the latest pagination technique based on pointers.

Hugh Williams claims he invented the endless scrolling in 2005 for Microsoft .

Metafizzy has developed an open source tool to help developers realize endless scrolling.

Infinite scrolling allows you to scroll the page to infinity

Stop making sites with endless scrolling!

So far we have been considering how to get here. Now let's talk about why it is so bad.

Footer search

The footer is the basic unit of the anatomy of a web page, just like the header. The sites provide details and links there: phone numbers, addresses, links to help and support topics. If users search for this information, they usually scroll the page down to the footer.

With endless scrolling, users find it difficult to find a footer, because it’s impossible to see the end of the page. The inability to reach the footer can strain the user (which is not great).

Sites with endless scrolling (for example, Twitter) solve the problem by placing the necessary information and links in the sidebar. The sidebar is a solution, but not a good one. Footer must remain footer.


Twitter footer on the right sidebar

Do not use endless scrolling if you do not have a timeline or tape

Social networking applications work with the timeline. Users tend to navigate in time, work with the past. In this case, endless scrolling simplifies navigation. Here it is good for performance, especially in mobile devices.

But if you have an online store, a news site, a magazine or a blog, then the users desire is to navigate through elements or articles, and then endless scrolling becomes a nightmare for them. In the timeline list, people generally don’t look for a date or a unique item. In lists based on items, the user wants to find the specific item. The endless scrolling makes it almost impossible.

Give users more control

Users tend to dislike UI, which they cannot control.

The scrolling event does not explicitly lead to the intention of doing something. People move around the page, and if they want to perform an action, they usually click or touch the screen (these are triggers). They inform the UI of their decision. But endless scrolling works without any solution.

Infinite scrolling makes pages less manageable. Users may also encounter jumping glitches.

Instead of scrolling endlessly, put the “Load More” button, which is a trigger. This will give the user control. (I would prefer the old style of page numbering, but we assume that we are now using pagination on pointers).

Allow users to go where they want

People move through the pages, save some to bookmarks, share with friends, etc.

However, the endless scrolling can not save the state in its essence. Users cannot share the current state. It also means that you cannot track user activity using analytics tools.

If your internal pagination method is pointer-based, it’s almost impossible for users to arbitrarily navigate. If you have an e-commerce site, then let your users navigate to the right products.

In addition, if there is a function “Sort by” in the list, it is necessary to show the user the pagination. If the list is in alphabetical order, you can not force people to scroll through the list to the letter K, otherwise they will go crazy.

It is necessary to show the user where he is. When he refreshes the page with endless scrolling, he will be thrown back to the very beginning, and he will have to scroll down to where he was before.

Conclusion

Infinite scrolling is good in some cases, but as a rule, it creates more problems than it solves. Designers should not consider endless scrolling as a silver bullet that solves all problems with pagination. Stop making sites with endless scrolling!