{"id":13807,"date":"2020-07-29T15:46:27","date_gmt":"2020-07-29T20:46:27","guid":{"rendered":"https:\/\/www.invespcro.com\/blog\/?p=13807"},"modified":"2020-07-29T15:46:27","modified_gmt":"2020-07-29T20:46:27","slug":"infinite-scrolling-on-ecommerce-is-it-for-every-website","status":"publish","type":"post","link":"https:\/\/www.invespcro.com\/blog\/infinite-scrolling-on-ecommerce-is-it-for-every-website\/","title":{"rendered":"Infinite Scrolling on eCommerce: Is it for every website?"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 9<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><p><span style=\"font-weight: 400;\">This was the hypothesis used by the <\/span><a href=\"https:\/\/www.etsy.com\/\"><span style=\"font-weight: 400;\">Etsy<\/span><\/a><span style=\"font-weight: 400;\"> team when they were building an infinite scrolling feature on their website:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201c<\/span><i><span style=\"font-weight: 400;\">Changing the pagination to \u2018infinite scroll\u2019 on the search results page, will increase items viewed and eventually purchases, as this is easier for the user.<\/span><\/i><span style=\"font-weight: 400;\">\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But after running the <\/span><a href=\"https:\/\/www.invespcro.com\/ab-testing\/vs-multivariate-testing\/\"><span style=\"font-weight: 400;\">A\/B test<\/span><\/a><span style=\"font-weight: 400;\">, the results surprised the team to the extent that they thought there was a bug or something. After doing some quality assurance, they were horrified to realize that the results were valid.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Instead of increasing conversions and enhancing customer experience, the test showed negative results. <\/span><!--more--><\/p>\n<p><span style=\"font-weight: 400;\">The number of favorited items decreased, the <a href=\"https:\/\/www.invespcro.com\/cro\/\">conversion rate<\/a> dropped by 22% and users stopped using the search box to find items. Users were viewing and not acting.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Infinite scrolling on Etsy&#8217;s website had failed in every major way. Without further ado, they had to revert back to their default design technique: pagination.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Although infinite scrolling failed for Etsy, there are some eCommerce websites that find this design pattern more beneficial to their bottom line. If you love digging around as much as I do, you will bump into eCommerce sites that do an interesting job with infinite scrolling.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So what does this entail? Does it mean that infinite scrolling is not for every e-commerce website? How do you know if it\u2019s best or bad for your eCommerce website? Why do other eCommerce websites prefer not to use the infinite scrolling technique? Is it because it has too many setbacks that outweigh the benefits?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Continue reading this article to learn more about the definition of infinite scrolling, the pros and cons of this design pattern, and when you should consider implementing it on eCommerce sites.<\/span><\/p>\n<h3><b>A brief discussion around Infinite Scrolling<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">When we talk about ways to boost visitors\u2019 session duration, engagement, page views, usability <\/span><span style=\"font-weight: 400;\">(fewer clicks typically means better usability)<\/span><span style=\"font-weight: 400;\"> on an <a href=\"https:\/\/www.invespcro.com\/blog\/omnichannel-customer-service-in-e-commerce\/\">eCommerce website<\/a>, how many of you think of implementing the infinite scrolling technique?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I\u2019m pretty sure that only a handful of people would think of it.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Not so long ago, users had no choice but to reload pages to progress from one piece of content to the next. The UX design best practices did not encourage creating a site with information appearing <\/span><i><span style=\"font-weight: 400;\">below the fold <\/span><\/i><span style=\"font-weight: 400;\">\u2013 the section of the page underneath what is displayed on the screen.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But that\u2019s all changed now.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Today everyone is scrolling. If you\u2019ve used Social Media platforms such as Facebook, Pinterest, Twitter, LinkedIn, or Instagram, you have an idea of what infinite scrolling is.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Some UX designers refer to it as endless scrolling or continuous scrolling because it is exactly that.\u00a0<\/span><\/p>\n<div class=\"blog_img\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-13814\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/infinite-scroll-e1596053448164.jpg\" alt=\"\" width=\"900\" height=\"438\" data-wp-pid=\"13814\" \/><\/div>\n<p><span style=\"font-weight: 400;\">The working principle of this technique is to vertically scroll through a massive chunk of content with no sight of the website\u2019s footer tab. The content continuously loads as the user keeps on scrolling down the page.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Perhaps due to the wider adoption of mobile phones and tablets, the infinite scrolling trend has become more popular and many web companies are using it.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This design pattern makes it easy for both mobile and desktop users who are in the mood for browsing and exploration.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Well, just like any other UX design patterns, infinite scrolling has its strengths and weaknesses, so before you decide to implement infinite scrolling on your eCommerce site, you need to make sure that the benefits outweigh the setbacks.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Having said that, here\u2019s are the pros and cons of infinite scrolling: <\/span><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<h4 class=\"p-rich_text_section\"><strong>The pros<\/strong><\/h4>\n<ul class=\"p-rich_text_list p-rich_text_list__bullet\" data-stringify-type=\"unordered-list\" data-indent=\"0\">\n<li>It\u2019s great for mobile devices. It\u2019s easier to browse on a touchscreen smartphone than to click on small\u00a0<i data-stringify-type=\"italic\">next page\u00a0<\/i>links.<\/li>\n<li>It helps to hold a user\u2019s attention. It\u2019s easy to keep readers engaged by giving them more and more information as they keep scrolling. Having a \u201c<i data-stringify-type=\"italic\">see more<\/i>\u201d can actually distract users and break the experience.<\/li>\n<li>It works well if you want to display large amounts of data. If your website has a lot of information, infinite scrolling allows you to show that more content at once.<\/li>\n<li>Information can be updated in real-time. Infinite scrolling does well in updating real-time information instantly. This is why you see Social Media websites preferring to go with this technique.<\/li>\n<li>Your page speed doesn\u2019t get affected. Just because it constantly has to load more content at a time, this doesn\u2019t mean that infinite scrolling will slow your page speed. With infinite scrolling, you can still expect your page speed to be as fast as a traditionally formatted site.<\/li>\n<li>Retain users. There\u2019s a high chance of retaining a user since all they have to do is to scroll. It\u2019s much more of a subliminal\u00a0<a class=\"c-link\" href=\"https:\/\/www.invespcro.com\/blog\/your-complete-guide-to-call-to-action-button-plus-a-bonus-with-free-200-effective-cta-buttons\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-stringify-link=\"https:\/\/www.invespcro.com\/blog\/your-complete-guide-to-call-to-action-button-plus-a-bonus-with-free-200-effective-cta-buttons\/\" data-sk=\"tooltip_parent\" aria-describedby=\"sk-tooltip-909\">call to action<\/a>.<\/li>\n<li>According to\u00a0<a class=\"c-link\" href=\"http:\/\/infinite-scroll.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-stringify-link=\"http:\/\/infinite-scroll.com\" data-sk=\"tooltip_parent\" aria-describedby=\"sk-tooltip-910\">infinite-scroll.com<\/a>, if this design format is used correctly ((like with their WordPress plug-in), SEO is not jeopardized, navigation is improved, and accessibility is maintained.<\/li>\n<\/ul>\n<h4 class=\"p-rich_text_section\">The cons<\/h4>\n<ul class=\"p-rich_text_list p-rich_text_list__bullet\" data-stringify-type=\"unordered-list\" data-indent=\"0\">\n<li>It\u2019s harder for users to search for a specific type of information. If a user is looking for a specific piece of content, they might get frustrated by having to scroll and scroll before they see what they are looking for.<\/li>\n<li>Your site won\u2019t have a footer. Most websites that do not use infinite scrolling have important information placed on the site\u2019s footer and this has resulted in visitors developing a habit of viewing the bottom of the webpage for more valuable information about the company. But since there\u2019s no reaching the bottom of the page with infinite scrolling, new visitors might be confused about where to find the site\u2019s\u00a0<i data-stringify-type=\"italic\">Blog<\/i>,\u00a0<i data-stringify-type=\"italic\">Contact<\/i>\u00a0or\u00a0<i data-stringify-type=\"italic\">About Us\u00a0<\/i>page.<\/li>\n<li>It uses JavaScript. This is not yet problematic, but developers may get nervous about the future of infinite scrolling in terms of performance on Google rankings.<\/li>\n<li>It\u2019s not easy to skip irrelevant content. The fact that you can\u2019t skip all the irrelevant information you come across can be very annoying sometimes. Users are forced to read and scroll through pieces of information that is unrelated to what they are interested in.<\/li>\n<li>It\u2019s difficult to bookmark or to return to a specific segment of the page (this is the detriment that Facebook seems to have capitalized on).<\/li>\n<li>It\u2019s not easy to implement Analytics in an infinite scrolling site. Adding a Google Analytics code into a page doesn\u2019t guarantee you much insight, you also have to implement a custom solution.<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Now that you know what infinite scrolling is all about, let\u2019s take a deep dive into this magical design pattern in the eCommerce space.\u00a0<\/span><\/p>\n<h3><b>Infinite Scrolling on eCommerce sites: A tale of two stories\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Have you ever noticed that most eCommerce websites do not display products linearly on a never-ending page (infinite scrolling).\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Instead, most eCommerce websites tend to use pagination or the load more button. Is it because they are better at improving the user experience than the infinite scrolling technique?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I don\u2019t think so.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I understand that some marketers are of the belief that <\/span><span style=\"font-weight: 400;\">it is illogical to load a lot of products at once and assume that the users will view each and every product. <\/span><span style=\"font-weight: 400;\">Besides, it is easier for users to return to a specific page that the item is on than it is to gauge where the item is positioned on an endless page.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you think about it, their argument really holds water.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With this argument in mind, <\/span><span style=\"font-weight: 400;\">how then do you incorporate infinite scrolling on an eCommerce website and make sure that it accomplishes a positive user experience?\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I had a discussion with Ayat on this topic, and her suggestion was:<\/span><\/p>\n<blockquote><p><span style=\"font-weight: 400;\">\u201c<\/span><i><span style=\"font-weight: 400;\">When you think of adopting infinite scrolling you need to understand the people using your site by tracking how deep they are getting with the scrolling. This is why I recommend that e-commerce sites that have infinite scrolling should also include a load more functionality that helps track how deep people are going on those category pages. If you\u2019re not able to understand how visitors are interacting with the site, you\u2019re kind of defeating the purpose of creating that experience.<\/span><\/i><span style=\"font-weight: 400;\">\u201d\u00a0<\/span><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">In other short, she suggests integrating infinite scrolling and a \u201cload more\u201d button at the end of a preloaded list, which, when clicked, loads more content onto the page. As you can tell, Ayat\u2019s approach to infinite scrolling on eCommerce websites is a cautious one.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">What I like the most about her hybrid approach (<\/span><span style=\"font-weight: 400;\">infinite scrolling + \u201cload more\u201d button) is that it<\/span><span style=\"font-weight: 400;\"> gives users the choice to either view more and more products at once or not. It also allows users to access the website\u2019s footer \u2013thus addressing one of the major design drawbacks of infinite scrolling.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This integration approach is at play on <\/span><a href=\"http:\/\/express.com\/\"><span style=\"font-weight: 400;\">Express.com<\/span><\/a><span style=\"font-weight: 400;\">. The only difference is that Express integrates infinite scrolling, \u201c<\/span><i><span style=\"font-weight: 400;\">load more\u201d<\/span><\/i><span style=\"font-weight: 400;\"> and the \u201c<\/span><i><span style=\"font-weight: 400;\">view all\u201d<\/span><\/i><span style=\"font-weight: 400;\"> buttons. The load more or view all buttons are also located at the end of the preloaded list:\u00a0\u00a0<\/span><\/p>\n<div class=\"blog_img\"><img decoding=\"async\" class=\"alignnone size-full wp-image-13818\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/Screen-Shot-2020-07-28-at-13.jpg\" alt=\"\" width=\"900\" height=\"499\" data-wp-pid=\"13818\" \/><\/div>\n<p><span style=\"font-weight: 400;\">But once you click on the view all button, infinite scrolling is activated.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Placing the \u201cload more\u201d or \u201cview all\u201d buttons at the end of the preloaded list creates a positive experience by empowering to choose what works for them. It is still infinite scrolling, but the hybrid solution is used to control the amount of content that loads.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Although it\u2019s not an eCommerce site, Google\u2019s image search is also a good example that highlights the integration of infinite scrolling and the \u201cload more\u201d button:<\/span><\/p>\n<div class=\"blog_img\"><img decoding=\"async\" class=\"alignnone size-full wp-image-13813\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/google.jpg\" alt=\"\" width=\"900\" height=\"373\" data-wp-pid=\"13813\" \/><\/div>\n<p><span style=\"font-weight: 400;\">When you use Google to search for images, the infinite scrolling is automatic at first but after loading a certain number of items, you will have to click on that <\/span><i><span style=\"font-weight: 400;\">show more results <\/span><\/i><span style=\"font-weight: 400;\">button to view more content. This maintains the interface while limiting the load on the server.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now that you have empirical evidence that infinite scrolling can work on eCommerce websites, let\u2019s take a step back and look at what really made Etsy fail drastically (You still remember the Etsy story right?).\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So here is how their control and variation versions looked like:\u00a0<\/span><\/p>\n<div class=\"blog_img\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13809\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/900.jpg\" alt=\"\" width=\"900\" height=\"323\" data-wp-pid=\"13809\" \/><\/div>\n<div><\/div>\n<div><span style=\"font-weight: 400;\">And here is how the results from the split test panned out: <\/span><\/div>\n<div>\n<div class=\"blog_img\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13810\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/5-5.jpg\" alt=\"\" width=\"4692\" height=\"1686\" data-wp-pid=\"13810\" \/><\/div>\n<div>\n<p><span style=\"font-weight: 400;\">As you can see from the above image, the infinite scrolling variation was destroyed. From the items viewed, clicked, favorited, and purchased, it performs all dismally against the control (pagination).\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When asked why infinite scrolling was disastrous for Etsy, <\/span><a href=\"http:\/\/mcfunley.com\/design-for-continuous-experimentation\"><span style=\"font-weight: 400;\">Dan McKinley<\/span><\/a><span style=\"font-weight: 400;\">, the company\u2019s the-then principal engineer said this:\u00a0<\/span><\/p>\n<blockquote><p><i><span style=\"font-weight: 400;\">\u201cWe thought that it was obvious that more items, faster was a better experience. There is a lot of web lore out there to that effect, based mostly on some findings Google\u2019s made in their own search\u2026<\/span><\/i><i><span style=\"font-weight: 400;\">My point is not that infinite scroll is stupid. It may be great on your website, but <\/span><\/i><b><i>we should have done a better job of understanding the people using our website<\/i><\/b><i><span style=\"font-weight: 400;\">.&#8221;<\/span><\/i><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">Looking at this response. It\u2019s clear that the Etsy team made one of the deadliest sins in the world of A\/B testing. And that is implementing a hypothesis that is not backed by user research. Theirs was just an assumption that: \u201c<\/span><b><i>We thought that it was obvious<\/i><\/b><i><span style=\"font-weight: 400;\"> that more items, faster was a better experience<\/span><\/i><span style=\"font-weight: 400;\">.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Unlike what Etsy did, you first have to conduct thorough user research to know exactly what will work for users. Even after having conducted adequate research,<\/span><span style=\"font-weight: 400;\"> it is incredibly important to keep a close eye on how users behave by watching <\/span><a href=\"https:\/\/www.invespcro.com\/blog\/using-session-replay-videos-to-identify-conversion-problems-on-a-website\/\"><span style=\"font-weight: 400;\">session replay videos<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><b>So, is infinite scrolling for every eCommerce website?\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Having seen two examples of mega eCommerce websites that have two different tales to tell when it comes to infinite scrolling, do you think this design format is for every website?\u00a0\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are many valuable reasons that point out why you should use infinite scrolling on your website, just as there are many reasons that suggest otherwise. Infinite scrolling has some good and bad in and for itself.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So, to cut to the chase: <\/span><b>infinite scrolling can work on an eCommerce website but it\u2019s certainly not for every site<\/b><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But you have to be extra careful before you implement it on your site. For eCommerce sites that sell hundreds of products,\u00a0 a combination of infinite scrolling and that <\/span><i><span style=\"font-weight: 400;\">load more buttons<\/span><\/i><span style=\"font-weight: 400;\"> as suggested by Ayat will work.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So including search filters is also another alternative you might want to consider. Take a leaf from Twitter\u2019s infinite scrolling design book:\u00a0<\/span><\/p>\n<div class=\"blog_img\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13812\" src=\"https:\/\/www.invespcro.com\/blog\/images\/blog-images\/twi.jpg\" alt=\"\" width=\"780\" height=\"349\" data-wp-pid=\"13812\" \/><\/div>\n<div>\n<p><span style=\"font-weight: 400;\">Twitter uses infinite scrolling and it avoids frustrating users by using an <\/span><i><span style=\"font-weight: 400;\">advanced search <\/span><\/i><span style=\"font-weight: 400;\">function that allows users to filter their searches so as to quickly find the specific information they are looking for.\u00a0<\/span><\/p>\n<h3><strong>Conclusion<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">It\u2019s an open secret that infinite scrolling works well on those types of websites that display large amounts of highly visual content such as images and videos. This is why social media giants like this design pattern. But if you are to use it on your eCommerce site, I\u2019d rather suggest that you begin by conducting user research and testing your hypothesis. You don\u2019t want to repeat the same mistake that Etsy made when they just implemented without validating their hypothesis. <\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 9<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>This was the hypothesis used by the Etsy team when they were building an infinite scrolling feature on their website: \u201cChanging the pagination to \u2018infinite scroll\u2019 on the search results page, will increase items viewed and eventually purchases, as this is easier for the user.\u201d But after running the A\/B test, the results surprised the [&hellip;]<\/p>\n","protected":false},"author":54,"featured_media":13815,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,18],"tags":[],"class_list":["post-13807","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecommerce","category-ux"],"_links":{"self":[{"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/posts\/13807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/users\/54"}],"replies":[{"embeddable":true,"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/comments?post=13807"}],"version-history":[{"count":0,"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/posts\/13807\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/media\/13815"}],"wp:attachment":[{"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/media?parent=13807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/categories?post=13807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.invespcro.com\/blog\/wp-json\/wp\/v2\/tags?post=13807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}