March 26, 2009

New Design Patterns for the Web: The Infinite Page

I really dislike paging on websites. I hate it when articles are split up into several pages, but I also dislike having to click «next» again and again when going through the list of new articles on sites like Kotaku.1

Pagination on Kotaku

Working on a site similar to Kotaku,2 I started thinking about this. Once the user has scrolled all the way down on your homepage, chances are he or she wants to see additional articles.3 So why not simply watch the scroll event and dynamically load more articles into the same page once the user gets anywhere near the bottom of the page?

Dynamic Loading

This is pretty simple to achieve using JavaScript and Ajax, and I’d love to see this on more sites. It makes browsing through articles so much more enjoyable.

For the iPhone version of the site, I’ve replaced the automatic dynamic loading with a huge link at the bottom of the page which loads additional articles into the same page. iPhone users may pay by the amount of data they receive, so I’d rather not load stuff automatically.

Dynamic Loading on iPhone

Going with a link which loads data into the same screen rather than loading a new screen has the additional advantage of loading less data.

Update

Wolf tells me that this design pattern is called «endless scrolling» or «infinite scrolling» and that Google Reader uses it. Of course, I use Google Reader every day, so that may be where I got the idea :-)

Martin Kühl points out that Aza Raskin has written a great article on this topic.

  1. Or on this blog :-) back

  2. Which is in German, so please excuse the German in the screenshots. «Mehr Artikel laden» means «Loading more articles,» and «mehr laden…» means «Load more.» Yeah, the same German verb can mean either «loading» (as in what the page is currently doing) or «load» (as in a command) :-) back

  3. By the way, I don’t claim to have invented this, but I also don’t think I’ve seen it anywhere else. It’s in Google Reader. back

If you require a short url to link to this article, please use http://ignco.de/86

designed_for_use_small

If you liked this, you'll love my book. It's called Designed for Use: Create Usable Interfaces for Applications and the Web. In it, I cover the whole design process, from user research and sketching to usability tests and A/B testing. But I don't just explain techniques, I also talk about concepts like discoverability, when and how to use animations, what we can learn from video games, and much more.

You can find out more about it (and order it directly, printed or as a DRM-free ebook) on the Pragmatic Programmers website.