Infinite scrolling is a user interface trend popping up on many websites. It allows users to scroll without having to click the pagination and wait for a new page. Instead, all users have to do is scroll to the bottom of the page and new content will automatically load on their 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.
Book
Affiliate
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…
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
“Show how much content 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.
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 ?
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.
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
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?
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.
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.
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.
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.
The More button is great idea. It works great for me.
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.
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.
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.
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.
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.
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.
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.
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.
Pingback: infinite scroll or no?
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.
That doesnt sound too friendly
F*** you. Friendly enough for you?
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.
Comments sections of pages would also be a great place to utilise an infinite scroll system if you want that visual effect.
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
Why not make the footer stationary like the nav? This would be preferable to a more button.
Pingback: Konversionsbooster Teil 5: Die Paginierung | Conversion Optimierung, Konversionsrate verbessern - KonversionsKRAFT
Pingback: The Best Practices of Infinite Page Scrolling – for Users & Conversions | Unbounce
good info, i like the positioning of the menus.
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.
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?
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?)
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/
I made my own portfolio website using Mansory and Infinite Scroll with WP. It works fine now.
http://kenichihanasaki.com/
I dislike endlessly scrolling and waiting for more stuff to appear when I had mistakenly thought that I had reached the bottom, which turned out to be a false bottom. I like to load whole pages once and have it all there, no waiting after the initial loading is finished. I give up and leave when I get to a false bottom now because I get so angry. Why can’t I even get a simple list of somebody’s videos at YouTube, for instance, where they don’t even have the courtesy of letting me save my place in a long scroll so I can resume later, or even indicate how far along from start to end I am.
The one major problem with infinite scroll to this day is the exhaustion of browser memory space as the list grows. There comes a point when you need a 64-bit browser and 128GB memory in order to get to the end of some lists.
Is there no possible way to truncate the top end as well as expand the bottom end in the process (vice versa seems obvious also)? In other words, a scrolling window which displays the current page, the previous page, and the next page elements only for instance. This is typical for any windowed view into a larger space (2D and 3D CGI systems, node systems, tree systems). Call it effortless paging or bidirectional infinite scrolling, I don’t care. But the current design flaw isn’t just theoretical, it is already a known problem and a software crasher!