“Load More” is not the Answer
How do you display a list with a huge number of items? Easy: just paginate – split your list into several pages and let the user click through them one by one. Google does it with their search results, every forum software in existence splits a thread after N posts, my Blog only shows 8 entries at most. It's a solved problem.
Some years ago Microsoft had a different idea with MSN Search (now Bing): Infinite Scroll. If you do an image search on Bing and scroll down far enough, more results will be loaded on the fly and appended to the current page. There's no need to click a Next Page link. I don't know if they were the first to do it, but they certainly were the first I remember.
Today, many sites are using Infinite Scroll or the slightly less ambitious Load More button. And it constantly annoys me. It's not so much that most implementations are done very carelessly, but that the idea is inherently broken and really can't be done right.
Take Twitter for example. Say I'm writing a Blog post about how John Gruber was all the rage about X a few days ago. Naturally, I want to have a link to his tweets from said day in my post, so I visit twitter.com/gruber, click the more button two or three times, till I see those tweets and… now what? How do I link to this page? Do I have to link directly to twitter.com/gruber and tell my readers to click more a couple of times? How often? Well, it of course depends on how chatty he's been since I posted my story.
You might say that this issue could be easily fixed by utilizing the Fragment Part of the URL. So after I click more the URL would change to twitter.com/gruber#20, twitter.com/gruber#40, twitter.com/gruber#60 and so on (or better yet, counting from the first tweet). Now, what if I'd want to link to Grubers first 20 tweets? The URL would be twitter.com/gruber#8900 and the page would load nearly 9000 tweets? I don't think that's a good idea.
The non-link-ability is not the only problem of this technique: How do I jump to the end of the list? Or generally, how do I jump to a specific item (e.g. the first unread post in a forum thread)? What if the page becomes so long that my browser struggles to keep up?
It ultimately boils down to what we gain by using a Load More button instead of Next Page. And the only answer I can think of, is a few milliseconds of time I'd otherwise would've spent waiting for a whole new page to load. I also believe that appending items to a page is even more confusing for the user than going to a new page. After you've clicked more a few times, the list becomes so long that you easily get lost in it.
Pagination might not be as cool as all the AJAX stuff, but for navigating a list of “infinite” size I really can't think of a better approach. It doesn't have to be the old school pagination with a Next Page link though – you could build something that utilizes AJAX, caches the next page in advance, makes use of your mouse' scroll wheel etc. Ultimately it just has to be something that says “you are viewing items 340–380 of 920”: Providing a fixed sized, moving window into a set of items, instead of the fixed position, growing window that is Load More.
8 Comments:
I think you're right, but all the problems which appear with "infinite"-scrolling are maybe just a cause of the used technique. Maybe it's just a matter of time when there will be a better solution, combining ajax-load with pagination. I could imagine a pagination-navigation ([1][2][3] and so on) and by clicking on "More items" or by scrolling down, you load the content from the next page and add it to the current content. For usability, you can mark the loaded pages in the pagination navigation. By clicking on "More items" you'll get the next page etc.
And by clicking directly on a page, for example [3], you will only get the content of the third page, whereby there are buttons for "Previous content" and "More Items" or so, for loading content from previous or next pages via ajax.
Maybe I'm gonna try this idea, because I'm currently working on a project where I load images automatically via ajay by scrolling down.
Sorry for my bad english.
But this wouldn't solve the problem at all, because of the ordering of the content.
If you want to link to his tweets from a day ago, and you link your readers to page 2 — well, give it another day or two, and the tweets you were talking about are now on page 3. Pagination is just as bad for linking to a group or items as multiple clicks of the "more" button.
Just do the page numbering the other way round and you're fine.
And yes, I realize I have this problem here in my blog, too :)
If the fundamental problem is losing the navigability of the set of published items, id-wise pagination shouldn't be that big a deal to create, and allow for the range of "by id, from newest, from oldest" navigation that makes sense for an ordered set, and encode it to #. I don't see what would be wrong with such a solution (or better yet, a clean url solution /gruber/42345/to/42345/, /gruber/newest/10, so forth. Then, allow the user to advance the starting point of the display instead of just growing the ending point, and you have a fully general moving window.
I'm somewhere in-between on this issue. I think pagination is a good straight-forward way of doing lists, and everyone knows how to use it and doesn't get confused, but I also hate having to reload each time you switch page, not to mention that on large lists you can't jump directly to a specific page (on some pagination layouts). I prefer to mix pagination with ajax so that only the list is loaded when you switch the listing page, not the whole page, and I also like having a small text input to enter the number of the page for jumping right to it if I want to. Also if we're talking about static stuff like comments, server-caching each page html is a really nice way to light-speed-up your listing page.
The real solution is to use permalinks.
The best things is that Twitter already has them: just click on the date below the relavent tweet and you'd get it.
How about twitter.com/gruber#1-20, twitter.com/gruber#21-40 using pagination and twitter.com/gruber#1-40, twitter.com/gruber#21-60 with "more" button? Just a thought.
I browse the web with JavaScript disabled (NoSrcipt for Firefox) mostly for safety reason,
I like see clean web pages, ie. pure HTML, no ADS no tracking or bandwidth wasting or other fancy stuffs because webpages got to be fully operational without JS, JS is meant to add little usability to web pages.