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 of pagination links, but, importantly, there is no indication of how much more data there is that could be viewed. So you would need to 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.

If you know the total number of matches [ Load More ] plus an indication of the total number of matches would be OK, as people are usually only interested in the results from the first few "pages" of matches (Google search results spring to mind here).

You need to answer the following question: 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?

If it's the former then you need this total and to use pagination, if it's the latter, then go for [ Load More ].

Ultimately 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, but your users might not.

Answer 2

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.
• 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.

Answer 3

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 4

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 5

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 6

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 7

Today pagination continues to be more common on the internet due to the old concept of paging added to the performance gain. But interface studies indicate that infinite scrolling, or [Load More] besides being more attractive can provide a superior user experience depending on the application, the performance of the machines and the programming has improved what has contributed to make it work.

Advantages:

• You keep the user longer on your site
• Scrolling is better than clicking

Disadvantages:

• If the user clicks to return it loses the progress and returns to the top of the page
• user does not know how many items has the result

You need to keep the performance high, if you use infinit scroll but can not make the search for more results get instantaneous, change to pagination. But if you can maintain proper performance you can use infinite scroll, added filters with your list of results to make it easier for the user.

The important thing is to determine the function of the results in your application to know if it is necessary to use paging or lazy loading.

These links can help: 1 2 3 4

Answer 8

I think it depends on the time spent browsing or interacting with elements on the page. If there's only cursory involvement expected from the user, then infinite scroll would be a better choice. But if its a job site, for example, the user is expected to spend some time reading the excerpts etc, and so pagination should be preferred.

Specific Examples of both use-cases:

• Pinterest: light involvement with elements on the page, infinite scroll works well.
• Google Images: Cursory involvement, quick browsing expected from the user (you can judge really fast if an image interests you or not). So infinite scroll works well.
• Seek job site: Deeper involvement with each element (job description), so pagination works well.

But why prefer pagination whenever we can? Well, pagination offers multiple advantages as mentioned in other answers here, namely an estimate of the number of results, quick browse to a particular page, better SEO etc.

If the user is spending an equal amount of time viewing the elements on the page and waiting for the next page to load, I think its better to go for infinite scroll.

I hope infinite scroll would also catch up in its implementation to include all the benefits of a traditional pagination setup.

Answer 9

If you are making a dating site, pagination should not be 1,2,3 (as it can be boring) but load more.

See, if you are asking for MORE. Yes, show me more. You are generating excitement to the user without revealing the number of results. For users, it's always exciting to see more, especially in dating sites