Infinite Scrolling: Let’s Get To The Bottom Of This

Advertisement

Infinite scrolling promises a better experience for users. However, the good is often accompanied by the bad and the ugly. Once we understand the strengths and weaknesses of infinite scrolling, we can begin to use it to enhance our interfaces.

Human nature demands hierarchy and structures that are easy to navigate. But infinite scrolling sometimes leaves users feeling disoriented as they travel down a page that never ends.

The NeverEnding Scroll1

The Good

Long lists are not new, but the way in which we scroll these lists has fundamentally changed since the arrival of mobile interfaces. Due to the narrowness of mobile screens, list items are arranged vertically, requiring frequent scrolling.

Infinite scrolling is highly trending2 as an interaction behavior on pages and lists. The basic functionality is that, as the user scrolls through content, more content is loaded automatically. With the popularity of social media, massive amounts of data are being consumed; infinite scrolling offers an efficient way to browse that ocean of information, without having to wait for pages to preload. Rather, the user enjoys a truly responsive experience, whatever device they’re using.

Pagination vs. Infinite Scroll3
Pagination versus infinite scrolling (Large version4)

Websites with lots of user-generated content today are using infinite scrolling to handle content that is being generated every second. By unspoken agreement, users are aware that they won’t get to see everything on these websites, because the content is updated too frequently. With infinite scrolling, social websites are doing their best to expose as much information as possible to the user.

Twitter5 integrates infinite scrolling effectively. Its feed fits the criteria: a large amount of data (tweets) and a real-time platform. From the perspective of the user, all tweets are equally relevant, meaning that they have the same potential to be interesting or uninteresting; so, users will often scroll through all of the tweets in their feed. Being a real-time platform, Twitter is constantly being updated, even if the user leaves their feed unattended. Infinite scrolling seems to have been created especially for websites like Twitter, which successfully employs the technology.

Infinite scrolling appears to have found its niche on the Web. However, there are also drawbacks that must be considered before assessing its value.

The Bad And The Ugly

With so much data to browse, users must stay focused on the information they are searching for. (Remember about being goal-oriented?) Do users always want a never-ending stream of data? Analytics show that when users search for information on Google, only 6%6 advance to the second page. So, 94% of users are satisfied with receiving only 10 results, which suggests that users find Google’s ranking of results to be relevant.

To Click or Not to Click

Google has implemented infinite scrolling for image search results but has yet to implement7 it for its general results. Doing so would eliminate the need for users to click to reach the second page. Google will probably maintain pagination because this pattern is quite symbolic for its brand. If it does switch to infinite scrolling, when would users typically stop scrolling? After 20 results? 50? When does an easy browsing experience become more complicated?

Looking for the best search result could take a second or an hour, depending on your research. But when you decide to stop searching in Google’s current format, you know the exact number of search results. You can make an informed decision about where to stop or how many results to peruse because you know where the end is. According to studies8 conducted in the field of human-computer interaction, reaching an end point provides a sense of control; you know that you have received all relevant results, and you know whether the one you are looking for is there or not. Knowing the number of results available provides a sense of control and helps the user make a more informed decision, rather than be left to scour an infinitely scrolling list.

Pagination: The Click Barrier9
Pagination is a barrier of clicks. (Large version10)

When items are distributed across Web pages, they are framed and indexed and have a start and end point. The information is presented clearly and orderly. If we select an item from a paginated list and are taken from that page, we know that clicking “Back” will return us to that page (probably to the same scroll position). Our Web search will continue right where it left off.

If you scroll the same list of results with infinite scrolling, you are left without that sense of control because you are scrolling through a list that is conceptually infinite. Let’s say you count yourself among the 94% who stop reading after the first page (i.e. 10 results) of a Google search. When the list scrolls infinitely, there is essentially no end to the first page. Rather than look for the end of the page, which doesn’t exist anyway, you decide to stop scrolling at the 10th item. This poses a problem with infinite scrolling, because the 11th item is directly in sight. With a paginated list, on which you wouldn’t see the 11th result, deciding not to continue browsing is easier. However, when the next results are already there11, you’d probably just keep on scrolling and scrolling.

As Dmitry Fadeyev points out:

“People will want to go back to the list of search results to check out the items they’ve just seen, comparing them to what else they’ve discovered somewhere else down the list. Having a paginated interface lets the user keep a mental location of the item. They may not necessarily know the exact page number, but they will remember roughly what it was, and the paginated links will let them get there easier.

Not only does the infinite scroll break this dynamic, it also makes it difficult to move up and down the list, especially when you return to the page at another time and find yourself back at the top, being forced to scroll down the list once again and wait for the results to load. In this way the infinite scroll interface is actually slower than the paginated one.”

— Dmitry Fadeyev, When Infinite Scroll Doesn’t Work12

When Infinite Scrolling Fails

The best companies are constantly testing13 and studying14 new interactions with their users. Increasing numbers of these studies are showing that infinite scrolling does not resonate15 with users if it does not support their goal on the website.

Temptation

When you’re looking for that perfect search result and are tempted to continue scrolling into a wasteland of irrelevant results, time is wasted. Chances are that the best result will appear in the first 10 items. Therefore, infinite scrolling merely tempts you16 to continue reading, wasting time and decreasing productivity in the process.

Optimism

Even more annoying is that scroll bars do not reflect the actual amount of data available. You’ll scroll down happily assuming you are close to the bottom, which by itself tempts you to scroll that little bit more, only to find that the results have just doubled by the time you get there.

Exhaustion

Infinite scrolling overwhelms users with stimuli. Like playing a game that you can never win, no matter how far you scroll, you feel like you’ll never get to the end. The combination of temptation and optimism play a big role in exhausting the user.

Pogosticking

Infinite scrolling often causes your position on the page to get lost. “Pogosticking” happens when you click away from an infinitely scrolling list and, when you return by clicking “Back,” are brought to the top of the previous page, instead of to the point where you left off. This happens because the scroll position is lost when you navigate away from an infinitely scrolling page, forcing you to scroll back down each time.

Loss of Control

Infinite scrolling leaves you with the feeling that you might be missing out on information. You continue scrolling because the results are right there, but you feel overwhelmed because you’re losing control over the amount of data being shown. There is something nice about defined pages on which the amount of content is quantified, where you can comfortably choose whether to click to view more or to stop. With infinite scrolling, you don’t have control over the amount of data on the page, which becomes overwhelming.

Distracting

Etsy17, an e-commerce marketplace, implemented infinite scrolling, only to find that it led to fewer clicks18 from its users. Infinite scrolling was unsuccessful because users felt lost in the data and had difficulty sorting between relevant and irrelevant information. While infinite scrolling provided faster and more results, users were less willing19 to click on them, defeating its very purpose.

Etsy's Home Page20
Etsy’s home page (Large version21)

Unreachable

Have you tried reaching the footer of Facebook lately? The footer block exists below the news feed, but because the feed scrolls infinitely, more data gets loaded as soon as you reach the bottom, pushing the footer out of view every time. Footers exist for a reason: they contain content that the user sometimes needs. In Facebook’s case, the user can’t reach it. The links are repeated elsewhere but are harder to find. Infinite scrolling impedes the user by making important information inaccessible.

Facebook auto-loading News Feed and the unreachable footer22
Facebook’s auto-loading news feed makes the footer unreachable. (Large version23)

Footers serve as a last resort. If users can’t find something or they have questions or want more information or explanation, they often go there. If they don’t find it there, they might leave the website altogether. Companies that implement infinite scrolling should either make the footer accessible by making it sticky24 or relocate the links to a sidebar.

Not Exclusive

Pinterest25 does not have a footer at all, which makes sense given the problem we just saw with Facebook. Through infinite scrolling, Pinterest emphasizes its profusion of data, an endless sea of inspiration taken from all over the Web.

Pinterest Ocean of Pins26
Pinterest’s ocean of pins (Large version27)

Images are faster and easier to scroll than text, so Pinterest and Google Images succeed with infinite scrolling to an extent. However, billions of images28 are on the Web, and users would prefer to see only the best of them. There is something to be said for exclusivity, which seems to be lacking in Pinterest’s layout.

Limiting the number of images on Pinterest’s home page, with an “Editor’s picks” or “Most popular” list, might make the website more appealing. How exclusive can a pin be when a ton of other similar pins are next to it?

Pinterest’s tactic of using infinite scrolling for its plethora of data suffers because it overwhelms users29. The collection looks bottomless, but its immensity is somewhat daunting, and browsing it might seem a waste of time. Ultimately, Pinterest is trying to expose users to infinite inspiration30, but that actually undermines the human need for control31. The amount of data becomes intimidating, and users are left with mixed feelings.

When Usability Wins

As mentioned earlier, Twitter integrates infinite scrolling effectively. The user sees an infinitely growing list of tweets and can comfortably click on a tweet to expand it in place, preventing the page from refreshing and, as a result, maintaining their scroll position.

Twitter's torn feed32
Twitter’s torn feed (Large version33)

On its mobile version, Twitter even adds a “torn paper” marker, indicating to the user where to resume reading. This subtle and simple solution enables the user to scroll up and down the list, while having a recognizable point to return to. Psychologically, that marker reassures the reader by dividing read and unread content. Such markers give the user a sense of control and a better perception of the content’s depth and how far they’ve gotten into it.

Twitter is not the only one. Discourse34, an emerging discussion platform, also has infinite scrolling that empowers the user. The company considered the importance of infinite scrolling to its user experience and implemented an intriguing and unique progress indicator. The indicator appears when needed and remains in view (without interfering) while the user reads the content. The indicator numbers the item currently being viewed out of the total number of items. This is a great way to make the user feel in control, even with a lot of data.

Smart progress indicator on Discourse.com35
The smart progress indicator on Discourse (Large version36)

Go Hybrid

A hybrid of infinite scrolling and pagination is also a good option in many cases. With this solution, you would show a “load more” button at the end of a preloaded list, which, when clicked, loads another batch of items onto the list. The same behavior that infinite scroll does automatically, this button does on demand. The interface gains some of the advantages of infinite scrolling, without some of its drawbacks.

Because infinite scrolling requires the website to fetch so much content, the hybrid solution is used at times to control the data load. In Facebook’s news feed and Google’s image search, the infinite scrolling is automatic at first but becomes on-demand once a certain number of items have loaded. This maintains the interface while limiting the load on the server.

Hybrid Infinite Pagination on Google Images37
Hybrid infinite pagination on Google Images (Large version38)

Infinite Pages

Infinite pages39 take the concept of infinite scrolling to a new level. Websites that employ this concept are “one-pagers.” To remove the barrier of clicking to the next page, the designer turns the entire website into one long scrollable page. Examples are Unfold40 and Lost World’s Fairs41.

On these one-page websites, the sections are spread vertically, one after another. This makes the whole website less comprehensible — hence, less accessible. These websites might not have infinite scrolling, but the user might still have that feeling of a never-ending page.

On infinite pages, the height of each section will vary according to its contents. Although the approach can make for some creative interactions, it can leave users disoriented and unsure where to scroll for the next piece of information. The scroll bar is hidden on many such pages, leaving users feeling lost as they unconsciously look for the scroll position42 to track their progress. Hidden scroll bars deprive users of that chance for rescue. Users shouldn’t be left helpless; the interface should clearly show them how to navigate the page.

Infinite Page
Not knowing where they stand can leave the users disoriented.

UX engineers need to take extra care when designing infinite pages. They must take into account accessibility; tell users where they stand by showing the length of the page and how much they’ve viewed. Solutions could include a fixed menu43, a map of the page44 or a scroll progress bar45.

Another trick is the parallax effect46, whereby different layers on the page move at different speeds according to the user’s scrolling, creating the illusion of depth (as seen on Andrew McCarthy’s website47). While it can help to create beautiful48 and innovative49 experiences, it is sometimes heavily overused, and users can get confused by how much they need to scroll for more content. When the parallax effect is combined with animation, the user can get confused about whether the page is being scrolled by their movement or is moving autonomously. It’s wise to use the technique to enhance content, not as the content itself.

Let’s Get To The Bottom Of This

Infinite scrolling can be an innovative feature that greatly improves an interface by exposing content and making performance more efficient. But it needs to be used correctly.

Avoid the following sinkholes to achieve a strong infinite scrolling experience:

  • Users want immediate access to exclusive data.
    Users don’t want to be left to explore all of a website’s data on their own. When implementing infinite scrolling, identify what data is exclusive to your website and elevate it to the top of the page, and filter less relevant information.
  • Users want to feel in control.
    Infinite scrolling sabotages that feeling of control. Add a smart progress indicator, a fixed menu or a map.
  • Users often look for landmarks when scrolling.
    When scrolling through long lists, users expect to be able to easily distinguish between new and viewed data. Add landmarks along the interface to keep users oriented.
  • Consider conventional pagination or a hybrid solution.
    Good old pagination is always an alternative to infinite scrolling. And if that doesn’t fit the context, then a hybrid solution, using a “load more” button, could greatly enhance the interface.
  • Provide interesting content without an ambiguous interface.
    Having to traverse a never-ending list is logical only if the user leaves feeling that it was worthwhile.
  • Users often expect a footer.
    If footer-type information is functional to the interface, then it should appear at the bottom of the page. A fixed footer is usually the way to go with infinite scrolling.
  • An infinite list is still a list.
    Infinite scrolling still needs to meet common interface standards. Whether users take their eyes off the screen for a moment or click a link and then click “Back,” they expect to return to the exact point where they left off. Whatever your interface, make sure it meets users’ expectations.
  • Effects are nice to have but not a must.
    Many infinitely scrolling interfaces have various effects to show more data (whether by sliding in new content or another method). Be mindful not to focus more on effects than on presenting data in the most effective way possible.

Use It Correctly

Users are goal-oriented and find satisfaction in reaching the end of their exploration. To be effective, infinite scrolling has to account for this. Nothing is really infinite, not even these infinitely scrolling lists we’ve looked at. Users should always know where they stand, even when the content has not finished loading. They should know what the total amount of data is and be able to easily navigate the list. Infinite scrolling has to be implemented in the best possible way so that users can always find their way.

(al)

↑ Back to topShare on Twitter

Yogev Ahuvia is a Senior Front End Developer at Netcraft, a leading UX agency in Israel. Craving for a perfect balance between user experience and great code, enthusiast of CSS and JavaScript, Yogev writes and speaks Front End on blogs and events, and is the head instructor of Netcraft Academy's HTML5 course. You can find him on his Twitter account @kindofone or on the HTML5 G+ Community he's moderating on.

  1. 1

    Niels Matthijs

    May 3, 2013 3:05 am

    I would say one of the keywords when choosing to use infinite scrolling is “discovery”. It’s useful when you’re looking for a certain item but aren’t sure what exactly it is you want.

    Think Google images (page 10 could still wield some wildly interesting results)
    Think “I want to buy my mom a DVD but have no idea which one”
    Think “I want a new desktop background”
    Think “So … tablets. What’s out there?”

    In situations like this paging (and load more links) get into the way and infinite scrolling works best. Infinite scroll list give you a quick overview of what is out there. Once you feel you’ve seen enough to get a good grasp of your choices, you can start filtering down to the items that looked promising.

    Another great use case for infinite scrolling is when you implement a master-detail pattern. The list is on the same page as the detail, so users can see the detail without losing the context of the list.

    9
    • 2

      Great elaboration, Niels! The master-detail pattern you mentioned is a great example of when infinite scrolling fits the goal of the interface for the user. Also, I very much agree, generally, that infinite scrolling is almost a must-have feature for discovery interfaces. Just like you said, the user does not search for something specific so they need to see a large amount of items to find the one thing they like.

      I do think, though, that websites too often are blinded by the advantages of easy discovery using infinite scrolling, but forget that their users are searching for that one thing, after all. Even in your example of “buying a DVD for mom”; this is the user’s goal (finding a DVD for mom), meaning that the interface should show the most relevant items in relation to this query, which should probably limit the amount of relevant results by much! This could be done by categorizing the items on the website or by allowing to enter keywords for the search.

      Infinite scrolling might be tricky in those implementations as we want to use it to show the user as much information as possible, but the user can’t handle that much information without boundaries. Pagination might be less flowing for discovery purposes, but it might bring the user to decide faster on their chosen item and prevent some of infinite scrolling worst pitfalls – temptation and optimism.

      7
      • 3

        Geert-Jan Brits

        May 8, 2013 1:50 pm

        ” I very much agree, generally, that infinite scrolling is almost a must-have feature for discovery interfaces. ” Which is why infinite scrolling DOES work for pinterest imo… Otherwise excellent article.

        4
        • 4

          OMg… sorry – I clicked the down vote – and tried to change it. I COMPLETELY agree with what you said!

          2
    • 5

      Context matters

      It also depends on the context of your design and how that content is delivered. As Marissa Mayer (when she was at Google) explained, 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. You can read more at: http://www.takadesigns.com/blog/2010/11/29/should-you-use-infinite-scroll-instead-of-pagination-to-load-more-content/

      1
    • 6

      “Once you feel you’ve seen enough to get a good grasp of your choices, you can start filtering down to the items that looked promising.”

      …if you can find them again…

      0
    • 7

      Agree with Niels. This is one of the reason why QIITO choose masonry layout for visitor to discover places. When visitor has no idea of where they want to go, they will more likely to browse to discover more places. We give them wide range of choices and assist them in making their choice.

      Do you agree with this when you are planning your trip? Experience it before you give your answer – http://qiito.com

      1
    • 8

      SImple:
      Infinite scrolling (lazy loading) works great for images and is a disaster as its used for Articles like Forbes or LA Times. They were sold junk as modern, My opinion

      The reasons are that people can scan images but endless articles with no idea of what is where is a UX disaster. Its not a pleasant surprise to me but a confusion. NY Times has it right. Remeber the silly trend to have the words that are most popular bigger and throw a word salad together. Its on par with that

      0
  2. 9

    Daniel Schwarz

    May 3, 2013 2:13 am

    A brilliant article. We use the masonry script to achieve infinite scrolling over @airwalk_design (http://airwalk-design.com) to “list” design inspiration, but we’ve connected it to a database and added our own jQuery effects. A lot of interesting points for us to consider.

    Good job!

    3
    • 10

      Terrible UX, you should drop the box-shadows – that site is super laggy on my quite modern PC. Images-based shadow would perform better.

      -1
  3. 11

    “UNREACHABLE” that is the worst experience, when you see the footer and then the content loads… I agree with the fixed footer. Maybe on :hover it can slide up if there is allot of footer content. Lazyload is a good jquery plugin to delay img loading outside the viewport. http://www.appelsiini.net/projects/lazyload

    9
  4. 12

    This is nice!
    Can I translate this into Chinese and share it on my blog? For sure I will notice from Smashing Magazine.

    0
  5. 15

    Sometimes its useful (most times for users, not sure about what they want…) sometimes not. A very exiting feature fore some websites…
    Sure everything is infinite … to explore that websites are is a missing point since ages and an old print-myth.

    1
  6. 16

    Timur Carpeev

    May 3, 2013 4:10 am

    Etsy is a handmade market place not a vintage store :)

    0
  7. 19

    Yes infinite scrolling is distracting at times. You just go on scrolling the mouse wheel until you index finger gets tired lolz

    1
  8. 20

    Thank you for your in-depth article on this topic. Searching for pro’s and cons I found many articles that discuss infinite scrolling either for search results or for blogging/commenting tools. I am considering using the “infinite scroll on demand” pattern for a datatable. The datatable I have in mind contains a finite set of personal data, data that users will recognize as their own. I feel that, in this case, other pro’s and cons might apply.

    A pro of using infinite scroll instead of pagination could be that it enables users to bring into view as much data as necessary for a good overview. Some datatables with pagination already enable users to define the amount of items in the table. However, I feel the ‘More button’ is more intuitive and requires no conscious decision on how many items would suffice. Also, exploring personal data is less likely tempting or exhausting for users than exploring the unknown.

    A con of using infinite scroll could be that it is laborious to find a specific set of data that is far down the list. That makes a good sorting and filtering mechanism indispensible. I think the combination might be very powerful: the user can sort or filter the data to get the most interesting data first and then browse by scrolling down. Another con could be that the tableheader moves out of sight leaving the data hard to interpret. This might be solved with a sticky header.

    I would be excited to hear your thoughts on this subject.

    -2
    • 21

      Hey Heleen,

      You mentioned some great pros and cons of infinite scrolling interfaces! On data tables, infinite scrolling could bring a very intuitive experience as the scrolling is done in a boxed component – the table. This means that probably when the user is scrolling the data table, the page’s body scroll stays in place, while only the inner contents of the data table are scrolling. By that, the interface avoids some of infinite scrolling drawbacks like losing scroll position, orientation distraction and the unreachable footer.

      I very much agree to what you said in regards to sorting the data table in order to make the scroll easier. When users scroll through content that is recognizable, like personal information, scrolling becomes less exhausting since they’re not scrolling through the unknown. The question is whether the contents of the data table can be intuitively sorted, and that depends on what data it contains.

      I feel that the use of a hybrid solution (using a ‘Load More’ button), in the case of a datatable, would interfere the experience, because in datatables users tend to know what they’re looking for as opposed to when discovering new data.
      When the user chooses to sort the table by a parameter, the hybrid solution would be even more in the way, because when the table is sorted, the user easily scrolls through it, supported by the sort parameter progress in the scroll. In this case, the user don’t feel exhausted as there are no surprises down the scroll (because it is sorted). The hybrid solution comes in handy when we want to help users in deciding whether they’ve seen enough and want to stop or load more and go on scrolling.

      In long datatables, infinite scrolling could harm our experience as we lose control of where the item is down the list. If the datatable is paginated we could always get back to a specific page in the list (if that list doesn’t change too often, that is). By that, we get to know our interface and feel in control while interacting with it.

      So, I would say, if your data table contains many many rows, using infinite scroll would make a great user experience only if you wrap it with a smart filtering and sorting mechanisms. When we don’t offer those mechanisms, we’re practically forcing users to scroll every time they want to find a specific row leading to a bad experience.

      Good luck!

      4
      • 22

        Sadly, I would argue that many implementations of “hybrid” Show/load more are downright horrible and generally overused. I find the feature often being a pain, since most webpages loads too little data for each iteration in combination with bloated elements for each row of data. Examples are online bookstores showing around 10 books per fold on a 24 inch monitor, or video-on-demand services also showing only 5-10 elements per fold. Going through the list it demands of the user to repeatable click Show more, wait, click, wait, click, wait. And then you click on an element to view details, go back and find yourself at the top.

        This might work fine in social media or other cases of casual browsing, but applying this in situations when the user is activly looking for something I feel have been a major step backward in regards of usability.

        0
  9. 23

    This was an excellent exploration of a very popular design trend. I think the “discovery” aspect of infinite scrolling is really useful on mobile apps, where the user’s mental model / goal is to discover new content rather than find an item & make a decision.

    Desktop sites that want users to interact with content should avoid infinite scrolling because it can indeed lead to a feeling of floating within the content.

    0
  10. 24

    What a coincidence, I just wrote yesterday about how the entire Gawker network shot itself in the foot with their recent redesign that horribly misuses infinite scrolling (http://www.catchmyfame.com/2013/05/02/how-gawker-sabotaged-their-own-network-with-a-horrible-new-layout/). IMO they turned a series of useful sites into something quite irritating to use.

    4
  11. 25

    Another issue with infinite scrolling is that neither the user’s device nor your server have infinite resources. I have noticed that on some infinite scrolling sites, especially those with many images, devices with limited resources such as an iPad can start slowing down because of the sheer number of assets it has loaded.

    6
  12. 26

    I’m so happy you covered this topic. It’s taking over like animated gifs did back in the day, and when used properly is a great tool, but so often its overall usability isn’t thought all the way through. Point in case…I hardly ever am on Pinterest for the exact reason mentioned above!

    1
  13. 27

    The problem with infinite scroll is, when you refresh the page. or you clicked on a link then went back to the same page you just lost where you were, and you have to click and click until you reach to that specific spot again. With paginations you are in control of navigation because you know which page to click on to get back to where you were.

    0
  14. 28

    Great article. I loved the examples and fresh insight into the ever-growing conversation around infinite scroll.

    I do, however, have a small issue with the interpretation of analytics suggesting that 94% of users are “satisfied” with the first set of results from Google. One could also argue that 94% are actually unsatisfied with pagination and therefore just stay put. The 11th item, then, is ignored not because users don’t want to see it, but because they don’t want to take the action to see it. In this case, infinite scroll is a welcome change since people are allowed to continue on their own–the onus to chunk information is on them and off the content designers. What do you think?

    Again, great writing on a difficult subject.

    0
    • 29

      I think you’re right and infinite scrolling does solve that click-barrier to content publishers. But, as shown through the article, infinite scroll exposes users to some major drawbacks when they don’t have that point where they can decide to stop scrolling, so it does not always worth it.

      In addition, I think that most of our searches end on the first page, as usually we find there what we were looking for. If we don’t, we become very skeptic that it would show up at a later page. That’s why we don’t feel motivated to click the next page button. There are times that we search for something that we can’t define perfectly, or not sure exactly what it is; then, we’re less expecting it to appear on the first page anyway, and come better motivated to check the second page also.

      Thanks a lot for the kind words, Jamie :)

      2
  15. 30

    Eh, you don’t think google’s pagination for search results has anything to do with ad impressions in the top? I’m not convinced that google is keeping it for the sake of usability, I would definitely be very careful before making such an important business decision as it would be for google to implement infinite scroll…

    0
    • 31

      I actually think, like you, that it’s not usability that leads Google’s arguments for staying with pagination for their searching interface. Business preferences must play a role in that decision, but also the Google brand.
      I stated in the article: “Google will probably maintain pagination because this pattern is quite symbolic for its brand”. Google preserves the long ‘Goooooogle’ pagination component at the bottom of their results page from practically day one and it’s a symbol we all got to know as part of their brand. Abandoning it, I think, would only occur if it would come in the way for its users while browsing the results.

      2
  16. 32

    Benjamin Milde

    May 3, 2013 12:02 pm

    Infinite scrolling has another weakness. The scrollwheel on my mouse is broken, so I got used to use scrollbars again. In Firefox if you want to scroll on an infinite page you always got jumped to a deeper part of the page, if you’re dragging the scrollbar, while the autoload hits. Luckily Chrome doesn’t behave like that. But no matter what, from an accessibility it’s quite bad to break the use of scrollbars for your users.

    0
  17. 33

    I have yet to have my “user experience” improved by infinite scroll in any way. Load-on-demand is another thing entirely, and I’m all for that. I can’t imagine a single circumstance, though, under which my apparent attempt to read to the bottom of the current page should be construed as entering a binding legal agreement to load another 10MB of stuff. ESPECIALLY when I’m mobile and paying through the nose for data or likely to be soft-capped. If I don’t ask for it, take it as read that I don’t want it yet. It’s not that I want to get to the footer (usually), but that I want to see the content I already had to scroll to before you added more crap so I could decide whether or not I wanted to load more. You’re not allowed to spend my money. Really — is that so hard to understand?

    0
  18. 34

    Delicious implemented infinite scrolling on their new site design some months ago. They made a feedback forum with the ability to give points to a specific user question/problem with the new design. And one of the most voted one was that they should make infinite scrolling optional. They didn’t. And every good argument for at least giving this new list view some good navigation patterns, where just ignored.

    In fact it’s not so bad at all, that this site has an infinite list. You just can’t navigate through it. At least they could make the tag-sidebar sticky.

    So I’m still using the previous version of it (thankfully they kept the old paginated design), but looking for an alternative…

    0
  19. 35

    Yes, infinite pagination has some cons but most of the problems you are describing can be solved from programmer’s point of view.

    > Analytics show that when users search for information on Google, only 6% advance to the second page. So, 94% of users are satisfied with receiving only 10 results, which suggests that users find Google’s ranking of results to be relevant.
    The conclusion could be wrong. The analytics could also mean that 94 % of users are just lazy.

    > Temptation – When you’re looking for that perfect search result and are tempted to continue scrolling into a wasteland of irrelevant results, time is wasted.

    Yes this is true, pagination works like laziness barrier. Maybe we could even remove pagination and show only the first ten results.

    > Optimism – Even more annoying is that scroll bars do not reflect the actual amount of data available.

    They can. You could set the element with data being loaded as you scroll some fixed height (which could be calculated, little harder for items with different heights though but it can be done). Of course this can’t be done on sites like Twitter or Facebook without utilising the ‘limited’ infinite scrolling from Google images.

    > Exhaustion – Infinite scrolling overwhelms users with stimuli.

    For some users pagination is the same thing, for most it is laziness barrier.

    > Pogosticking – Infinite scrolling often causes your position on the page to get lost.

    This can be solved quite easily. You can update URL using javascript’s pushState every virtual page you scroll.

    > Loss of Control – Infinite scrolling leaves you with the feeling that you might be missing out on information.

    > Distracting

    Essentially the same thing as Exhaustion.

    > Unreachable – Have you tried reaching the footer of Facebook lately?

    Like mentioned in other comments, position: fixed serves just right.

    > Not Exclusive

    Exclusive posts are on top. Add some red line bellow which there would be non-exclusive ones if you want to distinct them. But there is usually no point where you can say “OK, these were exclusive ones and now these are just some uninteresting junk.”
    Or you can have some slight white space between them, or different background or other ways of distinction.

    The additional point mentioned in discussion that infinite scrolling can be quite resource consuming can be solved by removing the posts from DOM when they disappear out of screen (for not having to redownload them when you scroll back, they could be stored into localstorage or something.)

    I quite like how infinite scrolling is implemented in steam.

    2
  20. 36

    When you have a slow computer the infinite scrolling becomes a performance nightmare.

    0
    • 37

      case in point: the new Awesome Flickr- justified pages and infinite scrolling- an absolute nightmare, it loads about 200 pics per page, by page two we see ‘fetching, fetching… after that just grey squares…. the footer is almost impossible to reach….new should be better- it isn’t.

      0
  21. 38

    Are there any downsides to seo(only concerned about google) in regard to infinite scrolling?

    0
    • 39

      Generally, infinite scrolling does require some special attention to not hurt SEO performance. It’s known that search engines are crawling the links that are found on the page; when pagination is used, it exposes all pages links to the crawler as those links are marked-up in the page’s HTML. The crawler just needs to crawl link by link, page by page, to index all of the available items.

      When infinite scrolling is used, it encapsulates the concept of multiple pages. As only part of the items are preloaded on an infinitely scrolling interface, only those will be crawled by the search engine, as this is the first and only batch of items the crawler finds and indexes.

      To overcome this downside of infinite scrolling, the best solution is to put a “Show All” link in your infinitely scrolling interface, that leads to a page which contains all items. While loading a page with all of the available items could take a while, for search engines it doesn’t matter, and if a link like available on your page’s mark-up, it will be crawled by the search engine crawler, by that allowing all items on your site to be crawled.

      Hope that helps!

      0
      • 40

        Actually, search engines do care how long it takes a page to load. Using an “All” page for all data contained in an infinite scroll page is a bad idea. Using replaceState() in combination so the URL’s change on the scroll as well, will create paginated pages with the same usability look and feel as the infinite scroll.

        0
  22. 41

    Designers/developers are our own worst enemy. Too many time we implement features just because it’s the latest cool thing to do, or we just want to make ourselves look good. Admittedly sometimes its because of demanding clients who want the latest bells and whistles and won’t listen to our (hopefully) better judgement.

    Whether its the proliferation of the latest visual design trend, like glossy buttons, ribbons or now flat elements, or whether its the latest technical solutions like responsive design or infinite scrolling, too often we implement these for the sake of it without giving proper consideration to the question of whether it’s truly necessary, and truly adding value to the interface and the experience. Or, are we just wanting to show off? “Yes, I can design and develop[ you a website that will be responsive down to every pixel change.”

    I encountered this myself this week when I had to pull myself up and justify to myself if a certain design element was “just because I can” or if it did fit the design goal.

    Personally, I loathe the rise of infinite scrolling and for all the reasons Yogev raises. It may have its place on Facebook, where you can be happy to scroll away the hours, but pretty much anywhere else, I find it disorienting and frustrating.

    The worst implementation of it is on non-infinite lists. You know there’s an end, but never know how far you are from it. It gamifies the searching process. Just like a civ game with the fogged out non-explored territory, you feel like, maybe just a little further and I’ll find what I want or reach the end.

    So please developers, if you must use infinite scrolling on finite lists, include some sort of relative progress indicator. Let me know that I am at result 99 of 300.

    Otherwise, we just end up frustrating wonder where the

    4
  23. 42

    Michael Meininger

    May 6, 2013 6:14 am

    I think another favorable effect of long scrolling pages is the benefit of reducing bounce rates- which will help Google ranking. User’s tend to stay on scrolling pages for a longer time, Google recognizes this and it can help with SEO purposes.

    1
  24. 43

    My big problem with infinite scroll is that it totally messes up spatial navigation.

    It just kills scrollbars.

    Even when they’re present, they don’t work naturally.

    I raised the issue and proposed some possible solutions on UX.SE: http://ux.stackexchange.com/questions/24813/with-infinite-scrolling-do-scrollbars-still-make-sense

    2
  25. 44

    Haha i just came here for the picture, used to love that show! Ok carry on guys. .

    0
  26. 45

    I’m interested in hearing about the _accessibility_ of infinite scrolling. How could we best alert the blind that things are changing around them when they Page Down? That more results are available when they get to the bottom of the initial display? Many using a screen reader will request a list of headlines or links on the page—how can we provide them with the right expectation of amount of content when they arrive?

    2
  27. 46

    i don’t mind continuous scrolling in the right circumstances; like a blog of curated images (ex. thefancy.com), as long as you please, PLEASE, include a “back to top” button! very tall sites without them bug me to no end.

    0
  28. 47

    In my country which the internet bandwidth under 500 kbps, load infinitive scroll website was actually hard. Especially those who had big-size image and you realize you have opened ten pages. I guess websites like buzzfeed, thefancy, and similar doesnt have many traffic from indonesia. So the pagination is clearly the bottom line

    0
  29. 48

    I’ve been silently complaining to nobody for a long time how much I hate infinite scroll because I can’t get to the stinking footer!

    Infinite scroll is cool and it definitely has its place within a website experience that’s made for it. Twitter is an ideal example where infinite scroll makes a lot of sense.
    …. but my hatred for it started with LinkedIn… I was trying to get to their developer tools and it was nothing sort of ninja-like clicking that got me to them. It’s almost like we just need a new footer experience for these infinitely scrolling sites.

    0
  30. 49

    here is an effective example of an infinite scroll and it’s responsive… wilmettefeed.com/.

    0
  31. 50

    It is possible that one of the reasons google and other sites don’t implement scrolling is that it kills your ad revenue? I noticed this more on sites that have image galleries and instead of using a gallery each new image refreshed the page.

    0
  32. 51

    This is a great write-up. You’ve put in great words the emotional highs and lows I was getting with infinite scrolling.

    Also, I’m wondering what your thoughts are on horizontal infinite scrolling? Typically we always see the vertical kind. Do you think much of what you described above also applies to the horizontal variety? My feeling is yes, but I ask because context matters so much in UX design, and I’d like to think the contexts in which horizontal and vertical scrolling should be used are quite different from each other. Would love to hear your thoughts!

    1
    • 52

      Horizontal scrolling is different in a few aspects in comparison with vertical scrolling. Humans are more comfortable with vertical scrolling as it resembles text reading and writing natural behavior.
      Because it disorients us to read text that its lines are too long, we feel more comfortable limiting line length, enlarging the total number of lines in a text. This requires us to scroll vertically to view long texts, and that’s why we expect vertical scroll to sometimes be a long journey.

      On the contrary, horizontally scrolling interfaces are strange for us, at first. When we scroll horizontally, we don’t expect the interface to be too wide, as it is less natural for us to scroll that way. When scrolling an interface horizontally, we don’t have the unreachable footer problem, of course, but most of the other drawbacks still exists: temptation, optimism and also the loss of scroll position is still very distracting for the user.

      There’s another drawback that arises when scrolling horizontally – when users scroll away horizontally, they feel like they are ‘leaving home’; referring to the original point they started the horizontal scroll as ‘home’, they will want to get back to it. Every step in the scroll would make users feel like they are getting further away from that ‘home’ position, making them uncomfortable. A very long horizontal scroll will make this feeling even worse.

      Sometimes, the use of a horizontal scroll can be useful to give more insights on a certain section in the vertical scroll (Windows Phone 8 is making a great use of this concept). As opposed to a short and specific horizontal scroll, I don’t find it as a good idea to have a never ending horizontal scroll, as it will tackle user experience with basically the same amount of drawbacks and even might expose a few more.

      A combination of vertical scrolling and some short peeks in the horizontal axis can be great for making interfaces beautiful, clean but still very thorough. You can see a great example for that kind of interface (and one of my favorite website designs) in the ONLINE DEPARTMENT website at: http://onlinedepartment.nl/

      0
  33. 53

    I have to say that this is a brilliant article!

    2
  34. 55

    Do users always want a never-ending stream of data?

    No, no and no!

    Not only “Pogosticking” but also impossible to bookmark such content.

    Which is crucial when the user needs to close the browser to continue his read/search, etc on another day, another machine.

    The most popular method of infinite scrolling (i/e used by blogging platforms) is a bad UX.

    1
  35. 56

    Our solution while creating mini-project – http://www.alio.lt/turgelis , was to let to load 20~ loads, and after allow user to move on to next page.

    0
    • 57

      Sounds better than the standard implementation of infinite scrolling. Still, I’d argue that the only acceptable use of infinite scrolling would be accompanied by a big OFF button so that those who don’t enjoy the tedium of scroll-load-scroll-load-scroll-load can use pagination and go where they want to directly.

      0
  36. 58

    Infinite scroll is one of the reasons i gave up on Google reader long ago.
    It made it almost completely useless.

    Unfortunately it spread its bad usability to other sites before it died from it.

    Back then it was the new cool thing, and suddenly every asshole had to have it on their site.

    I see this happening all the time, people see Google doing some half-assed experimental UI-thing, an immediately assumes its how it supposed to be done.
    Because Google are perfect….

    0
  37. 59

    The example-sites:

    http://wilmettefeed.com/
    http://unfold.no/

    …are really good examples of how NOT to do it.

    You often see sites like this break pretty bad if you visit them on a high-rez screen, or if you have your screen in portrait.

    On wilmettefeed the content fits my screen, so there are no scroll-bar and i would never have any idea scrolling is supposed to trigger anything.

    On unfold i just see a huge ocean of enormous pictures and shapes, with actual content, links navigation etc, barely discoverable.
    All the actual content could have fit many times over at once on my screen, but i have to scroll.. and scroll.. and scroll…

    Its always strange to visit a company that makes websites, that has a mess of a site themselves.

    Here is another good example of a scroll-site gone bad:
    http://www.elva.tv/

    It actually used to look fine, but a couple of years ago they redesigned it.
    Now, if you don’t re-size the window to exactly the same size as the developer used (i assume) , i t just looks like some broken parallax kaleidoscope.

    0
    • 60

      the intention of the infinite scroll is so that people spend lots of time browsing. seems to work in my opinion. if you need to sort and browse in other ways, you can go to the search page on wilmettefeed.com.

      0
  38. 61

    Ah, infinate scroll – would be amazing if I had infinate memory on my device and infinate patience. Mostly, infinate scrolling just tells me I need to find a different website to find data on. Only surpassed by hovering popups that are bigger than my mobile devices screen and always re-center themselves

    1
  39. 62

    Just for the record, I don’t like infinite scrolling at all.

    Having that said, you put up an awesome article here, and I really like the title “Getting to the bottom of this” – since it’s virtually IMPOSSIBLE with infinite scrolling.

    I agree with a comment above: infinite scrolling makes me go to another site.

    “Effects are nice but not a must”, as you put it!

    0
  40. 63

    I hate infinite scrolling. I think the only usable place is in pages like comments where you almost never need to click on a link.

    Every web designer’s rule should be this: if you need to click on the content being presented, don’t use infinite scrolling unless you can take the users back to exactly where he/she was.

    Google is doing it wrong with its image searches and now flickr does the same — extremely annoying to click on the image, then when you go back you’re back at the top of the page. Try it on flickr, search for flowers or something and try to browse through it.

    1
  41. 64

    Nicolás Bistolfi

    July 8, 2013 11:14 am

    Brilliant article! if someone needs the code on how to do the infinite scroll with ajax and jquery checkout this post.
    http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery/

    Bests!

    0
  42. 65

    Thank you, great article. The only other point I would add is to always have a fixed “Back to Top” link that scrolls with the page. It adds a sense of control for the user and makes it more effortless to get back up once the user decided that she looked through enough content.

    0
  43. 66

    LinkedIn fails too! Infinite scrolling on Company Pages can drive you crazy if you just want to read the About Section.

    0
  44. 67

    I would just like someone more clever than me to figure out a way to turn the damn thing off! PLEASE don’t hijack my browser to shove content down my gullet.

    Give the user valuable content and s/he will use pagination. It is and always has been that simple.

    This is the kind of ‘widgetry’ that silly business people think will actually make a difference in sales but it isn’t anything more than trendy gadgetry. Trendy gadgetry that make this user’s experience sufficiently troublesome to actually leave a site and never come back.

    0
    • 68

      Although I think we may be in the minority I absolutely share your frustration. There is no scenario in which infinite scrolling is a good idea as far as I’m concerned.

      0
  45. 69

    Erik van der Molen

    September 17, 2013 4:11 pm

    I just recently had a client demand that there be a filter page void of product images prior to a product results page, so that the user is not overwhelmed with the amount of product. I was wondering if there was any thought on providing an intermediary page of filters a user can select before they see product on an infinite scroll like screen? (Note the filters are also available on the product results page)

    Thanks for any thoughts on the matter.

    0
  46. 70

    Really interesting article and comments from a lot of people who are obviously very knowledgeable regarding this field! What I would like some help with is whether or not on personal websites, consumers are willing to scroll down a long page (not text heavy – very visual) or whether they would rather click onto another tab, or page to receive the information?

    Personally, I feel that it depends on the continuity of the information and generally speaking I don’t mind it if the content is visual and making me want to continue scrolling.

    Would be interested in what the experts say!!

    0
  47. 71

    Yogev… wow! amazing post and amazing research behind it..
    just noted 6 ideas for the project I’m working on right now.
    You should get a raise at your company :)

    0
  48. 72

    I absolutely detest infinite scrolling in EVERY context. Webpages today have so much irrelevant material that it can be difficult to find what you are after. A solution to this is to do a search (Ctrl+F) to try to narrow down exactly what you are looking for. However, you can only search what is on the page. With infinite scrolling that may be only a fraction of a percent of the content that the page holds because most of it has not yet loaded.

    Infinite scrolling is not mouse-friendly. When using the scroll bar, the bar is hijacked once you get to the bottom of the page. If using the mouse wheel, you have to scroll it down *again and again* until you reach the bottom of the page. If you are looking for a specific item that is a significant way in to a large list, it will take forever to find it. Consider this example: you visit an infinite scrolling webpage with thumbnails that load 20 at a time. After spending 10 minutes on the webpage, you see a picture you like. Later on you want to get back to that picture, so you go back to the webpage spend another 10 minutes playing the scroll… load… scroll… load… scroll… load… scroll… load… scroll… load… game to get back to the picture. If the page has a search feature that helps, but not all pages do.

    Even on mobile devices it is not practical. Scrolling down with your finger is fine but it doesn’t load in real time as you scroll. You have to reach the bottom, wait, scroll, wait etc. How could this possibly benefit anyone? At least when pages are broken up into a list of items, you can choose which page you want to go to. For example, take the same thumbnail gallery with 20 items per page. If you want to go straight to page 384 you usually can, and don’t have to sift through all the garbage you don’t care about on the way there. It’s almost as if someone took the old method and said “Hey, is there a way we could make this take longer and require more constant action on the user’s part?”. Horrible idea.

    Sorry for the rant. I was just on deviantart browsing for quite some time and I saw a picture I thought was really good – then I accidentally closed the tab. Now I’ll never find it because I’m not going to spend another 45 minutes scrolling to the bottom until it shows up again. Complete user error on my part, I have nobody to blame but myself, however I don’t think that user error should be quite so punishing.

    0
  49. 73

    annoyed by youtube

    January 22, 2014 7:15 pm

    YouTube is a big offender because you might want to find a video on someone’s channel because you can’t search, but you need to get to the middle of a 1000+ video list which takes a long time. (“Pogosticking” makes it even worse!) A “skip to #” function would solve this problem, and make infinite scrolling MUCH better than it is without. Personally, however, I think YouTube was better when it had pagination on channels.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top