Gilles Vandenoostende

Hi, I'm Gilles Vandenoostende - designer, illustrator and digital busybody with a love of language, based in Ghent, Belgium.

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.

No Comments

Back to top