2

I'm designing blocks of content that scroll left-to-right on a page that uses infinite scrolling. If the user has scrolled through a section all the way to the right, what should happen when they scroll down, and new content loads on the page?

  1. The system should return the user to the original left-most position on the page and start additional scrolling sections at their left-most positions
  2. Content in the newly-loaded section should load on a similar y-axis to the content above it, let the user scroll back to the left and control their own left-to-right orientation
  3. Force the sections that scroll left-to-right to be fixed-width so that the user only scrolls within the viewport (is this possible for responsive?)
  4. Combining left-to-right scrolling can't work with infinite vertical scrolling and there's a better pattern for this (would appreciate suggestions)
2
  • 1
    Thanks for your contribution to UXSE! As the question currently stands, it is probably not likely to lead to the answers that you are looking for. If you have a specific use case or scenario that you are planning or in the process of designing, it is probably worth sharing the context so you can get better response from the community. Thanks. – Michael Lai Mar 8 at 0:30
  • #1 is definitely not good, as it modifies something that the user expects to have control over (i.e., the scrollbar position). – Tim Holt Mar 11 at 21:37
1

Given any type of design, there is usually at least one suitable use case, and I suppose this would be no exception.

However, I cannot recall seeing infinite scrolling combined with horizontal-scrolling at section level except in enterprise level applications that have multiple large tables on the same page.

This type of design probably breaks a lot of the best practices when it comes to design, so there are certainly examples but I would say that they provide good user experience.

Without being able to share internal testing results, I would say that overall for this use case it is not suitable, but that's not to say there aren't other uses that might be.

1

Horizontal scrolling has accessibility problems. Infinite scrolling has accessibility problems. Combined, this could become inaccessible to a lot of people.

However, there are accessibility-minded companies that are using this pattern in specific circumstances. Social media ads have employed carousels for a long time. They're ubiquitous on Facebook, and now Twitter is joining in. Both employ infinite scrolling.

Twitter screen showing ad carousel

e-rugs carousel ad

The rules for making this a positive interaction seem to be:

  1. Fixed width for the space that contains the carousel/scrolling content. Narrow, not wide.
  2. Provide card-based content in the horizontal scrolling section that can be navigated by clicking (on desktop), not dragging on a scrollbar. Make each discrete chunk of information readable without scrolling.
  3. Let the user have control over the scrolling experience - don't auto-advance.
0

Rather than one horizontal scrollbar for the whole page, place each section inside its own horizontal scrolling block.

If you take a look at this UX Collective post on "Best Practices for Horizontal Lists in Mobile, it describes this approach for mobile applications, though the method would also work for desktop browsing.

As the post states...

Horizontal lists work best when you want to display a subset of homogeneous content that’s part of a heterogeneous set.

Here's an excerpted picture the same post that illustrates the approach...

enter image description here

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.