Using Infinite Scroll in Web App
Nov 05 2015 12:18am | | Share

Using Infinite Scroll in Web App

By Chad Upton

Some data driven applications have large lists of items that are unavoidable and even when a really good search narrows that list you can still be left with hundreds or thousands of results.

Take google.com for example, even the most precise search possible may still yield thousands of results. All of those results may be extremely relevant, but perhaps you’re looking for a specific resource you saw previously and are trying to find that needle in the haystack.

In this case, infinite scroll is ideal. You can’t really sort the results; you just need to go through all of them as quickly and effortlessly as possible. Unfortunately, Google doesn’t use infinite scroll for “web” link results.

Google does use infinite scroll for image searches. This makes a lot of sense. There are some filter tools at the top to help you define some technical parameters for the image you’re looking for. But at the end of the day, there may be thousands of matches and you just need to motor through them until something catches your eye.

In other words, it’s great to use infinite scroll for lists that contain relatively unpredictable results that can’t be sorted with perfect precision. That leads us into when you should not use infinite scroll -- sorted lists.

If you’re looking for something on an e-commerce site, maybe amazon or eBay, you may run into the same problem as Google: hundreds or thousands of results for your search. In systems like this, you shouldn’t have to sift through hundreds of results. The search itself and the filter tools should be good enough that you can narrow the results to a short list.

eBay does a good job of this. Their plain text search is very good and they have many filter parameters to narrow those results to a very tight list.

Amazon is closer to the opposite. Their text search is only relevant if you choose “relevance” as the “Sort by” option. That’s unfortunate since relevance goes out the window if you change that sort to “average customer review” or one of the price sorts.

Their search, filter and sort by options are too disconnected and don't work together in a way a reasonable person would want them to. That means you get a massive list of irrelevant items and then you have to click “next” a number of times to get to the range of products that fit within your parameters. 

Don’t make the same mistake as amazon. If your list is well sorted and filtered, then paginate. If your list can’t be sorted, then offer as much filtering as possible, and then scroll infinitely.

Another thing to consider if you’re going to implement infinite scroll, you can’t have page footer on pages with infinite scroll since it will never really be seen (see Google Image search for example). You’ll want to design those pages to have footer like content at the top or along the side of the page.