Design and UX September 18, 2020

UX: Infinite Scrolling vs. Pagination [summary]

Hieu Nguyen (Jack) @hieunc

A great post about Scrolling UX: Infinite Scrolling vs. Pagination. Here is the summary:

Infinite Scrolling is great for content discovery

Pros:

  • For user engagement, content discovery
  • Easier and intuitive on mobile

Cons:

  • Feel slow when loading
  • Can't use position restoration
  • Can't have a footer

@hatkyinc: preload content before reached the end to avoid users waiting
@Danbars: Pinterest update its URL when scrolling for position restoration

Pagination is great when searching for specific content

Pros:

  • Give expectation, number of pages
  • Give a sense of control, jump between pages

Cons:

  • Cost extra action, navigate to the button

Additional

@Prime: Consider having a "Load more" button


Source: UX: Infinite Scrolling vs. Pagination by Nick Babich - May, 2016

  1. 4

    I think the best solution has been missed completely here: Load More

    It's the perfect balance between pagination and infinite scrolling - and it allows you to have a footer.

    1. 2

      Definetely something worth considering. I actually use it in my current project :D

  2. 2

    Can't bookmark position for later

    Well, you can update the url as the user scrolls. This will allow you to even use the browser navigation keys to go back to the same place after drilling into some item. I've seen this done before.

    Also take a look at Pinterest. I think they nailed it.

    1. 1

      I don't use Pinterest often so don't realize it.
      But that's a good solution 👏!

  3. 1

    Okay here are some thoughts on using page based pagination;

    • When using live data I would heavily discourage page based pagination. When the influx of new content is just high enough you could see the same data on new pages.
    • When the user is required to use pagination to find the data they need there's something inherently wrong with your UX. It's most certainly a sign that users miss a few options to narrow the number of results.

    To tackle arguments against infinite scrolling;

    Feel slow when loading

    This totally depends on the implementation, and when the new content is loaded in. Initially I load 40 items, and start loading the next 20 after the user has seen the first 20. This way there is almost always content. That is, unless the user continuously scrolls down. For that, see my point about UX and missing search functionality.

    Can't use position restoration

    This isn't a problem with live data as data is continuously becoming outdated. A search might need to be saved however. And when individual items can be bookmarked, most of the issues are gone. For further improvements one can fall back to cursor based pagination and store the cursors of the first and last elements, and restore to that. (See also my article about cursor based pagination.)

    Can't have a footer

    I cannot imagine what important features in a web app need to be put within a footer.

    Personally I almost always go with infinite scrolling. This all however comes at a cost with regard to implementation time as infinite scrolling is much more difficult to properly implement.

    To give an indication of some of the work going on behind an infinite scroll implementation;

    1. 1

      From the comment, you prefer infinite scrolling rather than page pagination.

      I'd say it depends on what users prefer (there is no wrong answer). For example, we built a blogging platform (like Medium.com). We implemented infinite scrolling. And there were more users complaining about it.

      I spent sometimes to learn more about users. Turn out, most of websites that they visit regularly don't use infinite scrolling. Not what they would expect, so they dislike it.

      If you think they're old school, I couldn't agree more.

      When the user is required to use pagination ... wrong with your UX

      In the original post, the author did mention popular search engines use pagination. Rarely, but we did wander to the 2nd, 3rd page sometimes. Especially when it's something not common. i.e finding resources to build a database.

      Seem like an AB testing would be great to have a better understanding

  4. 1

    lol

    Paged was decent when things are relatively static... the content of the pages shouldn't change frequently, like not within the time I'm paging.... Most implemetations of paging suck anyway... so paging is decent on small blogs, it sucks for community sites...

    Feel slow when loading

    This is just a bad implementation, not part of the desing pattern, you should preload the next content in an apporpriate time... many platforms get it right..

    Can't bookmark position for later

    This is rarely used, and is bad if not static anyway...

    Can't have a footer

    Remind me what's the stats on people looking and clicking on the footer? we all know it's just the trash ground, where do I put boring legal and corprate stuff? right the footer... (I've seen places with infinate scrolling + footer.. youtube commnet have some weird combo IIRC)

    1. 1

      You’re right incase the site is static. Something like IH, Facebook, ect. can’t be static

      This is just a bad implementation

      It is how users feel rather than the actual performance.

      For example: It’s easier to accept 5s loading when you click to a new page. Rather than scroll down and wait 4 seconds

      This is rarely used, and is bad if not static anyway

      I’m scrolling 9GAG everyday. When accidentally rotate the phone, it scroll back the top. I’ll more likely leave the page than scroll to the previous position

      I've seen places with infinate scrolling + footer.

      Infinite scrolling with footer is the worst 😁

      1. 1

        For example: It’s easier to accept 5s loading when you click to a new page. Rather than scroll down and wait 4 seconds

        As I said this is a bad implementation.
        Lets say you know loading the next scroll chunk takes 4 secounds on for the 10 worst percentile
        You should have 6sec of content on first load
        ones someone scanned 2 sec of content you should async load the next chunk of 4 sec
        So when the user gets there it's already in the browser and is transparent.
        (not saying it's easy or common to do right, but I don't remeber the last time I scrolled fb and seen a loading... unless I explicity try to by pushing it to the limit with like clicking "end"... (not normal usage, no reason to compain...)

        I’m scrolling 9GAG everyday. When accidentally rotate the phone, it scroll back the top. I’ll more likely leave the page than scroll to the previous position

        Don't know the site, but things that scroll you back, is a bug IMHO.
        User viewport and history should be kept... only recently noticed chrome history across devices.... if they can let me come back to where I was across multiple devices...
        Some platform are pro random content, like scrolling youtube home or fb, it's kinda meant for you to not go back only fwd, it's exteme in fb where it might be impossible to go back if you don't remeber an important detail like a poster...
        in youtube you have the history to go back if you wish which I like
        but it might be ok if it's content discovery/amousment centered...
        the more core content (long term memory?) it is the more people are attached ..

        Infinite scrolling with footer is the worst 😁

        It's not a good design, but when looking for where to place trash at... :shrug:

        1. 1

          As I said this is a bad implementation.

          You’re right. I forgot about preloading content before users near at the end

          Don't know the site, but things that scroll you back, is a bug IMHO.

          Maybe it’s a bug, but I still experience often

          IH is still relatively static

          What you means is it doesn’t refresh content every minutes or hours.

          It’d be a tough job to enable membership on a static site. And eventually growth the frequent of refreshing top content

          P/s: I just use IH as an example of website that can’t be static

          1. 2

            there are dynamic to static conversions btw for the technicalities of a static site... since it's mostly a fwd rolling transaction on IH...

            There are other paging designs that are based off of these concepts for example based on a date... (IH has something like that for top posts.. "of the week/month..." and you page dates and old things almost never "update" - gets deleted, and they are never added into..)

            Paging based on a date, or last id is stable so it's bookmarkable if that's what you care about and you can safely continue to find it all...
            For search engines feeds like sitemaps are offered ... RSS readers I think used to have more accessibility for "content I didn't read".. a bit like an email system.. (I only say used to since I haven't used one in a while and I belive popularity has gone down, both from sites offering the options and the user options, well google closed a big one..)

            1. 1

              I also picked the wrong word about "bookmark position". The better word is "position restoration" — when we scroll through a long list of content, click on a link, then come back to the list exactly where it was.

              Though, I appreciate the explanation!

          2. 2

            I didn't pick the right word, when I said "relatively static" I didn't mean "staticly served site" (like github pages vs wordpress) I meant a "site with a relatively low frequency of updates", which is relative, so posts per minute are lower than the speed of me reading them I guess... (unlike big social platforms like fb, youtube, insta...)
            So a really good example is a blog that only posts a few times a week/month, that has a higher usefulness of paging, you mentioned bookmarking a page I was at, if I'd try to bookmark a page from the /latest in IH and come back the next day it's already worthless.. (different relative interpertation)

            1. 1

              I understand it now and totally agree!

        2. 1

          You’re right incase the site is static. Something like IH, Facebook, ect. can’t be static

          IH is still relatively static, if I page at worst 3 posts reapear on page fwd.
          what's going to happen when I page fwd and still get the same post cause 20 new ones were added already?...

          IH doesn't have good usuability for mosts posts.
          There are few views, it's bad for just browsing, many posts get lost, check out how many posts have 0 comments, and probably some have 0 or close to 0 views because of timing.
          It's getting worse but not yet a major issue I guess :shrug:
          Maybe improvements to groups would push back the core issue further back ..
          post discovery in general is pretty bad, but there is a lot of high quality content that masks the issues...

Recommended Posts