5

Can a website have a "load more" buttons AND pagination for indicating more content? Not on the same pages, but for example:

  • a landing page with articles has a "load more"
  • a shopping page has pagination to show 200+ products. Reason is so it's easier to scroll back up to filter (like amazon product searches)

those are in addition to the usual button CTAs. Are there too many things happening?

  • Here's an article on whether you actually need the pagination for shopping page: smashingmagazine.com/2016/03/… – Armands Oct 12 '17 at 7:56
  • Can you clarify if this is an e-commerce site, the whole page content or a component/feature within the site?...where multiple components/features are visible in rows on page scroll – Ben Graham Oct 12 '17 at 13:09
  • Don't forget that infinite scroll can still (and should) behave properly with the URL bar. I can't find an example right now, but there are news sites where you just scroll right down to the next article and the url is updated to the new post, allowing you to share the new URL properly – Ben Brocka Jan 10 '18 at 22:06
1

To address your specific concern of both options co-existing, I'd say the answer is NO. I don't have any data or study at hand of these coexisting and I never saw such pattern. However, think about this: if you keep loading content.... where are the pages? And if you don't have pages... what are you going to paginate?

Let's try an example: Jane Doe visits eComSite and does a search for a product. The search provides 200 results in blocks of 20 results per page, and she starts to browse through pages looking for the best options. She finds one on page 1, another on page 2, another on page 4. Thanks to short term memory, she will be able to visit a few more pages, but she will remember she already saw something of interest on those pages.

Now, same case with load more (or infinite load): do you think Jane will find the products easily if she continues loading content? Remember that all clues have gone, she doesn't have blocks or pages or any other indication of where she was and where she is, other than a massive amount of content.

As you can see, very different scenarios and very different user flows that demand very different user behavior. So... how do you mix these completely different user flows?

A final consideration would be that if page has no end, then you won't have an end of page to place your navigation. This could be solved with weird patterns such as a floating pagination bar, so I think you should focus on the user cases above: mixing user flows and mindsets is almost impossible, so I'd say the answer is no

Edit: if interested, take a look to these videos or download the slides for this talk, they will help you understand the problem from an scientific point of view

0

Pagination and Load More options depend on the context. It will be fine to go with the Load More option for in a context like the one you mentioned. And for a shopping page like stuff, pagination will be more useful. But, if the content is shown while using Load More button results in too much scroll, you can provide a "Back to Top" option for the user.

0

I disagree with William and Ben. Pagination in e-commerce is not the way to go.

Throughout our large-scale usability study of e-commerce product lists and filtering, numerous test subjects explicitly complained about pagination. Test subjects generally perceived pagination to be slow, and the presence of more than a handful of pagination links would often discourage them from browsing the product list. More importantly, test subjects were observed to browse much less of the total product list than on websites that rely on “Load more” buttons or infinite scrolling. On the upside, they spent relatively more time on the first page of results.

https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/

To answer the question: Yes it is okay to mix between pagination and infinite scroll for different use cases but keep in mind that your users will expect that your site/application works consistent.

People might get confused when expecting infinite scroll again but see a pagination and vice versa as well.

So dont mix to often and without a good reason.

0

1st Context - Load more would I tend to think be used for smaller amounts content, data or images and be used in this way (saving load times)...

2nd context - Pagination would be used for larger amounts of content, products, images or data.

Lazy loading is a sound technique and alternate solution which can be used to make the content/data available when in the viewport.

Infinite scroll differs from my understanding of the question.... Infinite scroll is the ability to endlessly scroll a site or app..

Filters, checkboxes or filterable form fields, tags/tag clouds and date-pickers provide other options for differing contexts and situations.

Yes I believe is the answer.

0

Yes, you can use both on the same website. The choice between pagination and infinite scroll (with or without 'load more') depends on context: which kind of content are you offering at this moment?

This 'rule' even counts for e-commerce sites. If you want to show inspirational content, feel free to use infinite scroll. Users are, at this stage, not looking for anything in particular. Instead they are discovering your content and checking large amounts of diverse items to find something they like. Essentially, infinite scroll usage here encourages discovery. This can and will boost conversion (at least it did for projects I've been a part of :-) ).

But there are situations where it really, really hurts your business. When your user is looking for specific information or products.

People will want to go back to the list of search results to check out the items they’ve just seen, comparing them to what else they’ve discovered somewhere else down the list. Not only does the infinite scroll break this dynamic, it also makes it difficult to move up and down the list, especially when you return to the page at another time and find yourself back at the top, being forced to scroll down the list once again and wait for the results to load. In this way the infinite scroll interface is actually slower than the paginated one. -Dmitry Fadeyev

This con is why you can't blindly apply infinite scroll to every single website. It is a context-based decision. Infinite scroll works well for content where users are consuming an endlessly flowing stream of data without looking for anything in particular. Pagination is appropriate for when they are looking for something specific (search results, product category overviews).

If you keep this in mind, then you can safely implement both ways of browsing to your (e-commerce) website.

More here: https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1

Edit: to see this in action, simply check Google search results and Google images. They exist right next to each other, yet search uses pagination and images uses infinite scroll for the reasons mentioned above.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.