In this article, we will explain why you need to stop building websites with infinite scroll.
HN Discussion:
https://news.ycombinator.com/item?id=18268544Posted by
ohjeez (karma: 14667)
Post stats: Points: 121 - Comments: 68 - 2018-10-21T15:39:44Z\#HackerNews #
infinite #
problems #
scroll #
with
Article content:
TL;DR: While infinite scroll does provide a solution in some cases, it can be less than ideal for users.
Infinite scroll can be disorienting, uncontrollable, and can cause your users stress.
In this article, we will explain why you need to stop building websites with infinite scroll. But to start, letʼs look at a brief history of scrolling.
A brief history of scrolling
To understand what scroll really is, let’s see where the term [1]scroll comes from.
scroll (n.): c. 1400, “roll of parchment or paper”
Scrolls originally were used for when information became lengthy (like religious contents). So much content became difficult to manage, read and write.
When computers came into our lives we still needed a way to navigate through large pieces of content.
- Lines (and columns)
In the early years of the internet, UX designers invented/explored many ways of paging/scrolling the content. Before the web was popular, we were scrolling lines on our screen.
Horizontal scrolls made scrolling a tool not only for reading the content but also a way to navigate on the computer screen. - Windows (not the OS one)
Using scrolls to navigate the screen encouraged people to create windows. Using windows, you would be able to view multiple pieces of content at one time.
Windows 3.1 “Program Manager” has multiple scrolls. - Web pages
Scrolling solves a very fundamental problem we have while browsing web pages. However, scrolling can cause many issues for users and can negatively impact the user experience. Letʼs take a closer look.
The experiences invented to navigate web pages
I’m going to try to define how developers and designers created experiences to navigate users in their web pages.
Let’s start by learning some back-end pagination systems:
This is the most known pagination system. In this technique, first, we have to find how many items we have to paginate:
-- All posts count
SELECT COUNT(*) AS total FROM posts
After counting all the items, we have to calculate the pages. Let’s assume we’ll show 10 items per page:
-- First page items
SELECT * FROM posts LIMIT 10
And if we want to skip to the page 3, we need to skip first 30 items using OFFSET:
-- Third page items
SELECT * FROM posts LIMIT 10 OFFSET 30
And we will send the pagination information to the client as follows:
{ "pagination": { "items_count": 100, "current": 3, "total_pages": 10 }, "items": [...]
}
Pros and cons of offset based pagination:
\* 👍 Good: Easy to jump to any page
\* 👍 Good: Client is freer about the experience
\* 👎 Bad: Performance issues
\* 👎 Bad: Duplicate items may be shown if data changes After big data came into our lives, it became too hard to calculate the table count since it is constantly growing (think about Twitter). So, developers came up with newer techniques to paginate the data: cursors.
Every row must have a unique cursor. You do not have to count the whole table which makes it impossible to know actual page count:
-- Get extra 1 item to get its cursor.
SELECT * FROM posts ORDER BY id DESC LIMIT 11
Assume every post has a unique cursor field (or its ID in this example) to help pagination. The client will have pagination information as follows:
{ "pagination": { "next": 1234 // extra itemʼs ID (cursor), null if end of data. }, "items": [...]
}
And you can ask for the next page using cursor:
-- Offsetting records using 1234 cursor
SELECT * FROM posts WHERE id >= 1234 ORDER BY id LIMIT 11
Pros and cons of cursor based pagination:
\* 👍 Good: More performant, no table counts
\* 👍 Good: Showing duplicate items is not possible if someone inserts a row in the center of the table
\* 👎 Bad: Impossible to jump to any page
\* 👎 Bad: Client is not free with the experience, total page and current page are not calculated Letʼs now take a look at some navigation techniques.
Next and previous
The experience: click based
The technique: offset based or cursor based
This is mainly used to navigate blogs. This is the oldest version of infinite scrolling. Using this approach, the user may not know where the content ends.
WordPress pagination.
The experience: click based
The technique: offset based
This is the most usable (according to me) navigation type. It uses offset based pagination which allows you to jump to the page you want, or go to the end or beginning with just one click.
Bootstrap styled pagination bar examples.
Google uses this kind of navigation in search results:
Google’s pagination.
Load more
The experience: click trigger based
The technique: cursor based — may also be offset based but would be awkward
This is one of the newest pagination techniques and it also uses the previous version of infinite scrolls.
A “Load more” button.
In the example above, the user clicks the “Load More” button to see more content.
The experience: scroll based
The technique: cursor based — may also be offset based but would be VERY awkward
Infinite scrolls are the newest experience of cursor based pagination techniques.
Hugh E. Williams claims [2]he invented infinite scroll in 2005 on Microsoft.
[3]Metafizzy also created a tool to help developers build infinite scrolls. Infinite scrolling makes users scroll the page to the infinity.
Up until this section, I told you how we end up building websites with infinite scrolling. I will now tell you why infinite scroll is not a good idea.
Footer is a very basic unit of web page anatomy, just like a header. Sites keep some detailed information and links in the footer such as phone numbers, addresses, help and support links. If users are searching for this detailed information, they mostly scroll down to the find footer.
With infinite scrolls, users can have a hard time trying to find the footer. Infinite scroll makes finding the end of the page impossible. Not being able to reach the bottom of a website can make the user stressed (which is not great for user experience).
The sites with an infinite feed (like Twitter) solves the footer problem putting this required information and links in the sidebar. The sidebar is a solution to this issue but still not a good one. Footer should stay on footer.
Twitter’s footer on the right sidebar.
Social media applications work with time. The users’ intention is to navigate the past. In this case, infinite scroll makes the navigation easier. Also in this kind of experience, infinite scroll is good for performance, especially in mobile.
But if you have an e-commerce, news, magazine or a blog website and the userʼs intention is to move around the items or articles, infinite scroll becomes a nightmare for them. In a timeline based list, people mostly don’t look for a date or unique moment. On item based lists, the user wants to find an item. Infinite scrolls make your items almost impossible for your users to find.
Give users more control
Users generally do not like the UIs when they feel they cannot control it.
A scroll event is not very intentional to do something. People navigate the page, and if they want to call an action they mostly click or touch (known as triggers). They inform the UI about their decision. But scroll is triggered without any decision.
Infinite scrolls make the pages less controllable for the users. Users can also encounter jumping glitches.
Instead of infinite scrolling, put a “load more” button, which is a trigger. This will give control to the user. (I’d prefer old style numbered pagination but we assume we use cursor based pagination right now).
Allow users to go wherever they want
People navigate between pages, bookmark some of them, and share pages with their friends, etc.
However, infinite scrolls cannot keep the state by its design. Users cannot share their current state. Which also means you cannot track users’ actions using analytics tools.
It’s almost impossible to allow your users to go wherever they want within your pages if your back-end paginates is cursor-based. If you have an e-commerce website, give users control to navigate to the products they want.
Additionally, if you have a “sort by” functionality in your listing, you must show the user a pagination. In an alphabetically ordered list, you mustn’t force users to scroll down to products starting with K. They will go mad with this experience.
You should allow users to see where they are. Userʼs scroll for a time and because itʼs a stateless design they do not know how many times the “next page” loaded. When they refresh the page, they will reset all the way back to the original page. The user will then have to scroll back down to find where they were before.
Conclusion
Infinite scrolls are nice in a few cases but they are usually not problem solvers but problem makers. UX people shouldn’t consider infinite scrolling as a silver bullet to solve their pagination issues. Stop building websites with infinite scroll.
[4]https://logrocket.com/signup/
References
Visible links
1.
https://www.etymonline.com/search?q=scroll 2.
https://hughewilliams.com/2012/03/06/ideas-and-invention-and-the-story-of-bings-image-search/ 3.
https://github.com/metafizzy/infinite-scroll 4.
https://logrocket.com/signup/HackerNewsBot debug: Calculated post rank: 103 - Loop: 251 - Rank min: 100 - Author rank: 38
In this article, we will explain why you need to stop building websites with infinite scroll.
logrocket.com
