Product Lists: Pagination vs Infinite Scroll

Pagination has long been the way ecommerce sites handle large numbers of search and category results. According to a study by Edgacent, 61% of Internet Retailer 500 sites use pagination on desktop, and 58% use it on mobile.

More recently, experiences like infinite scroll, which auto-loads products when the user reaches the end of the page, and “load more” buttons have become more popular. 28% of top e-tailers use one of these alternatives on desktop and 15% on mobile (the remaining % use no solution or show all by default).

Which is the best method for user experience and search optimization?

3 ways to mitigate the need for pagination

Regardless of the method you choose, reducing the amount of products returned in a given category is the first step to optimizing product results.

Good CAMA

In Ecommerce Illustrated’s first chapter we covered the importance of Catalog and Merchandising Architecture — your site’s category and sub-category structure. Complement CAMA with great sort and filter and a given product list is winnowed to a tighter, more relevant set than a higher level, unfiltered category page.

Tip: Consider adding sub-categories to category lists that exceed 120 products, based on important, differentiating attributes. For example, a “tees” category could be divided further into “graphic tees,” “burnout,” “henley” and “raglan.”

Navigation design

Navigation design has a big impact on how well customers control their own category results. Exposing sub-categories in a top-level flyout menu encourages their selection on “first click.” Some sites force sub-category selection by making higher level categories un-clickable.

High-level category page design

Another way to guide customers to more narrow sets of product results is to show a sub-category grid instead of product results.

kellyco-category-page

If your ecommerce solution supports it, consider designing custom category pages, optimized for purchase context and guided selling. For example, a spec-driven, considered purchase like a stroller may benefit from a “forced” sub-category presentation, paired with content like a buying guide.

target-stroller-page

Similarly, showing “Shop By” menus guides the customer directly to a sub-category, encouraging customers to think about the attributes that matter most to their purchase decision.

target-bedding-page

The key to great category-level guided selling is understanding what attributes best help the customer make a decision – and this may be different across category and product types.

For example, HockeyMonkey forces “shop by brand” across all categories. While this may be ideal for hockey accessories for branded equipment the customer already owns, for items like hockey bags, attributes like dimensions, color or other specs may be more important than the logo. If brand doesn’t give enough context, it will lead to more pogo-sticking between different brand sub-categories as the customer searches for products that meet his purchase criteria.

hockeymonkey-brands

Filter and facet design

Designing and presenting filters and facets so they’re intuitive and easy to apply (especially on mobile) matters.

Lampsplus combines sub-category tiles with product results, allowing customers to jump directly to all results without forcing a sub-category, while providing some visual context to sub-category options. For example, the difference between “traditional” and “contemporary” styles may not be immediately understood by the customer. Similarly a customer may not know what a “Tiffany lamp” is, but would recognize it by its representative thumbnail.

lampsplus-image-tiles

Lampsplus also presents filters horizontally, in red, which may increase engagement versus displaying them in a sidebar menu.

Ensure filters are intuitive. BetterWorldBooks’ “Form,” “General” and “Topic” are not all clear.

betterworldbooks-filter

Support search within results

With over 125,000 products results in a single sub-category, Summit Racing provides search within results (which is very useful for a product type such as replacement parts).

summitracing-category

However, the feature doesn’t appear until the bottom of the page. Best to showcase this tool at the top of results.

summitracing-search

Amain promotes search within results at the top of the page, but leveraging the instantly recognized visual cue of an open search field may help its engagement.

amain-search-within

Show “perceived difficulty”

The number of products returned and paginated links suggest how painful exploring the category will be, and can encourage use of filter and sort tools. Include at least one at the top and bottom of each page. And make sure sort and filter tools are proximal to product results — Kate Spade’s buttons are very subtle, and live outside of the product grid’s white space (can you spot them)?

katespade-filter-sort

Product grid merchandising

Some ecommerce platforms and third-party personalization vendors offer a degree of control over how product results are ranked, whether by algorithmic magic or manual merchandising. Optimizing the presentation of results reduces the pain of pagination, increasing the chances that a customer will click on something in the first set of results. The topic of product grid merchandising will be covered in depth in the next chapter of Ecommerce Illustrated.

Alternatives to pagination

Infinite scroll

Infinite scroll auto-loads new products when the user reaches the end of a page’s designated number of default product results. Depending on a site’s performance, this load can take milliseconds up to several seconds to append, during which visitors will see a spinning or loading icon, as below.

accessory-geeks-autoload

Any Facebook, Twitter or Pinterest user is accustomed to the seamless experience of auto-loading content, which is fantastic when you’re just browsing, but can become problematic if a list of loaded products becomes too long and a customer wants to re-locate a previously spotted item, or if the customer wants to reach the end of a page quickly to access footer menu content.

User testing by Baymard Institute indicates ecommerce users tend to scan more and ultimately view more products with infinite scroll than when viewing paginated results, but focus less on individual products. Baymard suggests infinite scrolling can be harmful to usability, particularly for search results and on mobile devices.

Load More buttons

For the optimal user experience, Baymard recommends “load more” buttons in combination with “lazy loading:”

the optimal solution for loading new products in categories to lie at the intersection of the “Load more” button and infinite scrolling in the form of lazy-loading: Show 10 to 30 products on initial page load, and then lazy-load another 10 to 30 products, until you reach 50 to 100 products, and then display a “Load more” button; once that button is clicked, load another 10 to 30 products, and resume lazy-loading until the next 50 to 100 products have loaded, at which point show the “Load more” button once again.

The “Load more” button threshold of 50 to 100 items determines when to interrupt the user, while the lazy-loading threshold is merely a performance optimization to reduce loading time and server load.

Victoria’s Secret autoloads 180 products, and its CAMA is such that category lists rarely require the Load More button. However, page performance and user experience — especially on mobile — may be improved by lowering the default page load threshold to a smaller set of results.

vic-secret-load-more

Brown Shoes’ View All button loads everything with an infinite scroll. The “load more” with lazy loading approach would to follow the load more approach, loading the next reasonable set, then asking the customer if they want to load more.

browns-view-all

It’s OK to be inconsistent across devices

Your mobile experience doesn’t have to be the same as your desktop experience. For example, at time of writing, Sephora, Staples, Sears, Cabela’s and Petsmart use autoload on their mobile sites, and traditional pagination on desktop sites. And Modcloth paginates after fewer product results on mobile.

Pagination best practices

Despite the friendliness of the Load More button, if pagination is your only or preferred method of handling product lists, ensure you’re maximizing usability.

Have a view all link

talbots-view-all

Choose your default number of results wisely

King Arthur Flour returns 10 results by default, resulting in double-digit pagination.

king-arthur-10

king-arthur-pages

Very small catalogs may get away with showing 20 products or less in every category list. Unless showing more than 36 products by default significantly impacts page load speed, it’s recommended to show this at a minimum.

Use previous and next buttons

Baymard’s user testing found online shoppers rarely click on numbered pages, rather rely on Previous and Next buttons. Be sure to treat them as a call-to-action and style them stronger than the numbers. Neiman Marcus’ links are faint and difficult to click (especially on mobile).

neiman-marcus-pagination

Repeat filters and refinements at the bottom of the page

Kellyco repeats its sort menu, but users also benefit from filters repeated at the bottom of first-page results. Sort and filter serves as a reminder that the customer doesn’t need to view every page, she can tighten or re-rank her results instead.

kellyco pagination

Include jump to top links

The more products you show by default, the handier the Back to Top link is! Ensure it’s clear and conventionally placed in the center or right corner.

ulta-back-to-top

Yoox’ Back to Top link appears on the left side, easy to overlook.

yoox-back-to-top

SEO Tips for Pagination and Infinite Scroll

SEO tips for pagination

Googlebot is an efficient animal, and you’re not entitled to have all your pages crawled or indexed. Poor implementation of pagination (from the crawler’s perspective) can impact your crawl depth, or confuse Googlebot about which page to return in search results. It can also create duplicate content issues. Thus online retailers should ensure SEO best practice is followed.

There are 3 common workarounds to optimize pagination for SEO:

1. Designate a canonical version of your category page

Choose to appoint your View All URL, or page 1 of your paginated series. This is Google’s preferred and recommended solution, as long as your product list is not too long (your page should load within 2-4 seconds, for usability and SEO reasons).

Use the rel=canonical attribute on pages 2 and onward, pointing to your canonical page. If you have more than a few hundred product results, this may not be your preferred workaround. And consider that some of your category pages will take longer to load, so factor this into your decision.

2. Apply “noindex” and “follow” tags to pages 2 and beyond.

This keeps them out of Google’s index, but allows page authority to flow to deeper pages.

3. Employ HTML5’s rel=”prev” and rel=”next” markup on paginated pages.

This indicates to Google which pages follow a series, which Google will recognize as a single page, while giving Google the flexibility to return a deeper page of the chain (versus the first page) if the context of the user’s query would benefit from it. (This is more likely to occur with forums, blogs and other content sites where with more text).

SEO for infinite scroll and load more

Infinite scroll doesn’t fly for visitors with Javascript disabled (this includes your friendly neighbourhood search bot). Thus, infinite scroll (and its load more cousin) require some tweaking for search engines, for which Google outlines on its Webmasters blog.

Google recommends converting your infinite product list into a series of paginated chunks, each containing the relevant rel=”prev”/”next” values declared in .

infinite-scroll-SEO

However, you are likely just as concerned with supporting customers as search bots, so to ensure visitors without Javascript enabled have a great experience, it’s recommended to use either progressive enhancement (start with an experience that works for older browsers and layer in functionality for more modern ones) or graceful degradation (start with your cadillac experience, and make sure it scales back functionality “gracefully” for older browsers or users who disable Javascript). Your developer may have a preferential method, but this should not be overlooked if you do use infinite scroll or load more buttons on product list pages.

Need help with your ecommerce UX strategy? Drop me a line.

Ecommerce Illustrated is a project of Edgacent, an ecommerce advisory group.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *