Regular pagination vs. infinite scroll

Question

I'm currently making a dating site, my choice for pagination is between the traditional:

[<< Prev] [1] [2] [3] [Next >>]

vs

[ Load More ]

The 2nd is the "load more" bar or button that is on a couple of popular sites now like twitter and facebook. Either way the results will be delivered via ajax without page reload.

Being a developer and not a ux person I was wondering what you guys think would be more appropriate and user friendly for a site like this? Basically there is a search form with lots of filters at the top of the page and when the user chooses their options and hits submit the results and pagination will appear on the same page underneath the form.

If I do go with the load more type pagination, would it be better to make it auto loading (i.e. when the user reaches the bottom of the page more results load without them having to do anything) or load more only on click?

I personally find auto loading annoying but I have no idea how the majority of audiences feel about it.

Answer 1

[ Load More ] is certainly more "friendly" than a set pagination links, but there is no indication of how much more data there is that could be viewed, unless you add something else that gives that information - assuming it's available. If you don't know the total number of matches (thanks @Erics) then [ Load More ] is ideal.

So, is it important for the user to know that there are 3 (or 5) pages of possible matches or will they be happy to keep clicking [ Load More ] until they either a) find a match or b) get bored?

I think whether you use auto loading is a personal preference. Personally I find it annoying as I expect to scroll to the bottom of the page and see an indication of how much data there is still left to view.

Answer 2

You should consider the problem the user might try to solve when he is looking at your list. Is he browsing like we do in Twitter or Facebook streams, then use "load more". Is he trying to find certain information he might want to revisit again later you should go for pagination - for reasons already pointed out by all those smart people here. :-)

Answer 3

Either way the results will be delivered via ajax without page reload.

One thing to consider is that a user may be inclined to user their back button if you go the pagination route. Something like "Hey, I should go look at that person on page 2 again..." If the results are added via ajax the browsers back button isn't automatically going to take them to the previous results.

**

http://danwin.com/2013/01/infinite-scroll-fail-etsy/

Found this just a couple days after posting my answer. Interesting read on why infinite scroll failed at etsy. I haven't checked out the presentation/slides yet but plan to.

Answer 4

I think of it this way:

• If you want for users to see more and more pages non-stop you should use auto-pagination (not just appending at the end of the content after manual clicking). You can set threshold of showed pages, limit to unviewed results or give user corresponding setting for this mode to prevent informational overload on their side. Don't use manual [Load More] button before reaching that threshold n-th time because it gives this method shortcomings of classic pagination without giving additional benefits. You can do periodical history.pushState so user can continue from the last results viewed if page gets slow or crashes.
• If you want people to concentrate their attention only on a several first pages (some kind of promotion system in place) or it's natural result of the search algorithm (later results are less and less relevant), offload server or have simple possibility to return to a certain subgroup of results (like around certain dates) it's time for classic pagination.

In any case nobody prevents you from adding personalized option for users to chose what they like more and even use (temporary) A/B testing with its default setting to see what people really like in your case.

Answer 5

One thing I don't think many people think about with infinite scroll is it essentially makes any UI elements you have in the footer area unreachable.

If you have a fat footer with useful links across many/all pages of your site, an infinite scroll will create a jarring experience. The user scrolls to the bottom, sees the footer for a second or two, and then sees the new result set push the footer down out of view.

It turns into a game of hide and seek and for some users that can become very frustrating.

Answer 6

I have the same opinion as you: I am not fond of infinite scroll. Tough, with time, this might change.

In his blog post The End of Pagination, Jeff Atwood makes the point that

Above all else, you should strive to make pagination irrelevant because the user never has to look at more than a few items to find what they need

This satement does not quite holds in the context of online dating where the user is likely to go back and forth quite a bit with the search results.

So my advice would be: whatever choice you end up with, make it easy to the user to browse a profile page, go back to the results page, browse a new profile page, go back to results, and so on. I would also try different browsing habits: either do this scenario with only one tab open, or by opening a new tab when checking a profile page. (this opens two questions. One: is it easy to open a profile link in a new page by middle clicking. Watch out for this kind of behaviour. Two: should you be able to go back with a link to the results page once you opened a profile in a new tab? Because in this case you cannot hit the browser back button.)

Jeff Atwood also points out some of the drawbacks of endless pagination, or infinite scroll:

• The scroll bar, the user's moral compass of "how much more is there?" doesn't work in endless pagination because it is effectively infinite. You'll need an alternate method of providing that crucial feedback, perhaps as a simple percent loaded text docked at the bottom of the page.
• Endless pagination should not break deep linking. Even without the concept of a "page", users should be able to clearly and obviously link to any specific item in the list. Clicking the browser forward or back button should preserve the user's position in the endless scrolling stream, perhaps using pushState.
• Clicking the browser forward or back button should preserve the user's position in the endless scrolling stream, perhaps using pushState.
• Pagination may be a bad user experience, but it's essential for web spiders. Don't neglect to accommodate web search engines with a traditional paging scheme, too, or perhaps a Sitemap.
• Provide visible feedback when you're dynamically loading new items in the list, so the user can tell that new items are coming, and their browser isn't hung – and that they haven't reached the bottom yet.
• Remember that the user won't be able to reach the footer (or the header) any more, because items keep appearing as they scroll down in the river of endless content. So either move to static headers and footers, or perhaps use the explicit "load more" button instead of loading new content automatically.