UI Patterns for scrolling

Some design patterns I find that go well together with scrolling:

1. Dynamically Fixed UI - like the sidebar on this very blog, for instance. Once a user scrolls past the top-most point of a certain UI element (like a menu or table-header) said element becomes ‘sticky’ and becomes fixed on screen. Now that mobile devices are beginning to support CSS’ position:fixed style, this could become a more common sight on sites.
2. Animated Anchors - i.e. those links you click on and that scroll the page for you. Really handy because it not only takes the user to wherever he or she wanted to go, but at the same time also educates them on the layout of your site, and their position within it.
3. Infinite Scroll - i.e. that AJAX trick to load in fresh content at the bottom of the page whenever a user scrolls past a certain point. For immersion, this cannot be beaten; If done right users can just lose themselves in the content before realizing just how long they’ve been reading the same page.

   The downside with this is that when a user clicks a link on the page, and then hits the back button, he or she will be thrown back to the top of the page. I can imagine a suitable workaround to this involving a just-in-time history push-state using History.js, so that when the user returns, they’re only taken back to the last page-fragment that was loaded.

The rising popularity of tablets and other touch-screen devices will only serve to increase the need for good scrolling user experiences.

Scrolling is the new click ∞

Anthony, on UX Movement:

Many years ago, clicking was the simple answer to this question. The general thought was that if you made your page too long, users would only view and read the top half and glance over or ignore the bottom half. Today, things have changed. Many users do scroll to the end of the page and have no problem doing so. Scrolling has become a second-nature and clicking a chore. As user behavior changes over time, designers need to take that into account in their designs.

Anecdotally, I can vouch for this – show me an over-paginated page or other form of UI and I’m far less likely to explore your content than when it’s all organized on a single page. And with non-accurate input methods, such as a touch-screen, clicking can be an even bigger chore, if the site isn’t optimized for touch.