It is vital for websites to understand how they want their users to interact with their content. User Experience (UX), is all about making the way users interact with you as easy and enjoyable as possible. Traditionally websites are presented as pages and each page belongs to a section or category, users click and read pages of content they are interested in, this is known as Pagination. In this instance, all content and ads load when the page is loaded. More recently opportunities to enable users to discover new or related content without leaving the page they are on have become especially prevalent with users consuming content that is image-heavy or viewed on mobile devices. Here we discuss the two main UX techniques websites can use to keep users on the site and enable the discovery of new content while not loading all content at the initial page visit; Infinite Scroll and Load More.
What is Infinite Scroll?
As obvious as it sounds, Infinite Scroll describes the UX technique that allows a user to continue scrolling the page without ever reaching the ‘bottom’. The resulting user experience is an endless flow of information where content is dynamically populated as a user scrolls, without the need for a user to click anything.
Not to be confused with Lazy Loading, Infinite Scrolling is actually a form of Lazy Loading. For those familiar with the concept, Lazy Loading is a javascript feature that essentially only calls for the data from the server to be displayed on the page when demanded. The trigger could be when a user reaches a certain point in the page or in the case of an Infinite Scroll when the user reaches the bottom of the page.
How do you use Infinite Scroll?
Infinite Scroll is most often used in environments where the user may not be looking for any specific content. Image heavy, social media and entertainment based content lends itself massively to this end. Users are more likely to continue scrolling and browsing content when they are not presented with an endpoint.
For website owners, more time spent on the page means there is more opportunity to place advertising, especially as most ads would not be in view until a user has scrolled to a certain point. With users not having to click to see more content, the user experience is far easier, especially on mobile devices.
Technically, JavaScript is normally used with asynchronous loading of content that is triggered by a user scrolling beyond a certain point. The concept of Lazy Loading is in effect here as new content loads before the user reaches the next scroll point in order to manage content loading times.
What is Load More?
Unlike Infinite Scroll, Load More as a concept requires a user to click on a button at the bottom of the page to load more content. In this UX technique, the user is in control of the endpoint. The courtesy offered here is enabling the user to decide whether they would like more content or not.
Load More is also a form of Lazy Loading, content this time is triggered upon a user click. Many see Load More as a halfway house between traditional Pagination and Infinite Scroll.
How do you use Load More?
Load More offers a clear decision making opportunity, a commitment if you will; click here for more information. Load More therefore offers greater opportunity to produce engaged users.
Load more also offers a clear opportunity for a page to reload and for ads to pop up in view as the user loads the page. This makes ads loaded below the fold and left unseen less likely to occur. Page speed is improved as using Lazy Loading, a page is only generated once a user clicks to Load More.
Many eCommerce sites utilize Load More as the action of a user choosing to look at more products result in better engagement than when products are continually presented to you. Equally many premium content owners use Load More as a trigger to enable paid for content or to reload the ads on the page.
What are its limitations?
While both Infinite Scroll and Load More are forms of Lazy Loading, therefore focused on saving time and resource as indicators of good UX, the biggest impact is felt by the website’s ranking on search engines, as SEO is affected by improper indexing of unloaded content.
By hiding content on a page and loading it only when requested by scroll, Infinite Scroll might prevent proper indexing of your content by search engines, especially as Google’s website crawlers do not typically scroll down pages, and only read what appears to users on initial page load.
The advice from Google’s Developers is to split newly loaded content into sections. Then, add Load More buttons that link to the next new section, so that bots can follow these links and index them like they would separate pages. This would however take extra effort to implement and of course, you want to make sure there aren’t too many pages for the bots to crawl.
Infinite Scroll has a few points for consideration;
Footer – displaying a meaningful footer can be difficult. So if you have calls to action or important information contained in the footer, this is something you need to allow for.
Speed – the whole point of this technique is to make it easier for the user to see your content, so page loads need to be quick. With more content loaded onto the same page, this may affect performance.
Returning to the Scroll – a frustrating part of Infinite Scroll occurs when a user wants to go back to a previous point in the scroll, this is especially annoying on product or article pages.
Ad Viewability – viewability of ad units are liable to decrease as users scroll down the page. Users get inundated with ads, and as a result, ad units get ignored due to banner blindness.
Whereas Load More has one major disadvantage; the need for a click – one of the main rules of UX is the less a user has to do the better. So when a click is necessary a user is theoretically less likely to spend any more time on the page.
Which is the best to use?
This very much depends on your content and type of site. In the main, all sites will retain Pagination as a way of organising content and sections of a website. Infinite Scroll is best suited to casual content, image heavy sections or content discovery. With Load More, giving the user that choice to click for more means the content they are looking for needs to be of greater value or interest. With regards to UX, the idea is to keep users on the site and engaged and Load More is a more user friendly option in this case.
A combination of Infinite Scroll and Load More is the best way forward. Experimenting with different ad formats such as Sticky Ads and Refresh Ads can overcome some viewability issues. While having ads generate as soon as a user clicks on Load More can help.
Both techniques utilize Lazy Loading which is better than traditional pagination, however, both need to be A/B tested for you to find the right balance between UX, Viewability, and Site Performance.