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.
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 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.
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.
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.
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.
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 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.
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).
However, the feature doesn’t appear until the bottom of the page. Best to showcase this tool at the top of results.
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.
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)?
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 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.
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.
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.
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
Choose your default number of results wisely
King Arthur Flour returns 10 results by default, resulting in double-digit pagination.
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).
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.
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.
Yoox’ Back to Top link appears on the left side, easy to overlook.
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
Google recommends converting your infinite product list into a series of paginated chunks, each containing the relevant rel=”prev”/”next” values declared in.
Need help with your ecommerce UX strategy? Drop me a line.
Ecommerce Illustrated is a project of Edgacent, an ecommerce advisory group.