Archive for September, 2008

The Interaction Design Pattern

Thursday, September 25th, 2008

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.

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:

  • The “footer” of the page will be typically impossible to reach.
  • Currently there is no way 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 50megs of RAM.
  • Analytics will not immediately capture the event, so custom configuration is required.
  • FOR GOD’S SAKE, DON’T BREAK THE BACK BUTTON.

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: