{"id":20229,"date":"2023-02-01T14:39:00","date_gmt":"2023-02-01T19:39:00","guid":{"rendered":"https:\/\/www.ceros.com\/inspire\/?p=20229"},"modified":"2023-02-01T14:41:02","modified_gmt":"2023-02-01T19:41:02","slug":"infinite-scroll-design","status":"publish","type":"post","link":"https:\/\/www.ceros.com\/inspire\/originals\/infinite-scroll-design\/","title":{"rendered":"The Long and Winding Scroll: Designing for the Infinite Screen"},"content":{"rendered":"<span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">3<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<p>Have you been spending more time going down the rabbit hole of Google search results lately? The answer is likely yes, even if you didn\u2019t realize it. That\u2019s because, starting at the end of 2022, <a href=\"https:\/\/twitter.com\/Google\/status\/1599889522380120078?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1599889522380120078%7Ctwgr%5Ea49149edf439ec2c31690a3e2c9a0c236c48feb4%7Ctwcon%5Es1_&amp;ref_url=https%3A%2F%2Fwww.theverge.com%2F2022%2F12%2F6%2F23495973%2Fgoogle-search-desktop-continuous-scrolling\">the search giant brought social media\u2019s secret weapon<\/a> to its queries: the infinite scroll.&nbsp;<\/p>\n\n\n\n<div style=\"position: relative;width: auto;padding: 0 0 70.92%;height: 0;top: 0;left: 0;bottom: 0;right: 0;margin: 0;border: 0 none\" id=\"experience-63d93952869f2\" data-aspectratio=\"1.41011236\"><iframe allowfullscreen=\"\" src=\"https:\/\/view.ceros.com\/ceros-marketing\/metaverse-digital-marketing-sidebar-3-2-3-1-1-1-1?heightOverride=890\" style=\"position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: 0;padding: 0;border: 0 none;height: 1px;width: 1px;min-height: 100%;min-width: 100%\" frameborder=\"0\" class=\"ceros-experience\" title=\"Infinite Scroll PQ1\" scrolling=\"no\"><\/iframe><\/div><script type=\"text\/javascript\" src=\"https:\/\/view.ceros.com\/scroll-proxy.min.js\" data-ceros-origin-domains=\"view.ceros.com\"><\/script>\n\n\n\n<p>Infinite scroll is a <a href=\"https:\/\/www.ceros.com\/inspire\/originals\/the-basics-of-ux-design\/\">user experience (UX)<\/a> feature that gives site viewers a never-ending stream of content. This comes in contrast to paginated experiences, which spread things out across individual pages. For juggernauts like TikTok and Instagram, infinite scroll is another way to employ powerful algorithms and constantly generate new posts to engage their users. In other cases, infinite scroll simply puts as many pieces of a site onto a single page in the hopes that the urge to scroll outweighs the allure of another click.<\/p>\n\n\n\n<p>Although the infinite scroll has been around <a href=\"https:\/\/www.gq.com\/story\/aza-raskin-interview#:~:text=In%202006%2C%20he%20invented%20the,get%20people%20to%20eat%20healthier.\">for over 15 years<\/a>, it got a renewed spotlight in the 2020 documentary <a href=\"https:\/\/www.humanetech.com\/the-social-dilemma\"><em>The Social Dilemma<\/em><\/a>. Presenting it as yet another <a href=\"https:\/\/www.ceros.com\/inspire\/originals\/addicting-ux-app-design\/\">unsavory tactic<\/a> in the war on attention, the film likened continuous scroll to slot machines designed explicitly to hook you in. Amid these warnings, however, infinite scrolls have only grown in popularity. Here\u2019s what designers need to know about the state of the scroll.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"The Social Dilemma | Official Trailer | Netflix\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/uaaC57tcci0?feature=oembed&#038;enablejsapi=1&#038;origin=https:\/\/www.ceros.com\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2>Deciding when the infinite scroll is right<\/h2>\n\n\n\n<p>So why have we all become so accustomed to getting our information this way? In part, it\u2019s because designers have to keep up with how people browse. <a href=\"https:\/\/www.oberlo.com\/statistics\/mobile-internet-traffic#:~:text=The%20percentage%20of%20global%20web,at%20a%20meager%2010.88%20percent.\">As of November 2022<\/a>, over 60% of global web traffic came from mobile devices. With fingers eager to swipe, rather than click from page to page, there\u2019s a strong use case for garnering better small-screen engagement.&nbsp;<\/p>\n\n\n\n<p>The other chief advantage of the continuous scroll is that it reduces interaction costs. In UX design, <a href=\"https:\/\/uxplanet.org\/improving-user-experience-by-reducing-interaction-cost-fa4089471c9c\">interaction costs refer to<\/a> \u201cthe sum of efforts, both mental and physical, that users must deploy in interacting with a site in order to reach their goals.\u201d&nbsp;<\/p>\n\n\n\n<p>Let\u2019s say you\u2019re designing a web portfolio or company blog where, rather than explicitly selling something, your primary objective is to raise awareness. Odds are, you don\u2019t want visitors heading anywhere else; harnessing the power of focus through infinite scroll might be a good first step to bump up the average time visitors spend on your page.&nbsp;<\/p>\n\n\n\n<p>For marketers and designers, cutting back friction is also a means to combat the <a href=\"https:\/\/www.ceros.com\/inspire\/originals\/designing-for-digital-fatigue\/\">cognitive overload<\/a> that complicates user journeys. Simplifying a user\u2019s decision-making\u2014even by simply nixing the \u201cload more\u201d or \u201cnext page\u201d buttons\u2014opens up new opportunities to make ads seamless, direct attention to images and videos, and make embedded links more impactful.&nbsp;<\/p>\n\n\n\n<h2>The trouble with a captive content audience<\/h2>\n\n\n\n<p>Adopting a single-page layout isn\u2019t without its risks, though. UX specialist Tim Neusesser <a href=\"https:\/\/www.nngroup.com\/articles\/infinite-scrolling-tips\/\">writes<\/a> that and in some situations, it\u2019s actually a step in the wrong direction. \u201cInfinite scrolling typically works best for situations where users will want to scroll through homogeneous items with no particular task or goal in mind,\u201d he said.<\/p>\n\n\n\n<p>Take today\u2019s hyper-competitive e-commerce landscape, for instance. The average e-commerce site <a href=\"https:\/\/www.drip.com\/blog\/e-commerce-statistics\">only converts about 2 percent of visitors<\/a> into customers. If comparing product specs and prices on your site is cumbersome, the likelihood that someone actually makes a purchase dips even further.&nbsp;<\/p>\n\n\n\n<p>It\u2019s also worth considering how targeted your site\u2019s subject matter is. Do you expect users to seek out a specific piece of information from their search? Are you hoping to get highly-targeted traffic or casual viewers? The more accurately you can predict <em>how <\/em>they\u2019ll interact with site content, the easier it is to decide if the infinite scroll is right for you.<\/p>\n\n\n\n<div style=\"position: relative;width: auto;padding: 0 0 70.92%;height: 0;top: 0;left: 0;bottom: 0;right: 0;margin: 0;border: 0 none\" id=\"experience-63d98aa2cad40\" data-aspectratio=\"1.41011236\"><iframe allowfullscreen=\"\" src=\"https:\/\/view.ceros.com\/ceros-marketing\/metaverse-digital-marketing-sidebar-4?heightOverride=890\" style=\"position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: 0;padding: 0;border: 0 none;height: 1px;width: 1px;min-height: 100%;min-width: 100%\" frameborder=\"0\" class=\"ceros-experience\" title=\"Infinite Scroll PQ2\" scrolling=\"no\"><\/iframe><\/div><script type=\"text\/javascript\" src=\"https:\/\/view.ceros.com\/scroll-proxy.min.js\" data-ceros-origin-domains=\"view.ceros.com\"><\/script>\n\n\n\n<p>Luckily, analytics tools and heatmaps from services like <a href=\"https:\/\/www.smartlook.com\/heatmaps\/\">Smartlook<\/a> and <a href=\"https:\/\/www.hotjar.com\/heatmap-analytics\/\">Hotjar<\/a> allow you to see exactly where users spend their time (and also where they jump ship). Get a sense of your audience\u2019s scrolling style, then adjust your UX to fit.<\/p>\n\n\n\n<h2>Today\u2019s best practices for infinite scroll<\/h2>\n\n\n\n<p>Ready to scroll smarter? Use these tips to make sure your interface is up to the task.<\/p>\n\n\n\n<h3>Cut loading lag at all costs<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.thinkwithgoogle.com\/marketing-strategies\/app-and-mobile\/page-load-time-statistics\/\">According to research from Google<\/a>, the likelihood of page bounce increases by 32 percent if load time goes from one second to three seconds. For sites using infinite scroll, this can be a serious problem: With more content to present, the chances of lag increase. If the weight of an infinite scroll layout is slowing you down, fix it quickly or stick to pagination.<\/p>\n\n\n\n<h3>Don\u2019t bury the footer<\/h3>\n\n\n\n<p>Another common issue with infinite scroll is the sense of users getting lost. That\u2019s because some sites <a href=\"https:\/\/twitter.com\/steeevg\/status\/1554130332420476929\">push the footer out of view<\/a> as you scroll down. To remedy this, you can use a <a href=\"https:\/\/www.smashingmagazine.com\/2022\/03\/designing-better-infinite-scroll\/\">footer reveal<\/a>, which is a widget that lets users expand the footer no matter where they are without taking up too much space across the page.&nbsp;<\/p>\n\n\n\n<h3>Give the scroll bar new life<\/h3>\n\n\n\n<p>Finally, you can organize items on an endless page by taking advantage of vertically-spaced dynamic labels. As outlined by the UX research group <a href=\"https:\/\/www.smashingmagazine.com\/2022\/03\/designing-better-infinite-scroll\/\">Baymard Institute<\/a>, these allow you to organize content based on a filter\u2014for instance, price (low to high) or publication date\u2014that is displayed directly on the scroll bar. As you travel further down the page, it acts as a built-in bookmark to help avoid losing your place.<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<div class=\"myclass\">Infinite scrolling can keep users hooked, but that doesn&#8217;t come without controversy. Here&#8217;s everything to know about the state of the scroll.<\/div>\n<p><!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":133,"featured_media":20231,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Designing for Pages with Infinite Scroll - Ceros Inspire<\/title>\n<meta name=\"description\" content=\"Infinite scrolling can keep users hooked, but that doesn&#039;t come without controversy. Here&#039;s everything to know about the state of the scroll.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ceros.com\/inspire\/originals\/infinite-scroll-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing for Pages with Infinite Scroll - Ceros Inspire\" \/>\n<meta property=\"og:description\" content=\"Infinite scrolling can keep users hooked, but that doesn&#039;t come without controversy. Here&#039;s everything to know about the state of the scroll.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ceros.com\/inspire\/originals\/infinite-scroll-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Ceros Inspire\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-01T19:39:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-01T19:41:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ceros.com\/inspire\/wp-content\/uploads\/sites\/5\/2023\/01\/2023-01_Ceros_Promo-Tiles-Infinite-Scroll_Feature.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"1112\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\">\n\t<meta name=\"twitter:data1\" content=\"Sam Dart\">\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data2\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/#website\",\"url\":\"https:\/\/www.ceros.com\/inspire\/\",\"name\":\"Ceros Inspire\",\"description\":\"Just another Ceros Sites site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.ceros.com\/inspire\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/originals\/infinite-scroll-design\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.ceros.com\/inspire\/wp-content\/uploads\/sites\/5\/2023\/01\/2023-01_Ceros_Promo-Tiles-Infinite-Scroll_Feature.jpg\",\"width\":1540,\"height\":1112},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/originals\/infinite-scroll-design\/#webpage\",\"url\":\"https:\/\/www.ceros.com\/inspire\/originals\/infinite-scroll-design\/\",\"name\":\"Designing for Pages with Infinite Scroll - Ceros Inspire\",\"isPartOf\":{\"@id\":\"https:\/\/www.ceros.com\/inspire\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.ceros.com\/inspire\/originals\/infinite-scroll-design\/#primaryimage\"},\"datePublished\":\"2023-02-01T19:39:00+00:00\",\"dateModified\":\"2023-02-01T19:41:02+00:00\",\"author\":{\"@id\":\"https:\/\/www.ceros.com\/inspire\/#\/schema\/person\/97b9b57bff771ebd7129856844650e8a\"},\"description\":\"Infinite scrolling can keep users hooked, but that doesn't come without controversy. Here's everything to know about the state of the scroll.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ceros.com\/inspire\/originals\/infinite-scroll-design\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/#\/schema\/person\/97b9b57bff771ebd7129856844650e8a\",\"name\":\"Sam Dart\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4d1b6241ec9fa6b1b0c6a1b6fa26c49f?s=96&d=mm&r=g\",\"caption\":\"Sam Dart\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/posts\/20229"}],"collection":[{"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/users\/133"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/comments?post=20229"}],"version-history":[{"count":8,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/posts\/20229\/revisions"}],"predecessor-version":[{"id":20251,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/posts\/20229\/revisions\/20251"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/media\/20231"}],"wp:attachment":[{"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/media?parent=20229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/categories?post=20229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/tags?post=20229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}