Invention: Infinite Scroll + Pagination Hybrid UI

On sites like Twitter and some Tumblr blogs, instead of having to click next page to load new content you just scroll down and when you reach the bottom, the next page automatically loads by AJAX and appends itself to the bottom, meaning you can just keep scrolling down and have new content load. I really like this, it doesn’t interrupt flow but the draw back is that I can’t tell where exactly I am which emotionally worries me. I also can’t skip forward and it really sucks for sites with lots of content (thousands, even just hundreds of images and videos on one page can cause massive slow downs and crash the browser). So here’s a hybrid solution that still separates content into pages and loads them when you scroll down but also allows you to skip around.

(These mockups feature “pages” that only have 1 paragraph, in a real world situation you’d obviously have a full page’s worth)

Page links are inserted between the content that’s been loaded and appended.

This solves multiple problems:

  • Separates content into pages so users know how “far” they are into your site and can find his/her way back to their favorite content by remembering the “page” they were last on.
  • No more linear flow, users can skip pages if they know the content they’re looking for is much further in.
  • If you skip pages they won’t load, saving time and bandwidth.
  • If you did skip pages, you can go back and load them by clicking on their page number.

Here’s a full mockup of what it would look like if every page had only 1 paragraph on it:

Alternate, more logical, style with page numbers underneath content instead of above:

 

Here’s some various styles:

Backstory:
Came up with this when I was browsing a Tumblr blog with infinite scrolling set up

5 Comments

  1. josscrowcroft says:

    Great idea! Might work on implementing this, will let you know if I do!

  2. adardesign says:

    Thanks, Great idea! One question though, Do you have any UX solutions if a user simply wants to scroll to the footer (not to load more content)?Should we have a cancel button?if so where should it be placed?Thanks again.   

    • Yeah you can’t reach any of the links in the footer until you’re on the last page. It’s bothered me for a long time.

      There IS a solution. Make the Footer very small and make it’s position: FIXED with z-index:2 or higher so that it’s on top of the content and ALWAYS at the bottom /or/ avoid footers and put info into a sidebar.

    • JCM says:

      Something like this should work to the footer annoyance:

      #wrp {
          margin-bottom: 60px;
      }
      #footer {
          height: 60px;
          position: fixed;
          bottom: 0px;
          left: 0px;
      }

Leave a Reply

Your email address will not be published. Required fields are marked *