Skip to content

Home

Jump to bottom Edit New page
gabrielsomoza edited this page Mar 1, 2013 · 6 revisions

View Wiki Table of Contents

The Interaction Design Pattern

Infinite scroll has been called autopagerize, unpaginate, endless pages. But essentially it is pre-fetching content from a subsequent page and adding it directly to the user’s current page.

Problem Summary

User is browsing paged content.

Use When

  • Retaining the user is important and clicking “Next Page” is a usability barrier.
  • The full content available is too large to show on initial load.
  • The content is available in paged chunks: search results, blog posts, product listings portfolio features.
    InfiniteScroll Pattern

Advantages

  • Users are retained on the site far better. ** Users are less likely to continue on to the next “page” if they have to click something versus it being delivered automatically to them. [citation needed]
  • Requires no adjustment in a user's typical reading habits.
  • The added functionality needs no affordances or instruction.
  • As long as the functionality is enhancing an existing navigational structure (like the wordpress plugin here), it remains SEO-friendly and Accessible. It will degrade gracefully if a user does not have JavaScript enabled..

Disadvantages

  • On most webpages the "footer" of the page will be typically impossible to reach.
  • Currently there is no way for the user to cancel or opt-out of the behavior. *
  • There is no permalink to a given state of the page. *
  • Dynamically adding more content to the page increases the memory footprint of the browser. Depending on the browser, this could account for around 50 MB of RAM.
  • Analytics will not immediately capture the event, so custom configuration is required.
  • FOR GOD'S SAKE, DON'T BREAK THE BACK BUTTON.. *

(*) Although this could be easily implemented on an as-needed basis by calling the plugin's API.

Implementation Recommendations

  • Depending on site latency, new content can be fetched aggressively (when a user has 500px of the page left to scroll) versus at the last moment (with ~100px left).
  • User should be notified when there is no more content available.
  • Consider a faux pagination widget to allow for navigation within the new content. Travis Isaacs has ideas on a running pagination.
  • Infinite scroll should be implemented as progressive enhancement. Typical navigation/pagination should be present for users with JavaScript disabled. JavaScript-enabled users, however, will experience the more rich reading functionality.

Examples in the Wild

Add a custom footer
Add a custom sidebar
Clone this wiki locally