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?

  • 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) – Majo0od Dec 1 '15 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 Dec 1 '15 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 Dec 1 '15 at 19:52
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.

  • 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 Dec 1 '15 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 Dec 1 '15 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 Dec 1 '15 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 Dec 1 '15 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 Dec 1 '15 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.

  • Was my thought too. Hopefully it wasn't very janky? – Shubham Kanodia Dec 1 '15 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.

  • 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 Dec 1 '15 at 13:31
  • Scrolling in widgets is simply a bad idea. It's like adding another scroll bar to your website. – Noah Dec 2 '15 at 16:02

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.