Infinite Scrolling Best Practices

by on 12/23/10 at 1:06 am

Infinite scrolling is a new interface technique you’ll find popping up on various websites. It allows users to browse through content without clicking on pagination links. Instead, all users have to do is scroll to the bottom of the page and new content will automatically load on the current page. This not only cuts the clicking, but it also cuts the need to load new pages. This new and efficient way to browse content has many advantages. However, implementing this interface technique doesn’t come without its best practices. Here are a few best practices to follow to make sure that your infinite scrolling meets user expectations.

Keep the navigation bar persistently visible

When you scroll down a normal web page, the navigation bar gradually loses its visibility. However, with infinite scrolling it’s best to keep the navigation bar persistently visible. This allows users to navigate to new categories, do a new search or login at any time, no matter where they’re at on the page. If your navigation bar isn’t persistently visible, users will have a difficult time scrolling all the way back up when they’re deep within the page. Keep your navigation bar persistent, so that navigating to different areas of the site is fast and easy for users.

Give users feedback when loading new content

When new content is loading, users need a clear sign that the website is doing this. Letting users know when new content is loading allows them to prepare for a longer page and new content to display. The last thing you want is a confused or surprised user. Keep them informed by using a progress indicator to show that new content is loading and will soon appear on the page.

Show how much content has loaded and how much is left

With infinite scrolling, users will inevitably load a lot of content on their page. Therefore, it’s a good idea to let users know how much content has loaded and how much is left. This helps users keep track of their progress, so that they can pick up where they left off if they decide come back. This also lets users know how large the site is, how much content they have consumed and when to stop scrolling. By knowing where they are and where the end is, users will feel secure and comfortable with the process. They’ll also feel like they’re making progress.

Use a More button if you have a footer

If your site has a footer and you’re going to use infinite scrolling, use a More button to load new content. New content won’t automatically load until the user clicks the More button. This way users can get to your footer easily without having to chase it down. Without the More button, users would only have a few seconds before the footer disappears off the page. This makes getting to the footer difficult. With a More button users, users would have control over content and the footer.


Bring users back to their previous spot when they click back

When users click back they not only expect to land on their previous page, but their previous spot on the page. After endlessly scrolling through content, losing their spot on the page forces users to have to endlessly scroll through content they have already seen. This inconveniently gives users more work than they need. It can cause users to give up on your site and move on. If you bring users back to their previous spot on the page, they can go back to browsing through content without any hassle. A Back link on the corner of the page can also make clicking back easy and convenient.

Infinite scrolling has its benefits when it’s done right. These best practices will steer you in the right direction, so that your infinite scrolling will delight, and not fright users. With an interface technique as new as this, these best practices are crucial for delivering a friendly browsing experience.

36 Responses to “Infinite Scrolling Best Practices”

  1. Olivier

    Dec 23rd, 2010

    Worth noting that apart from “feedback” and in some respect the “more button”, Facebook does not apply any of those advices (I wish they would). By contrast, Twitter’s new UI implements more of those best practices…

    • Hannes

      Dec 30th, 2010

      Hmmm, FB does apply the more button pattern (Older Posts) only that the first load happens automatically – I’ve seen that on other pages as well, so I guess its also a pattern

  2. Ben Joffe

    Dec 23rd, 2010

    “Show how much con­tent has loaded and how much is left”

    Disagree, at least for the ‘how much is left’ part. It’s called ‘infinite’ scroll for a reason, the user should feel like it’s infinite and consume as much as they like til they tire; you should be expecting a small amount like 2% or so of your users to ever reach the end with this kind of UI, as it’s used for browsing content on a whim. I also don’t see the point in indicating how much has loaded since it’s difficult to “pick up where they left off” later as you say.

    Detailed information about total content and progress should be reserved for UIs using paging.

  3. Ricardo Saavedra

    Dec 23rd, 2010

    Loads content by Ajax it improves user experience, but also affects SEO of the pages, once crawlers are seeking for urls.

    Anyone knows how to solve this problem ?

    • Joshua Powell

      Dec 23rd, 2010

      I have implemented in the past, a two fold approach.

      1. Have an index page that houses the continuous scroll, this would be a chronological listing

      2. Have a separate page that orders items alphabetically, that uses the paging

      While I realize this doesn’t actually ‘solve’ the problem, it is a solution that we have found works well from a search optimization approach.

      • Michael O'Boyle

        Apr 2nd, 2012

        From Google: “Therefore, to improve the user experience, when we detect that a content series (e.g. page-1.html, page-2.html, etc.) also contains a single-page version (e.g. page-all.html), we’re now making a larger effort to return the single-page version in search results. If your site has a view-all option, there’s nothing you need to do; we’ll work to do it on your behalf. Also, indexing properties, like links, will be consolidated from the component pages in the series to the view-all page.”

        http://googlewebmastercentral.blogspot.com/2011/09/view-all-in-search-results.html

  4. Stacia

    Dec 23rd, 2010

    Nice job summing up this emerging pattern.

    What’s an example of a site with infinite scrolling, but no footer? Aren’t footers part of somebody’s best practices?

    • Richard Hance

      Jun 28th, 2011

      Finite scrolling in interent search is available now. Limit results, if data is not found, do another search string. Hard to monetize that, but it sure is nice on the consumer of research. Show expected, usable results is our motto at Norele.com.

  5. florin

    Dec 24th, 2010

    Terrible with smart phones. Take dzone for instance, it is android useless. Besides, no matter how many requests they received to improve the smart phone usability, they won’t bother – it’s been probably more than two years like that. Lame.

  6. Dare

    Dec 26th, 2010

    One thing I hate about the infinite scroll is that it seems to slow down the browser. It’s hardly a smooth experience. I can feel the ram being eaten up as the page gets longer.

    I’m running on hi speed internet with a quad core 2GB ram system, so it’s not like I’m on a stunted cpu or anything.

  7. Zach

    Dec 28th, 2010

    Do you know what Jquery libraries are used for the static navigation and the scrolling progress indicator? Or another way to accomplish these tasks. I can’t find anything.

  8. Roberto

    Dec 30th, 2010

    The More but­ton is great idea. It works great for me.

  9. felix

    Dec 30th, 2010

    Infinite scroll best practice -> Don’t use it! :)

    IMO there is nothing more annoying than scrolling to the bottom of a page and seeing the scroll bar magically elongate. If you have an infinite number of items in your list -> your list is too long! Break it into pages.

    • JohnnyUX

      Jan 1st, 2011

      While I don’t think they shouldn’t be used, it has to be taken in the context of the site itself. Some pages deserve to have it. I love having it on Twitter, as it was rather cumbersome to scroll down and then have to hit the “More” button to get another batch of tweets to look through before hitting “More” again.

      As long as the content that’s being endlessly scrolled through is lightweight and not text/image heavy, then I can see it being useful.

      • Mike

        Jan 12th, 2011

        JohnnyUX makes a great point.

        It also on the context of your design and how that content is delivered. Take for example Google Images. As Marissa Mayer explains (http://www.businessinsider.com/marissa-mayer-google-9-2010-11), the content that is being displayed is a determining factor. Google Images uses infinite scroll because users are able to scan and process images much more quickly than text. Reading a search result takes much longer. This is the reason why their main search results still use the more traditional pagination technique.

  10. Ira Blossom

    Dec 30th, 2010

    Anyone know any good code for the persistently visible navigation bar? I think it’s interesting design method. I really like the way Myspace.com now uses it.

  11. Nay

    Dec 30th, 2010

    This quite possibly is the stupidest design suggestion for web sites I’ve seen in 2010. It’s use is extremely limited and as far as usability goes it has numerous issues, such as scroll length changing as more content is viewed and an extreme lack of context as more content gets pulled in. Perhaps it’s sole use would be a single page dedicated only to “most recent content” (such as a magazine site presenting funnel links to prior months’ issues) or blogs that don’t care about SEO and would like to present excerpt-only views of blogs on a single index page rather than an index page with pagination. This would also be utterly useless for presenting content to screen readers and if implemented badly (which will happen often in the “me too” crowd of design “experts”) would make it impossible for someone to link into something far down the content chain on the page.

    • Avangelist

      Jan 5th, 2011

      Just because its use is limited doesn’t make it stupid that is pretty narrow minded there.

      There are some great uses for infinite scroll, Tumblr is a fantastic example (when the site works). A constant stream of media removes the excessive requirement to click next and wait for a page to be redrawn. It is a great use of infinite scroll.

      Facebook did actually rollout infinite scroll at one point but then pulled it replacing with a staggered button option which is there now.

      SEO is bunkum without context. If what you are referring to is that ‘the information isn’t on the page’ then no, but it isn’t on the page until your application requested it in the first place, how do they deal with that I wonder!? answer? Nobody cares, it works.

      If you have so much content being served up to a page that you need to use an infinite scroll system, there is too much content there to be of the quality it should be in order to perform well in so called SEO practices anyway.

      • dude

        Mar 16th, 2011

        If the page is full of links and they’re essentially hidden from search engine spiders because they get loaded via AJAX, then yes, this is very bad for SEO. Your pages won’t get crawled or indexed and you’ll miss out on search engine traffic.

        • Tom

          May 1st, 2012

          It’s very simple to detect search engines and provide them an alternative version of the page which lists all the content. If you do that, there is no problem.

  12. infinite scroll or no?

    Jan 1st, 2011

    [...] Infinite scroll best practices   [...]

  13. Vigleik Norheim

    Jan 3rd, 2011

    Thanks for highlighting some great design patterns here! To you guys who “hate infinite scrolling”: navigation patterns are wayfinding tools – NOT graphic design or something that needs a subjective opinion. If it works in a usability- or A/B-test, opinions do not matter.

  14. Terry Wang

    Jan 3rd, 2011

    Thanks for collecting these best practices. I think infinite scrolling definitely has its position in interface design, but it works best for list of simple items such as updates, activity streams, news items, subscription list and so on.

    I think we can enhance this pattern with some fixed positioned facilitators such as a fixed header (as Twitter did), so users can access the navigation or search box anytime without scrolling back to the top which in some cases could be difficult when user is at the very bottom of the page.

  15. Avangelist

    Jan 5th, 2011

    Comments sections of pages would also be a great place to utilise an infinite scroll system if you want that visual effect.

  16. Aicke Schulz

    Jan 12th, 2011

    For years we used infinite lists without dynamic reloading. For some weeks/month we use infinite scrolling together with variable paging. We changed it because of loading times, but the paging idea should help mobile users too, because the list can be limited to different lengths.

    We also have a more button but only when the user scrolls / jumps to the end of the list. Otherwise the list is automatically reloaded.

    Maybe we will implement some of the other practices, “how much is loaded” sounds good for us.

    Feel free to give feedback to the dual approach, but don’t judge the webdesign, it will be redesigned in near future.

    See it for example at our notebook category
    http://www.hardwareschotte.de/hardware/preise/catid_110005/preis_Notebooks

  17. Susan

    Jan 14th, 2011

    Why not make the footer stationary like the nav? This would be preferable to a more button.

  18. [...] Practices – Smashing Magazine In search of the ultimate pagination – wolfslittlestore Infinite Scrolling Best Practices – UX Movement Über den Autor: Manuel Ressel ist Conversion Designer bei der Web Arts AG. Seine [...]

  19. [...] infinite scrolling is a relatively new technology, it’s still a little buggy. At the moment, some infinite scroll users have noted that it doesn’t work well – or at all – on their mobile [...]

  20. honour chick

    May 19th, 2011

    good info, i like the positioning of the menus.

  21. Matthew

    Apr 26th, 2012

    I like your “best practices”. LinkedIn just starting using infinite scroll for “People you may know” and it uses _none_ of these practices. Hugely frustrating. Only saving grace is that clicking a link opens a whole new window–so you don’t lose your place in the scroll.

    • Mark

      May 29th, 2012

      Same thoughts here. One usability issue is that if I had gone through the top list nth time, I still have to do it again to get to the rest below. Any accidental click that brought me to the top will mean having to repeat the scrolling ad nauseum.

      Perhaps a bookmark may be useful if the content is fixed. Otherwise, memory placement will become an issue as the user will have a hard time finding the same spot again. A Hansel and Gretel challenge perhaps?

  22. ALitsa

    Oct 1st, 2012

    Any best practices around how much content goes into each batch? Should the amount of content loaded each time be based on the user’s bandwidth? Is that something you can determine (especially on mobile devices?)

  23. William

    Dec 18th, 2012

    Now the challenges is to fix your ads for the infinite scroll solution :). Below is a way to do it:
    http://metah.ch/blog/2012/12/strategy-for-ads-placement-with-infinite-scroll-wordpress/

  24. Kenichi

    May 11th, 2013

    I made my own portfolio website using Mansory and Infinite Scroll with WP. It works fine now.

    http://kenichihanasaki.com/

Leave a Comment