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

89 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;
      }

  3. A big thank you for your post. Great.

  4. I am so grateful for your blog article.Really looking forward to read more. Really Cool.

  5. aprovados says:

    Great article. Cool.

  6. Great blog post.Really thank you!

  7. Enki says:

    Very good article post. Want more.

  8. Really enjoyed this article.Really looking forward to read more. Much obliged.

  9. ainics says:

    “I like the valuable info you provide in your articles. I will bookmark your weblog and check again here frequently. I’m quite certain I’ll learn many new stuff right here! Best of luck for the next!”

  10. Sexo says:

    Thank you ever so for you blog.Much thanks again.

  11. right here says:

    Thanks again for the post.Much thanks again. Awesome.

  12. A big thank you for your blog.Really thank you!

  13. I really like and appreciate your post. Really Cool.

  14. download says:

    Major thankies for the blog post.Much thanks again. Really Cool.

  15. Looking forward to reading more. Great blog.Much thanks again. Awesome.

  16. Really enjoyed this article.Much thanks again. Fantastic.

  17. I value the article.Much thanks again. Fantastic.

  18. Thanks for sharing, this is a fantastic blog.Much thanks again. Keep writing.

  19. Dog Coats says:

    “Since the admin of this website is working, no hesitation very quickly it will be famous, due to its quality contents.”

  20. Hey, thanks for the post.Really thank you! Really Great.

  21. “My brother recommended I might like this blog. He was entirely right. This post actually made my day. You cann’t imagine just how much time I had spent for this info! Thanks!”

  22. Very informative post.Really looking forward to read more. Keep writing.

  23. Great blog.Thanks Again. Much obliged.

  24. Thanks again for the blog post.Really looking forward to read more. Cool.

  25. Very informative article post.Much thanks again. Will read on…

  26. “I think this is a real great blog.Really looking forward to read more. Will read on…”

  27. “I really enjoy the blog.Really thank you! Keep writing.”

  28. Jeromy Wax says:

    You sure know what you’re talking about. Everyone is going to soon be visiting your site.

  29. Very neat post.Much thanks again. Fantastic.

  30. That sure is one pretty site you have there. Can I ask you a very simple question? What kind of fertilizer do you use to make it grow so wonderfully?

  31. Great post.Really thank you! Will read on…

  32. “I am so grateful for your blog article.Thanks Again. Will read on…”

  33. “I have realized that car insurance corporations know the vehicles which are liable to accidents along with other risks. In addition they know what type of cars are susceptible to higher risk plus the higher risk they’ve got the higher a premium charge. Understanding the very simple basics with car insurance just might help you choose the right types of insurance policy that will take care of your needs in case you get involved in an accident. Appreciate your sharing a ideas in your blog.”

  34. Great, thanks for sharing this article post.Really thank you! Fantastic.

  35. Thanks so much for the article. Keep writing.

  36. Appreciate you sharing, great article.Much thanks again. Great.

  37. hot cock says:

    wow, awesome article.Really thank you! Much obliged.

  38. Really appreciate you sharing this post. Much obliged.

  39. A big thank you for your article. Great.

  40. A big thank you for your article post.Really thank you! Great.

  41. This is one awesome article post.Really thank you! Cool.

  42. “Greetings! Very helpful advice within this article! It’s the little changes that will make the most significant changes. Many thanks for sharing!”

  43. “Hi! I know this is somewhat off topic but I was wondering which blog platform are you using for this website? I’m getting sick and tired of WordPress because I’ve had issues with hackers and I’m looking at options for another platform. I would be fantastic if you could point me in the direction of a good platform.”

  44. Say, you got a nice blog. Much obliged.

  45. Major thankies for the blog post.Really looking forward to read more. Cool.

  46. I appreciate you sharing this blog article.Much thanks again. Fantastic.

  47. I value the article.Much thanks again. Cool.

  48. Thank you for your article.Really thank you! Cool.

Leave a Reply

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