2

I'm working on my website and I love the idea of using horizontal scrolling to display large lists of items while saving vertical space.

The problem I'm having is that in the desktop version of Chrome, the horizontal scrolling is made obvious by the horizontal scroll bars (a little ugly, but usable) however on the mobile version of Chrome, scrollbars are only displayed while the user is scrolling, and fade away after they stop which to my eye is a lot less obvious that you can scroll horizontally.

The following two screenshots illustrate my issue:

Horizontal scrolling on mobile

Horizontal scrolling on desktop

As you can see the scrollbars on the desktop version make it very obvious, whereas the only way I think a user could tell the space can be scrolled horizontally on mobile would be by the image that's clipped, but I see two problems with this:

  1. What if the images fill the horizontal space exactly, and you don't see a clipped image?
  2. What if the user just perceives this as a broken mobile experience? Thinking it's just a fixed width area that is overflowing the screen?

Any ideas would be greatly appreciated!

  • 2
    Please reconsider the use of horizontal scrolling, it's not a pleasurable experience with a mouse. Carousels of just a few items with stepper controls can be acceptable. If you're open to alternatives to horizontal scrolling I have some suggestions and I'll post an answer. – Wes Toleman Feb 25 '18 at 5:56
  • @WesToleman I'm definitely open to suggestions. What if all the items were just displayed on the page and the user could scroll down vertically like normal on desktop, but they were collapsed into horizontal scrolling on mobile? – saricden Feb 25 '18 at 23:03
  • you could do that, an alternative is a draw or some sort of partial hiding, a click to see more sort of set up. – Wes Toleman Feb 26 '18 at 10:46
1

At first, the idea of horizontal scrolling on mobile devices puts me off. But after a second thought, if done properly, can be a space saver indeed. What I'm getting to is that to many users horizontal scrolling on mobile devices can be counter-intuitive.

Nevertheless if you divide the page in sections and make each section horizontally scrollable individually and independent from the others, it may have sense. This is what I mean by "done properly".

And how to indicate the scrolling possibility? Try to use an overlay with some arrows to show that certain section can be scrolled left or right. See the picture:

horizontal sections

You can also play with the shades to indicate whether scrolling has reached either end or simply let the arrow disappear. Just try what's more appealing to you.

  • 1
    I think this makes it clear you can move left and right in the content, but I don't think it indicates you can do so by scrolling (swiping) left or right. I think it sort of changes the UX a bit so now they're going to be tapping the arrows expecting them to jump to the next X items – saricden Feb 26 '18 at 7:58
  • @saricden, I think you are partly correct, and for this case the arrows can react to tapping (what's stopping you from implementing this). What is a real challenge (if you want to make the content scrollable with swiping) is distinguishing between an inaccurate tap and short swipe. Nevertheless, on many mobile pages you can swipe vertically and there aren't any instructions for that. And still, the users manage to find their way around. – Mike Feb 26 '18 at 11:28
  • Just another though is maybe I could add some inset show on the edges of the content when they're able to scroll. They do that on ReactJS's website and I think it's fairly effective reactjs.org (mobile size only, not desktop) – saricden Mar 6 '18 at 22:03

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.