Ecommerce product list scrolling in Drupal

Pagination, Load More or Infinite Scroll

We build a lot of custom Drupal ecommerce websites and are always looking out for new and creative ways to present products. When it comes to listing a large group of products on a category page in a store, you basically have three methods for displaying them:

Pagination

This method involves limiting the number of products shown on the page to a specific number. If there are more products than the limit the user is presented with the option to go to pages 2, 3, etc. This is called pagination.

Infinite Scroll

Instead of showing additional pages or prompting the user to manually load more products, infinite scroll is a method where additional products automatically load when the user scrolls near the bottom of the page. As products load, the user can continue to scroll until no more products are available to display.

Load More

Similar to pagination, this method also limits the number of products shown to the user, but, instead of linking to additional pages, the user is prompted to click a ‘load more’ button. When clicked, an additional set of products load below the existing set allowing the user to continue scrolling through products.

Three types of product listing in Drupal

As part of our commitment to our clients to stay up-to-date with and be advocates for best practices,we recently came across a huge, multi-year ecommerce usability (UX) study conducted by the Baymard Institute, a UX research group. One part of the study was to determine which of the three product list display methods is best. Here is a breakdown of their findings.

Pros and cons of each method

Pagination

Pros

Easy to implement – Most ecommerce platforms (including Drupal) support this method out-of-the-box.
Familiar – This was the first widespread method for displaying a large list of products; because of this, it has become commonplace and familiar to most users.
Initial product results received the most attention – This method resulted in test subjects spending the most time on the first page of products.

Cons

Slow – Test subjects generally perceived this method to be slow.
Quick dropoff – Of all three methods, test subjects browsed less products in total when pagination was used. Test subjects were more discouraged to browse further when faced with many pagination links.
Worst mobile experience – Loading additional pages typically takes longer when using a mobile network connection. Also, pagination links at mobile can be difficult to hit due to needing to be closer together.

Infinite Scroll

Pros

Smooth and seamless – Users can scroll products without interruption or interaction with the website.
Intuitive – Because there are no additional interface controls to view products, users can easily see the entire list of products.
Products receive most attention – Of all three methods, test subjects browsed the most products in total when infinite scrolling was used.
Growing product list – Displaying product results on one page lets users go back and look at previous products to compare and contrast.

Cons

Potential performance issues – If hundreds of products are trying to load at once the user could notice slow loading and other performance issues, which may cause them to become frustrated and drop off.
Initial product results recieve less attention – This method resulted in test subjects spending the least amount of time on the products at the top of the list.
Less attention to all products – Because there are no explicit breaks in the flow of the product list, test subjects spent less time focussing on individual products.
Website footer impeded – In some cases, because products are continuously loading, the website footer can be difficult to reach. Users may see the footer for a split-second while products are loading which could lead them to become frustrated if they are actually trying to reach the footer.
Browser back button – This requires special attention to make for a good user experience. More on this at the end of this article.

Load More

Pros

Intuitive and enjoyable – This method was intuitive to most test subject and well received.
Simple – Instead of picking a specific page, as is the case with pagination, users are simply asked if they would like to view more products. A simple question for them to answer quickly.
Fast – Because product results are shown on one page and only the products shown are being loaded, both usability and browsing products with this method are fast.
More products receive attention – Test subjects viewed more total products using this method then pagination, but less than infinite scroll. Unlike infinite scroll however, test subjects generally spent a good amount of time looking at the details of each product result.
Growing product list – Like infinite scroll, displaying product results on one page lets users go back and look at previous products to compare and contrast.

Cons

Last products missed – Products at the end of the list tend to be missed by the user. This, however, is OK as long as the products being shown are relative to what the user is interested in (i.e. using product filters).
Most difficult to implement – This method presents some technical challenges that make setting it up a bit more difficult programmatically. It’s definitely not impossible, but does require technical expertise to implement.
Browser back button – Like in the infinite scroll method, this requires special attention to make for a good user experience. More on this at the end of this article.

Conclusion – What is the best method?

Looking at the pros and cons of each method, it appears that using a “Load More” button is the better method. What this study recommends however, is to use a combination of both the “Load More” and infinite scroll methods.

The study recommend that you first load 10-30 products and use the infinite scroll loading method for a total of 50-100 products, then switch to the load more button method to load the next 50-100 products until the full product list has been shown.

Doing this lets users quickly scroll through many products without any barriers while also allowing them to continue viewing products and access the website footer.

For mobile users, it’s recommended that the number of products initially displayed should change to 15 - 30. There are a few reason for this: first, less products means a quicker load time; second, less screen real estate means you won’t see as many products at once, but15-30 products is plenty to scroll (or swipe) through.

But, don’t forget the browser back button!

Test subjects expected to be able to use their browser's back button since this has become an every-day web browsing tool we all use.

Using the pagination method, viewing product lists by page, the browser back button works as expected. Complications arise however, when either the infinite scroll or load more methods are used.

Standard browser back button functionality takes you from the page you’re on to the page you last viewed. If you had scrolled through 100 products and then clicked on a product to view its details page, you would expect to be brought back to the same position you left off at in the product list when going back. This isn’t the case though, as the browser will take you back to the top of the list. This makes for a very frustrating experience, especially on mobile, because the user must again scroll through the list to continue viewing more products or compare another product.

Special care and attention needs to be given to this in order to create a good overall user experience. HTML5 has a function that can be used to get the back button behaviour we would expect – history.pushState(). This, in combination with additional coding to make sure any “load more” clicks are also loaded, is the solution you need.