Fixing the UX of Infinite Scroll
- published:
- 2013.04.15
- topics:
- javascript
- speaking
Infinite Scroll aka Endless Scroll sucks. It's that feature where you can scroll down forever on Twitter or Facebook and more content keeps loading. It's a brilliant UI idea in theory, but it creates all sorts of obnoxious problems for the user in practice... like breaking the Back button, and creating mortal dread around clicking things for fear of losing your spot...
I presented a session at MinneWebCon 2013 titled "Fixing the UX of Infinite Scroll" (view the slides). In the presentation, I think through the User Experience issues we need to address, and I dive into the HTML5, CSS, and JavaScript features we can use to code up a better Infinite Scroll... one where you don't lose your place when there is an error or when you click a link or your Back button... one where you can skip back in time fast without having to scroll forever... an infinite scroll solution that embraces the web and how browsers work!
I integrated my Infinite Scroll fix ideas into a basic install of WordPress. View the Proof of Concept Demo. It's a little rough around the edges, but a solid demo nonetheless. The fix largely comes down to using scroll events and the HTML5 History API.
Here's my main.js file with patch code for jQuery/WordPress Infinite Scroll.