3

Was reading a few answers on UX Exchange, which lead me to question the utility of horizontal scroll in web apps.

I had done a horizontal concept site recently (here and shown below) which was meant to be used in desktops and tablets.

Screenshot of concept site

I want laptop users to swipe horizontally ( since most but not all laptops support horizontal swiping) and desktop users to simply scroll using mouse.

I found quite a few laptop users struggling to figure out how to scroll, since they haven't realized that horizontal scroll is possible in their laptops, or maybe they know that their laptop doesn't support it. In the end they just end up dragging the scroll bar (which provides a bad UX); How can I clear out this confusion?

Shall I just make them scroll via arrow keys?

Improve this question
3
  • Just a comment: This is really well done. Why would it be unintuitive? From the start you told me to scroll left and right, nothing wrong with that. (again, well done)
    – UXerUIer
    Commented Dec 1, 2015 at 15:18
  • @Majo0od When I said intuitive, I actually meant does the action itself feel natural. People don't always like change. But got my answer. And thanks ;)
    – Shubham Kanodia
    Commented Dec 1, 2015 at 18:27
  • Though it may not feel natural, because you initially tell the user to scroll using Down, once they begin, following the progression of the art (which is beautiful!) takes focus away from the manner of interaction. Once it works, it works.
    – elemjay19
    Commented Dec 1, 2015 at 19:52

3 Answers 3

Reset to default
3

tl;dr

When you challenge users' expectations, they'll challenge your design.

Horizontal scrolling has issues

I've done some experiments with this approach as well, mostly focused on tablet experiences. The primary problem I see with horizontal scrolling (vs paging) is the way textual information is revealed at the edge.

Text is arranged in horizontal lines, which leads to vertically oriented hierarchy. Horizontal scrolling screws up the exposure of this hierarchy. Essentially, users are asked to watch the edge carefully and figure out when the next meaningful set of information is within view, then analyze the vertical hierarchy.

article ui
Horizontal: no thanks.

When it works

On the other hand, when you have an image-centric presentation (like a side-scrolling video game) you can make use of that orientation much like swinging your head to scan a physical environment. If you create a presentation that has a horizon-like perspective, horizontal scrolling is the most natural solution. Just make sure that horizon line is unquestionably obvious.

enter image description here
Horizontal: sure!

Your experiment walks the line a bit. You've limited the amount of text and made it nice and big to minimize the user's interpretation work.

Personal preference

I still like top-scrollers better than side-scrollers. ¯\_(ツ)_/¯

Note: horizontal scroll on my MacBook Pro in Firefox 42 doesn't work. No worries, you can't please everyone with an experiment.

Improve this answer
7
  • Horizontal swipe should work just fine in all macs. (Does in mine..) Did u initially try to scroll vertically by any chance when the page loaded? Could you please take a look at your inspect console and tell me the cookie value (🍪 ) that u see?
    – Shubham Kanodia
    Commented Dec 1, 2015 at 20:24
  • I'm away from that machine right now, but if a user's instinct to scroll vertically first breaks your js the solution failed.
    – plainclothes
    Commented Dec 1, 2015 at 21:20
  • Well, actually its supposed to detct any small y axis movement even if you were to scroll vertically first. Unless you swiped vertically and avoided even a pixel of diagonal/y axis movement (which may not be easy to do), it should work. Anyway. the cookie value shall reveal the truth.
    – Shubham Kanodia
    Commented Dec 1, 2015 at 21:27
  • From the console > mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create vendor-d8975417e9.js:96:4432 Scroll method initializing.. app-967d756724.js:4:28934 🍪 : mouse app-967d756724.js:4:29669 Resetting scroll method to: mouse app-967d756724.js:4:28486 Normalizing wheel... mouse app-967d756724.js:4:28579 document loaded... app-967d756724.js:3:6128 requestIdleCallback not used : not supported by browser app-967d756724.js:3:5731 Entered : howrah app-967d756724.js:4:24621
    – plainclothes
    Commented Dec 1, 2015 at 21:58
  • 1
    Anyways, if you clear your cookies and try again, or try a different browser, it shall work. But even if the detection misses, you still have vertical swipes. Life's complicated.
    – Shubham Kanodia
    Commented Dec 1, 2015 at 22:09
1

Cool website. In this case, there is n o problem in using horizontal scroll. It's a different kind of experience and that's clear from the get go.

Users will expect to be using a custom kind of navigation as it resembles platform gaming more than a regular website.

Improve this answer
1
  • Was my thought too. Hopefully it wasn't very janky?
    – Shubham Kanodia
    Commented Dec 1, 2015 at 13:33
0

There's a lot of stuff about why you should beware horizontal scrolling from the Nilsen-Norman group

I'm also sure that I have seen a study that correlated the head-shaking type movement users perform with looking at horizontally scrolling pages with negative feelings for those users towards those pages - I'm still trying to find that one.

Improve this answer
2
  • As far as I could read into the article, it tackles horizontal scrolling in different widgets of the website.. not scrolling of the body of the website itself.
    – Shubham Kanodia
    Commented Dec 1, 2015 at 13:31
  • Scrolling in widgets is simply a bad idea. It's like adding another scroll bar to your website.
    – Noah
    Commented Dec 2, 2015 at 16:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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