Crafting compelling websites often centres around content and product offering. However, the User Experience (UX) can be frequently overlooked, yet it can significantly impact how customers interact with your website?
Most of us have experienced frustrating sites that for one reason or another, whether it is slow loading, inconsistencies or mobile issues. More often than not, it leads to users abandoning their browsing if any of these issues occur.
At StudioForty9, we understand that UX can be a make-or-break factor when it comes to website engagement. But with multiple options available, choosing the right method for your ecommerce site can seem overwhelming. In this blog, we explore various methods for loading content on pages, including their strengths, weaknesses and when they are most effective.
Scrolling
This method of content delivery is most commonly associated with social media. The content of a website continuously loads as the user scrolls further down the page. There is no clear end to the page, as the page will constantly update each time the user reaches the bottom of the previous loaded batch.
Best Suited Application:
Frequently described as an addictive user experience, the continuous stream of content is said to draw the user in. This approach thrives when the content is tailored or personalised to people's tastes, and will keep them engaged.
This method may be best used when it comes to niche product offerings or smaller catalogues where users will tend to be interested in much of the products available.
If your website features highly personalised content that adapts to individual users, infinite scrolling can be a suitable option. This method allows for a continuous, tailored experience as content is dynamically loaded based on user preferences or behaviour.
An example of infinite scrolling on Amazon's website.
Strengths:
Seamless Browsing Experience: Because users can continue to scroll, and more content will load, this method creates a seamless experience for the users.
Mobile Friendly: Designed and used across social media apps around the world, it is no surprise that this is well-suited for mobile devices. As it eliminates the need for navigation on the site, users can effortlessly explore content with a simple thumb gesture. This eliminates the need for manual page turning or clicking buttons, providing a more intuitive browsing experience
Weaknesses:
Too Much Choice: The most common issue with infinite scrolling is that it can give the user an overwhelming number of options. As stated in this article, “… for every interface, and for every intent, we have a particular comfortable range in mind, that is a preferred number of options that we think we can manage relatively effortlessly.” (https://www.smashingmagazine.com/, 2024). Infinite scrolling can make it harder for the user to sift through as they may feel like there is no end in sight.
Lack of Structure: It can also be easy to lose track of your position when using infinite scroll, as there is a constant feed of new items being shown. This can also be problematic if a customer is looking to reach a site's footer, where important information on delivery, returns, contact details, and email subscription and more are located and can easily be missed.
Tracking: Understanding how far customers have browsed in a collection can be crucial for merchandising decisions. Infinite scroll methods can make it difficult to measure how far a consumer has scrolled, which may limit the data a business has to make informed decisions regarding collections and product placement.
SEO: As discussed in this article and on this recent Google Support forum, “With infinite scroll, crawlers cannot always emulate manual user behaviour—like scrolling or clicking a button to load more items—so they don't always access all individual items in the feed or gallery. If crawlers can't access your content, it's unlikely to surface in search results.“
Pagination
Pagination takes a contrasting approach to infinite scrolling. The user can navigate through the content by clicking on numbered pages. Each page will display set content, for example 50 product cards. This approach offers a clear structure to the user while also encouraging interaction, usually through a numbered page system, at periodic intervals.
Best Suited Application:
If a website has a large catalogue, using pagination can help search engines to capture all pages as this method divides the content into distinct pages.
A well-known example of pagination - Google.com
Strengths:
Design: It offers a defined structure for product listing. This can make it easy for the user to follow the flow of content.
Performance: This tends to have a faster initial load time than infinite scrolling as each page has a set amount of data to load for each page.
Mobile Experience: Pagination can help break media-rich content such as product galleries into digestible sections which may be beneficial for mobile screens.
Tracking: It can be easier to track user engagement, as each page will have its individual tracking code once it has loaded. This can help retailers understand their customer's browsing habits on their website.
Weaknesses:
Browsing Experience: Pagination can interrupt browsing if the sets are too small as it requires users to click on the different pages. It is recommended that a standard grid style product listing page (PLP) displays around 50 product suggestions.
Mobile Challenges: Although there are pros to having pagination on a mobile device, it can also bring up challenges such as user-friendliness. Furthermore, pagination may present difficulties if the hyperlinks are too small to interact with.
Session Time: Users may spend less time on the site if they need to click through too many pages to find their desired products. This can have a negative effective on average session times for the website. Search engines like Google use engagement as part of their ranking algorithms.
Catalogue Size Limitations: While pagination can offer some solution to this, if the collection is too large, it can become tedious for the user to navigate through pages.
Load More
The load more buttons strikes a balance of both infinite scrolling and pagination. It allows users to see initial content but also have the control to load more content on request.
Best Suited Application:
Load more is also helpful for ecommerce sites where you can show some products initially and then use the load more button to load other related products. This may depend on a product category or a search and filter request made by the user.
An example of Load More implemented on one of our client's website - Petstop.ie
Strengths:
Balanced: Offers a compromise between the structured approach of pagination and the flow of infinite scroll. The load more button offers a balanced approach to SEO by combining user experience with search engine visibility. It allows for content loading while maintaining structured URL formats, which can improve search engine indexing compared to infinite scrolling. (theplusaddons.com, 2024)
Improved Experience: Users determine the pace of the content consumption with the load more method. It also tends to perform better than infinite scroll as it isn’t continuously loading more content, but loading only in set blocks.
Design Flexibility: Offers more design flexibility than pagination as the layout can be more dynamic.
Mobile Friendly: Overall, for mobiles, load more provides a sweet spot, giving customers a scrolling experience without being overwhelmed or cumbersome to navigate. The large, easy-to-tap button allows users to control the pace of content loading while maintaining a sense of continuous browsing.
Lower Bounce Rate: It can reduce bounce rate as a customer clicks 'load more' it is an action taken on site.
Product Visibility: Infinite scroll may encourage customers to view more products, leading to higher conversions.
Weaknesses:
Performance: Although it offers some relief on performance compared to infinite scroll, it does have the potential to be performance heavy, depending on how frequent the user pushes the Load More request button.
Tracking Challenges: Although the load more option does provide a middle ground for tracking between infinite scroll and pagination, it does still provide some challenges. It requires a dynamic URL update as additional content is loaded. This will provide more granular tracking compared to infinite scroll but may not offer the level of pagination.
Our Recommendation
Ultimately, the goal of any website, whether it is ecommerce or just a brochure site is to deliver a user experience that is intuitive, keeps the user engaged and effortlessly moving through your website content. There are many factors to consider when choosing the right UX for your site and there is no one size fits all approach. Always consider your content, your audience and decide the approach that works best.
However, while infinite scroll is ideal for social media style browsing and pagination offers advantages for tracking, we believe the all out winner is load more. It offers a blended mode that encourages interaction and further discovery.
If you are looking to find out more about UX methods or would like us to audit your current site, you can reach out to us at StudioForty9.
