Which is the best solution between scroll-loads, page navigation and "Load more" buttons?

Monday, March 7, 2016

For a couple of years already, we have seen more and more sites implement various ways to navigate through a list of products. The 3 most popular are: 

• Page navigation;
• Scroll-load, also known as infinite-scroll;
• "Load more" button.

Page navigation

This is the solution that's been around the longest. Even Google uses this technique to display search results! This solution means displaying the 25 best results, followed by a list of links allowing you to view all the other pages.

This solution allows search engines to index all your pages (which is a good thing!), but it becomes hard when you want to compare results together because you need to display each page on a different tab because most products you want to compare are on different pages. 

SCROLL-LOAD or INFINITE-SCROLL

This is (sadly) a technique that's becoming more and more popular. Like most other solutions, they start by displaying the first 25 results and, once you've scrolled to the bottom, they automatically load the next 25 results (and keep doing so until you've displayed all the results).

One of the major problems is that most search engines don't see past the first 25 results. What's even worse, if a user wants to access the links on the bottom of your page, it becomes impossible because everytime he tries, the system loads 25 new results. This solution can end up being frustrating for your users, which is never a good thing!

The "Load more" button

Shortly after the first appearance of the "scroll-load" method, developpers have implemented a more user-friendly variant of this solution. Like always, they start by displaying the first 25 results, and then, they simply add a "Load more" button, which once clicked, displays the following 25 results (up until you've loaded them all).

This solution, once well implemented, allows search engines to view all your search results. Even better, it gives the user access to all the links on the bottom of the page easily. 

Of course, we weren't surprised when we learnt about the results of a study confirming that the "Load more" button was the most efficient. How about you? Did you try different solutions? If so, which one worked best for you?