What is infinite scrolling?
AJAX infinite scrolling is a well known digital experience, Essentially it’s a technique to load content continuously as the user scrolls down the page, eliminating the need for pagination and navigation between pages that contain the same stream of content.
The first time i encountered Infinite scrolling was on the Facebook app a few years back and i thought it’s a very good way to keep serving the user with more and more content and keep him/her on the page (or in the app).
User’s don’t like navigating between pages, Each link click prompts a new page load and usually web pages take a few seconds to load.
We all know that moment where we click a link, Stare at a blank page for a few seconds and only then the new page loads and we can continue consuming the content we came for.
In my opinion that’s what makes Infinite scrolling such a great experience for users and such a powerful tool for publishers.
In this post i’m going to talk about how i implemented the infinite scrolling technique, the UI/UX bumps i encountered and i how i attempted to solve them
The back story
I’m Yakir Reznik, by day i work as the Head of Digital marketing at yes D.B.S, the largest satellite TV Supplier in Israel. At my day job i manage the road map for the company’s digital assets, Conceptualize new digital experiences and bring them to life.
Other than my day job i also take small private projects as a UI/UX designer and a full stack developer. Something about designing a new digital experience just gets my motor running while seeing a poorly designed experience gives me the chills and i immediately start thinking of ways to make the experience better and convert more users.
About a year ago David, one of my close friends, asked me to help him with his brother’s website. It turned out that Davids brother, Ron, is a painter and he’s trying to make a solid monthly income selling his paintings online.
At the time Ron had a website that featured his work and Abstract paintings for sale.
The website was built using WordPress, Elementor, WooCommerce and dozens of other plugins that were used to enable all kinds of functionality.
The first thing i noticed about the website was that it was slow. Very slow.
Every page load took more than a few seconds and navigating from page to page was generally a frustrating experience.
Keep in mind that since it’s an eCommerce site that sells art, It’s full of high quality heavy images and you can’t really give those up.
The next things i noticed was that since the entire site was implemented using generic plugins and theme the UI/UX was very very general and not at all fitting an art eCommerce website. I knew i had to take care of those problems but that’s a different story for a different time.
Long story short, After a few months of trying to optimize the user experience on the website I’ve decided that in order to create a good experience I had to re-do the entire website and that’s what i did.
Why & Where i’ve decided to implement ajax infinite Scrolling
After i redesigned & developed the website i started looking at session recordings to figure out how i can improve the new experience.
Needless to say, I don’t know a lot about art, Let alone the process users go through in their minds before they decide to buy a painting or an art print.
And so, in order to get some sort of indication of how good the new experience i had to see how users use the website.
The new “shop” page i designed used pagination — The site featured a few hundred paintings and there was just no way to display all of them on one page without having that page take a long time to load.
So i built the shop page in such a way that each page shows 16 items and the user can then navigate to the next page or jump to whatever page he likes.
The first pattern i noticed was that users want to browse, Almost every user that landed on the shop page went over 5 to 6 pages of items, Then when the users saw an item they liked they would click it to get more info and more images of that item.
After viewing more info about the item the users would press the “back” button and navigate back to the shop page (the list of items).
And so, most users would go back and forth between the shop pages and the product info pages for each item they liked.
For the first task i decided to create a better browsing experience.
The current experience was “Scroll, Scroll, Scroll, Click to next page, Scroll, Scroll, Scroll, Click to next page, Scroll, …” it felt like a lot of work and although navigating between the pages was relatively fast – it still felt like a bit of a drag.
I wanted the users to have a more fluid browsing experience so i’ve decided to implement Infinite scrolling at the shop pages.
I wanted to expose the users to all of the paintings on one page as they scroll.
How i made the ajax infinite scrolling work
Generally, getting the next content to the page wasn’t very difficult, Little that i knew that was just the tip of the iceberg.
I created a function on the WordPress back-end that takes a request with the current page number and the next page number and then returns the next 16 items and generates them in the page.
After implementing those back-end and front-end functionality everything seemed to work really well! Users were able to just keep scrolling the page and getting more content served to them without the need for pagination or navigating to the next page.
Sounds great right? it is. But with that great experience of getting more content displayed on the same page came all sorts of problems and kinks.
Problem #1 : Ability to jump between pages
Although i already knew i was going to implement AJAX Infinite scrolling, It was clear to me that it’s important users to jump from page 1 to page 6 or to the last page. So i still needed the pagination links to show at the bottom of the page.
For the user, it was a bit weird that you scroll and scroll and get all the items shown to you but on the pagination links it shows as if your still on page #1.
The users would then scroll all the way down and view all the paintings in the shop and then navigate to page #2 and get see the same items they saw before.
I solved that problem by dynamically updating the pagination links with the current page show after each load of new content. That way, after dynamically loading the items from page #2 into page #1 the pagination links would show as if the user is on page #2.
So the user also knows what page number they’re on and they can jump the other pages.
You can get a sense of that behaviour on the Abstract Paintings page in the site’s shop.
Problem #2 : Navigating back from a product page to the correct shop page
As i mentioned earlier, The common user behavior i observed in the session recordings was users browse the paintings in the shop pages, then navigate to a product page (more info about a certain painting) and then the user would navigate back to the shop page (usually using the browser’s back button).
What would happen in this case is as follows:
- The user would land on the shop page (page #1 in the pagination)
- Then the user would scroll down and get served with paintings for the next pages
- The user would click one of the paintings from the next pages and navigate to a product page
- After viewing more details about a painting, The user would click the browsers “back” button and return to the shop page.
The problem was – even though the user previously scrolled down and viewed paintings from page 2, 3, 4, etc… once he/she navigates to a product page and clicks the “back” button – the browser navigates the user the the first shop page the user landed on. That means the user gets presented with paintings they already saw and scrolled past.
I think that’s very annoying, Obviously the desired behaviour is that when a user returns from a product page to the shop page it would take him back to the last shop page he saw, i.e. show the user the last paintings he saw before leaving the shop page so the user can keep browsing from where they left off.
There are a few ways to solve this problem, Essentially i needed a way to tell the browser what is the last page number the user viewed in the shop pages before they navigated away to a product page.
Essentially i had to make sure the current page URL gets updated every time the user gets served with the next page’s content. That way when they use the browser’s back button on the product page it takes them back to the correct shop page number.
Problem #3 : Maintaining page scroll position when navigating back from a product page to the shop page
After solving problem #2, described above, I realised that taking the user back to the correct shop page wasn’t enough. For instance if a user clicked the last item in the shop page when he goes back he’s presented with the first items from said page which is still pretty confusing and does not allow the user to really continue browsing from where they left off.
At that point i realised that what i really need is to take the user back to the last shop page they viewed and scroll the page to the last position that the user was in before they navigated away.
That is a bit more tricky to do, There are a number of ways to achieve this behaviour, I decided to use the HTML built-in anchoring feature.
That means when a user clicks an item in the shop pages i tell the browser the last page number the user was on and the item that the user clicked: URL + Anchor, for instance:
That way – if and when the user clicks the “back” button while in a product page — the browser takes the user back to the correct page number in the shop and scroll the page to the last item the user clicked.
It appeared that this solution works pretty well, For some reason sometimes the browser would scroll the page all the way down.
My guess is the browser remembers the documents last scroll height and when the user returns to the page the browser tries to take the user back to the last scroll position.
The next action i took is adding a front end function that runs 500 milliseconds after the page loads and checks if the correct item is in the viewport, If it isn’t it scrolls the page to the correct item.
For some reason that didn’t seem to work 100% of the time on all major browsers (Chrome, IE, Firefox, Etc..).
After a bit more research i found that the browsers do remember the scroll position the user was on before navigation away from the page and when they navigate back to it – the browsers automatically tries to scroll to that position.
<script>window.history.scrollRestoration = 'manual';</script>
This bit of code tells the browser not to try and remember the scroll position on the current page – in which case the custom scroll function defined earlier behaves as expected.
Problem #4 : Pageview count for content that was loaded dynamically
One of the upsides of using pagination on archives that contain a large amount of items is that for every time the user navigates to the next page it counts as another page the user viewed (on Google Analytics for instance).
It was very important for me not to lose the ability to correctly measure the engagement level users have with the website and i wanted to count every dynamically loaded set of items as a separate page view.
I solved this issue by manually firing a Google Analytics Pageview tag every time new content was dynamically loaded into the page.
The procedure to achieve this behaviour is different depending on whether you use Universal Analytics or Google Tag Manger so i won’t get into the technical details.
Problem #5: Triggering Dynamic Content Loading On Initial Page Load
Since i used the window.scroll event to determine if and when to initiate the ajax infinite scrolling feature and load more paintings into the shop page, Sometimes when a user would navigate back to a shop page it would land him at the end of the page without the user scrolling there (That’s how the anchoring feature i implemented works).
Essentially it created a situation where a user would navigate back to the shop page, the page would automatically scroll to the last items on the page and new items would not load automatically. (Because the user didn’t scroll)
I solved this problem by creating a small function that runs right after the page loads and checks if the user is at the end of the item stream and if so — trigger a dynamic content load.
After reviewing the usage data and observing countless user’s screen recordings i can safely say the AJAX Infinite scrolling feature i implemented had a positive effect on the user experience.
I’ve noticed the number of page views grew tremendously! viewing more content was virtually seamless for the users now that the pagination was no longer needed.
Users stay longer on the site and view more products & pages per session.
This ultimately leads to more leads and sales which is also great for the business.
When i initially decided to add an infinite scrolling feature i thought it would be fairly easy and quick.
I certainly didn’t imagine i would encounter all these problems and it taught me to take a bit of time to think of potential kinks and problems that could arise in new experiences and features i come up with.