Deeplinking Infinitely Scrolled Pages

Question

I'm creating a infinitely scrolled page that recursively loads and append the next page's content into the current page. I think the browsing experience can be great and immersive but the current method is not without usability drawbacks.

Incomplete progressive enhancement. It is always good to support the back button and provide deep linking when using Ajax. The current implementations of infinite scroll does not support this. There is no way a state can be bookmarked.

Some ideas on improving the UX of infinite scroll. Need opinion.

1. Change the URL hash with each load, e.g. /!#/2 -> /!#/3
2. Clicking the back button should scroll the page upwards. Clicking forward button should scroll it down.
3. Accessing a deep link should behave like it was before Ajax. Going to and also starting at page 3 should show only page 3 content and not page 2 and 1, since the user is not asking for them.
4. There should still be a way for him go to page 2 and 1, like if it was regular pagination. Since page 3 is loaded with scrollTop at 0, the scroll up event is not useful. For this we might still need a clickable link.
5. We need to check if the requested page number is greater than the current because we should not loaded page 2's content at the end of page 3.

What do you guys think?

Answer 1

Interesting question. I would suggest changing the URL hash in the form of #!/from/123/to/456, and increase the to ids as page loads.

Whether you are using hash or History API rewrite to modify URL, in UX sense, URL always represent the location of current content. For example, user will expect a bookmark, hitting reload, or copying the URL to other computer and click Go, will return the same page.

The only way for your infinite scrolling page to complete the logic of URL is the URL hash I suggested above. Otherwise just leave it; Twitter doesn't update URL hash on their home page.