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:
Came up with this when I was browsing a Tumblr blog with infinite scrolling set up