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.

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:

    41 Responses to “The Interaction Design Pattern”

    1. TheUiGuy says:

      I couldn’t agree more with the philosophy here. At work, we have a lot of paging, and moving forward I want to try to institute something like this, however – I have one lingering question: What to do to manage memory growth? There comes a point in instantiating objects, lets say, each post is a new element – when this continually grows – your reference count also grows. What if the scrolling is on the order of hundreds of items?

      I only had one initial idea, which was to remove references to posts that are within a certain limit, like 100 items previous. Then, re-initiate the gets for those hundred if the user scrolls up, and do the same thing going down.

      Essentially you would have a window of, for example, 100 items in the viewport above your viewing area, and potentially 100 items below your viewing area (if the user had scrolled back up). Beyond that references are removed, or objects/DOM is emptied.

      Any other ideas on a viable solution to the scalability of this? Anything is appreciated. Thanks! http://theuiguy.blogspot.com

    2. Paul Irish says:

      Yeah I’ve noticed this myself. I run it on my mp3 blog Aurgasm and a few people have mentioned growing memory use. So I agree this isn’t scalable for a rich media site that has >100 pages, but really I don’t know what that upper bound is.

      Perhaps it doesnt trash the content 100 items (or whatever) ago, but instead stores the innerHTML in a javascript object, it would certainly be a hugely reduced memory footprint. One i wouldn’t be worried about.

      This does deserve some more thought. Thanks for sharing yours.

    3. DivinoAG says:

      Hello. I was looking for some ideas on how to implement this on a new website, and I’m glad to see there is something ready for WordPress already. Thanks a lot.

      I just have one question. My idea is to keep normal paged navigation for the actual website, but I would like to implement this for comments only. Do you think it’s a possibility with the current system, or would I need to change a lot for the plugin to work like that?

      Thanks again for the great work.

      Cheers.

    4. THE MOLITOR says:

      Great job! I’m using this on my personal site :-)

    5. Chema says:

      Maybe you are interested on some changes I’ve made to have pagination ;)

      You can check them uot in neo22s.com

      I will do a post about how to do something like this :D

    6. Chema says:

      ok, I did a plugin I hope is useful http://neo22s.com/wp-pagescroll/

    7. Theres another example of infinite scroll in action – dzone.com, when you scroll down the system produces more results which arent fetched until you reach the bottom of the scrolling area…

    8. My idea is to keep normal paged navigation for the actual website, but I would like to implement this for comments only. Do you think it’s a possibility with the current system, or would I need to change a lot for the plugin to work like that?

    9. Going to attempt to get this running on my tumblr page. Hopefully support for other platforms will come around soon.

    10. nakliyat says:

      Is this theme compatible with wordpress 2.3.3? Please send me an email (you have it) and let me know as I would likeIs this theme compatible with wordpress 2.3.3? Please send me an email (you have it) and let me know as I would like to use this. to use this.

    11. THomas says:

      Any idea how to solve the problem with seo, I noticed that if we use this kind of patterns, there is no way google or other search engine will index results.

    12. Paul Irish says:

      Thomas,
      The infinite scroll code that I offer is 100% SEO happy. It reuses existing pagination links, so users without javascript click those (and the search spiders).. and the users with javascript get the enhanced experience.

    13. LorD says:

      Amazing plugin, any chance of making it work for Joomla 1.5.x? Pretty, pretty please?

      Cheers!

      LorD

    14. LifeNT says:

      thanks for this good plugin, but I want it to work with another plugin which would greatly enhance this infinite scroll: the “Smooth Scroll Links [SSL]“, because when you scroll down very deeply there’s should a link to “back to top”, so I added the SSL plugin, it will take visitors back to top smoothly, but there’s a problem that this infinite scroll can’t work well with SSL, when there’s new content refreshed by infinite scroll, the “back to top” link didn’t got ssl effect! you can see my site as example, it seems the js calling order’s problem, and I can’t fix it.

    15. Paul Irish says:

      LifeNT, I added the code to the Plugin Compatibility post. :)

    16. BAC says:

      Cool plugin! Thanks so much for this.

      I have an idea.
      I think the usability issues could somewhat be solved by implementing iPhone like sliding headers as demo’ed here: http://jqueryfordesigners.com/iphone-like-sliding-headers/

      idea being that the current page number is displayed Floating to the side of the list (or above each page) and replaced by the next page header when reached.. That would be so cool.

      I will have a quick stab at implementing this.. If you think it would it is feasable???

      Cheers

      BAC

      BAC

    17. @josh i see now you are wrong because this video proves the point made http://www.youtube.com/watch?v=BlSXYwmkmOQ

    18. webdesign says:

      I have read couple of articles here and could say it was really interesting, thanks for sharing this.

    19. bagonline says:

      Hen Bu Cuo,Yeah~

    20. Patrick says:

      Try google images….it has infinite scroll +pagination…would be awesome if something like that could be implemented in this plugin!

    21. That’s a good idea. Will use it in coming Projects.

    22. Cool, I had tried similar pattern on a project with a another cms, but it does´t works correctly. Time to change to wp!

    23. kjjb says:

      Good polished UI and nice informative articles. I will be coming back in a bit, thanks for the great article.A wholesale
      Tiffany bracelets distributors’ only job is to warehouse the products they receive from the factory and shipTiffany earring out to the companies who Tiffany necklace are buying them for resell.Tiffany pendant it does not make any sense for them to spend money on marketing theTiffany rings they have. tiffany jewelry

    24. mkp says:

      Does this plug-in only work with WordPress or can this be implemented on other platforms?

    25. Vance Hooley says:

      there goes you pint tomorrow night sir. . .

    26. BCB says:

      I’ve installed Infinite scroll but now my “Facebook Share (New)” Plug-in doesn’t work. I know there’s a spot in the Infinite Scroll options page, for Javascript to go that normally loads when the page opens. I put what I think is the right code but I’m not sure if it even is, anyone know?

    27. David says:

      Hi! What exactly do you mean, when you say that custom configuration is needed for Analytics to work? I understand why it’s needed but could you give me a hint how to do it?
      Thanks in advance,
      David.

    28. Eric Curtis says:

      Thank you for the hard work and the great plugin. I just finished adding it to my project. One question. The content loader comes on followed by the new content. Then there is a little bump up as the loader div is hidden. Any suggestions for making that look a little smoother?

      Cheers.

    29. Bree Boelke says:

      When evaluating article submission sites as to whether or not to distribute content to them, it is best to pay special attention to the alexa ranking and not so much to the directory’s pagerank value.

    30. interesting article, is the first entered in this site and will not be the last
      Greetings

    31. Wow that was strange. I just wrote an incredibly long comment but after I clicked submit my comment didn’t appear. Grrrr… well I’m not writing all that over again. Anyway, just wanted to say wonderful blog!

    32. That is an amazing Tiffany ring. Great read too. Thanks. :)

    33. All right, this is a good start but i’ll have to check into that a tad more. Will show you exactly what more there is.

    34. Inmake says:

      Весьма и весьма..

    35. Arindam says:

      Do you know how to center this item?

    36. Drew says:

      My site works flawlessly on a desktop browser, however mobile safari on my iphone/ipad won’t do any infinite scrolling. It just sits at the end of the page without any extra loading.

      Any help? Thanks!

    37. Aqeel says:

      I tried this plugin in my website but unfortunately it didn’t work.. i’ve tried all different combination for the selectors but it didn’t work.. Can you plz help me finding the correct selectors for my website..
      This is what im using right now:
      Content CSS Selector: #left-div
      Post CSS Selector: #left-div div.home-post-wrap
      Navigation Links CSS Selector: div.page_navi
      Previous posts CSS Selector: div.page_navi a:first
      this is my website: ayyamgroup.net (hint: it’s in Arabic)

    38. lee says:

      I just wanted to thank you for making infinite-scroll. I’ve been using it on my blog for a while and I feel it makes it much easier for people to read older posts… seamless in fact, that’s the point, isn’t it!

      In a recent infinite-scroll upgrade, there was an incompatibility with the WP Fancy Zoom plugin. I wrote about the problem on WordPress.org and am thankful that you looked into the conflict, identified and addressed it, coming out with a new version in just a few days. Did I mention “Thank you”?

    39. Webdesign says:

      Thanks , I’ve just been searching for information approximately this subject for a while and yours is the greatest I have found out till now. But, what concerning the conclusion? Are you certain in regards to the source?|What i do not realize is in truth how you’re not actually much more neatly-preferred than you may be right now. You’re so intelligent.

    40. sajin says:

      Hi,
      Thanks for this great plugin.
      This worked with “Twenty Ten 1.2″ for me.