User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm creating an eCommerce website, and I've read numerous posts about making the UX better by loading more products when the user gets near to the end of the page. However, why not just load all products and use a script like lazyload to load images later? That way I think it would depend less on the client side, therefore making the browser more responsive.
So here is my main question:
Why not load all products at once and load images separately?
For an ecommerce application I would say that infinite scrolling is not the way to go. Infinite scrolling tends to be better for social media/discovery type websites as it allows for more user engagement and tends to be better for mobile as the user simply scrolls and never has to click.
However, these positives come with a price. Mainly, poor page performance, heavy consumption of device resources, inability to bookmark previous locations to come back to it later and unless you have a fixed footer you will typically not ever be able to show that to the user which can have valuable information.
That being said, from the UX perspective, on an ecommerce website it is often better to get the necessary items at once rather than anything you can find because you can better direct your user.
I would recommend a pagination system that allows the user to choose how many items are displayed on their screen. This gives the user more control and allows them to bookmark items as they paginate past. Although there may seem to be more actions for the user to perform, it gives them the tools to more intuitively navigate your products. They will be able to say "Oh, that item was on page 3" and quickly access it.
According to UX Planet, pagination can lead to better conversion rates, a deeper sense of control for the user and allows for easier item location.
If you are wishing to minimize page refresh, you might consider an AJAX solution to load paginated content within the page. Just make sure the URL gets updated with each "page" within your product area.
I recommend reading through the entire UX Planet article as it goes into more detail and could help you with your decision.
As for the better practice between JSON appending to the dom or loading directly as html. I believe that is a better question for the Stack Overflow portion of stack exchange.
Hope this helped.
Your page would load too slowly, as it waits for the larger amount of data to download. Specifically, your above the fold content would be delayed waiting for content the user might never see.
Google recommends that only a small amount data should be required to display the initial "above the fold" content of a web page:
If the amount of data required exceeds the initial congestion window (typically 14.6kB compressed), it will require additional round trips between your server and the user’s browser. For users on networks with high latencies such as mobile networks this can cause significant delays to page loading.
Even if you don’t care about SEO, you want to take Google’s advice on this, as it’s based on what they know about use behavior. Even a small delay before content being displayed will cause users to give up on your page loading.
Nielson/Norman Group agrees:
Summary: Slow page rendering today is typically caused by server delays or overly fancy page widgets, not by big images. Users still hate slow sites and don't hesitate telling us.
Speed is one of the most important aspects of a website, and loading large amounts of data to a browser is inherently slow. You want to stive to get screenfuls (especially the first screenful) of data to the user quickly, when they request it.
