With infinite scrolling/pagination, how should I handle the user loading page 2, but there being new content on page 1?

Question

Say we're looking at a website like Reddit or Facebook where there's infinite scrolling involved, and things aren't necessarily sorted by time, but are sorted by some relevance factor that decides the order of the posts on the pages.

So what if the user loads page two, but there's new content on the first page?

Say they load the first page, walk away for an hour, and then scroll some triggering the load of page two. Now there's a ton of new stuff on the first page compared to what there was an hour ago, but the user is requesting the second page.

How should I handle that? Just present page 2 and assume most users would refresh to get page 1? Insert new items at the top of page 2? Reload page one as well each time?

My instinct is option 1 as if a user scrolled up they'd probably still expect the same items that were there before to still be there, just in terms of creating a consistent experience.

Answer 1

The simplest way would be to let the user know that new content is available. These can be found in many different applications that dynamically load new content. For example say, the user has scrolled down a couple of times in an application with infinite scroll you can do something like this,

For paginated applications, consider not updating content in real time but allow the user to update content via an action that loads new content into the viewport. something like..

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

Follow like what FB does, whenever there is new entries in the timeline, display a small indicator (button) that shows up saying "New Stories", when pressed it will take the user to the top of the page.

Yes, in terms of continuity, the old entries still should be displayed below the new entries. This way, user will still have an image map in his/her mind.