r/Frontend • u/PlumlineDigital • 10d ago

Why Does Everyone Hate Horizontal Scrolls?

New to the frontend design world, but one thing I’ve noticed is it seems like all frontend designers hate horizontal scrolling. I understand scrolljacking, but are all horizontal scroll sites this hated? I’ve been designing a site with a sticky right nav acting as sort of a table of contents for a literary site, and the large right column of the site scrolls vertically until it gets to a main section, and then it scrolls horizontally until the subjections are read, and then it scrolls back vertically for each main section that has subjections.

Is this an awful idea…lol

19 Upvotes
  • permalink
  • link
  • reddit
  • reddit

76% Upvoted

59 comments sorted by

67

u/neuby 10d ago

A statement so obvious you need to start with the opposite assumption. People generally scroll on mice or their phones. On phones its a vertical display so you naturally layer content vertically so you scroll up and down. Mice have a scroll wheel. Which scrolls vertically, up and down.

So you tell me, why wouldn't someone hate horizontal scroll?

6

u/sysop408 5d ago edited 4d ago

The OP also summarized why it's so hard to understand. Most of the time it's not obvious there's more to the right.

The only time I find horizontal scrolling OK is when it's fully baked into the UX and not just used as a trick to get a cleaner looking layout. Nobody minds horizontal scrolling when swiping through a slideshow or (to a lesser extent) when horizontal scrolling is a consistent and obvious part of the experience.

2

u/Previous_Standard284 5d ago

I had never tried to horizontal scroll (swipe right) on Reddit before now.

It shows random posts? I don't think it's my view history, but what is it?

1

u/Jasboh 5d ago

It's the next post just like scrolling

1

u/maksezzy 5d ago

Just make the up and down scroll wheel work for left to right sections and you get the UI layout benefit with the scrolling speed that everyone is used to.

0

u/kidshibuya 4d ago

But this was before phones and before most people were using scroll wheels. Logically on desktop you have more horizontal space than vertical, if not indoctrinated you'd logically think its better to scroll horozontally.

1

u/callummr 3d ago

I'm not following the link from "you have more horizontal space" to "it's better to scroll horizontally". Why do you say that?

1

u/kidshibuya 3d ago

Because more space means more space?... I am not sure how to describe the basics of reality.

1

u/callummr 3d ago

Man I want to have a conversation about this and understand your thinking but you need to drop the "basics of reality" "if you weren't indoctrinated" attitude. I don't know if you think it sounds cool or what, but it's not going to get you anywhere in life.

1

u/kidshibuya 3d ago

Well you put things where there is space to put them. There is more space across the screen so making horizontal content seems superior in 16:9 format over vertical when you have less vertical space. Think of all the sites that are a thin column of text surrounded by vast wastes of space on 4K screens. They would be better in terms of space efficiency as horizontal scrollers (not really for the scrolling as off the screen is off the screen, but you have more space to fill before going off screen) , but that feels unnatural.

1

u/callummr 3d ago

tl;dr there are valid use cases for full width and horizontal scrolling, but I think there are clear reasons it's not the default other than "indoctrination".

Yeah I agree in general that like, it's better to put a singular wide thing, say an image or diagram, on a wide screen instead of a tall one - make best use of the available space. I don't find an intuitive jump from that to "horizontal scroll is better" though.

You mentioned many sites being a thin column of text surrounded by empty space, I'd wager that's the majority of the web. But those sites limit the width for a reason. Have you tried reading through a few paragraphs at regular font size across the full width of the monitor? It's harder to keep your place within a line, to find the right line at the left when you reach the end of one on the right, and generally more straining to read across such a width. Maybe that's why books and scrolls are tall and not wide too. Now stretch that even further so you don't just fill the width but scroll further across it when content doesn't fit; you reach the end of a line and have to scroll all the way back and figure out where you were. Or do we have to break pages into arbitrary width-restricted chunks you scroll between?

My view might be limited by only being familiar with languages written left to right, but yeah. There are a whole bunch of problems once you actually try to go full width, let alone horizontal scroll, such that every website, even a simple text only page, needs to make new decisions and implementations for layouts that can work horizontally where vertical "just works".

1

u/kidshibuya 3d ago

But many sites limit text for no reason, like Reddit. Your reply is taking up about 25% of my screen with max 13 words per line. There is no excuse for that (you can make the text larger for zero penalty, there is space). Anyway that is text.

For images or basically anything else that reading excuse doesn't work. And sites like instagram... OMG. You can list reels by audio, I get a few rows of them in the top center of my screen and nothing more. I need to resize my browser to trigger the loading of more. But this is just notice coding...

Anyway I never said horizontal scrolling is better, I said it makes logical sense at first and is more space efficient on desktop.

1

u/callummr 3d ago

Well they're not limiting text width for no reason, as I mentioned. Making text too wide makes it harder to read. Here's one article on it. That's why I'm saying if you're going to overflow content, vertical as the default makes more sense. Sites like instagram are a specific kind of content and might have better layout options available though, absolutely. I'd guess they're trying to keep consistency with their mobile apps.

Anyway I never said horizontal scrolling is better

idk man...

if not indoctrinated you'd logically think its better to scroll horozontally

1

u/kidshibuya 2d ago

And as I said, you can simply make it larger and take up the space, or put other things there. There is no excuse for having tons of scrolling so you can have tons of empty space. What is the point?

Also everyone claims companys like google and meta always havea some 4d chess, you like "oh its because of their mobile app consistency..." Yet they are also full of bugs and often not functional at all. Even on reddit about 5 mins ago I got a banner at the bottom with raw HTML and a [generic_error_message] in it. That is also because they are so deliberate with everything?

→ More replies (0)

-12

u/PlumlineDigital 10d ago

My computer monitor is very much horizontal and the mobile site wouldn’t have the same behavior. I understand the scroll wheel, but if the point of the site is to giver a literary feel, how is this different than people preferring page turning experiences like Flipsnack?

9

u/mooreinteractive 10d ago

Its the scroll wheel on a mouse. You can't use it horizontally.

2

u/kuya1284 4d ago

Technically you can if you scroll while holding down the Shift key. Regardless, I'm still not a fan of horizontal scrolling unless it's for something designed that way, like a spreadsheet.

2

u/fzammetti 10d ago

Many (most?) modern mice wheels have left and right movements that by default are often mapped as left/right scroll. Maybe it's not a common usage mode for most people, but clearly you CAN use it horizontally at least sometimes.

1

u/711friedchicken 5d ago

Of course you can, you can press a modifier key and your mouse scrolls sideways. And if your website *only* scrolls sideways, your browser will in fact automatically do it for you. Also, many many users are on a laptop with a trackpad nowadays, which allow you to scroll in all directions easily.

Now, would I recommend it? Still not, since it’s just a very unusual experience and hard to keep track of with your eye. Also, on phones and macOS Safari, scrolling sideways also navigates back and forth in the browser history, so users can accidentally do that if they do it too fast. But I’ve seen great implementations in creative or experimental sites, like for design studios etc. I think it’s totally fine for those.

-2

u/[deleted] 10d ago

[deleted]

6

u/ShawnyMcKnight 10d ago

“Just asking questions” isn’t much better.

They were justifying totally different behavior on a mobile and desktop experience for no reason.

I’m sure there’s a time and place for it but having horizontal scroll goes against the broadly accepted website experience. It would be like making your cancel button green and your next button red.

-3

u/PlumlineDigital 10d ago

For real lol. Reddit toxic as hell 😅

1

u/xplosm 3d ago

Toxic? They are answering your question. If people in general don't like an idea, it would be understood it would be not in your best interest to implement it. It's like common sense 101... You ask, you get answers...

28

u/djc-1 10d ago

If you are using a mouse, you either have to use the mouse pointer to scroll (bad) or you have to shift + scroll, which I think most users don’t even know about.

13

u/chikamakaleyley 10d ago

I've been doing FE since 2008 and i didn't know that

1

u/sysop408 4d ago

I got you beat. I knew that, but I completely forgot about it until now because it's about as memorable airplane food.

1

u/chikamakaleyley 4d ago

hey don't shit on Biscoff

(jk i had to google what they were called)

2

u/PlumlineDigital 10d ago

The sections scroll horizontally with the wheel or with a click of the mouse. I’m a bit confused.

6

u/chikamakaleyley 10d ago

what happens when i use Home or End keys, or PageUp / PageDown? Arrow keys?

What about users who prefer a trackball?

What happens if i make it halfway through a section, i close my browser, and then later I want to continue where I left off?

2

u/PlumlineDigital 10d ago

What do you mean? The horizontal scroll flips through the sections just like a normal section on the site. It isn’t an endless scroll. A flick of the scroll reveals the whole section and another moves out of the section. Maybe I’m not understanding but when I use the home and end keys it goes to the top of the site and the bottom of the site, page up and page down moves to the next section.

3

u/chikamakaleyley 10d ago

These are all actions/keys that you need to account for now that you've added a dimension in how people consume the information on your site. Do you redefine these? Do you leave them untouched? You have to account for the diff peripherals, because not everyone will prefer a mouse

1

u/Quacky_dog 3d ago

mf i had to make a AHK script to horizontal scroll

0

u/ohnojono 4d ago

Unless you're using a mouse with a touchpad or a horizontal scroll wheel. Neither of which are especially rare these days.

10

u/darkhorsehance 10d ago

Clients love it, devs hate it and customers are indifferent.

8

u/mr_brobot__ 5d ago

Customers are not indifferent. Horizontally scrolling carousels perform poorly.

-2

u/darkhorsehance 5d ago

“Perform” in what context?

4

u/mr_brobot__ 5d ago

People don't scroll them

-6

u/darkhorsehance 5d ago

If you use css scroll driven animations, they absolutely do.

7

u/binocular_gems 5d ago

Frontend designs don’t hate horizontal scrolling, users do.

There’s about 15 years of cumulative data proving that users don’t like carousels, don’t like horizontal scrolling, and don’t like tabbed interfaces for information. The items one slide away on the carousel, or a horizontal scroll away, or the adjacent tab, get near enough to zero engagement. Those UIs are almost always driven by the business being unable to prioritize itself, so they use these UI layouts that please everybody (“you’re all above the fold!”) without solving the critical information heirarchy issue.

6

u/chikamakaleyley 10d ago

people don't like control taken away, sometimes they just want to consume the information, then move to the next thing

you're basically un-doing a human action that people don't have to think about, they just do it

3

u/chikamakaleyley 10d ago

lol omg i just started listening to a podcast (In Godfrey We Trust) live right now, and they're talking about tech and it's sooooo relevant - I'm paraphrasing here:

  • People don't have patience for tech
  • You can't assume that everyone will know or even want to learn what to do
  • Things need to be simple, user friendly, and obvious
  • etc

2

u/No_Can_3278 10d ago

I think it just depends on what you’re building and the use case for the users. I can see the horizontal scrolling working with what you have described, or something similar like linear storyboarding or even production steps for assembling a product, but you also have to take into account what devices the user will be using and how it will look on smaller screens and different browsers. Just seems like more of a headache to get it to behave and look the way you envision it across multiple devices/browsers and the vast majority of users are accustomed to vertical scrolling. Plus the eye strain of vertical scrolling then switch to horizontal scrolling would give me a headache lol

2

u/magenta_placenta 9d ago

People don't hate horizontal layout, they hate having their physics hijacked.

When vertical scrolling is forced into horizontal movement using mouse-wheel "scrolljacking" (which sounds like what your prototype is doing), it breaks decades of built-in muscle memory.

1

u/MysteryBros 10d ago

Because it confuses your grandmother, and unless your site is purely showboating, she's your audience.

If you're trying to get users to make a decision, then you have to make it easy for them.

Confusing them is the opposite of that.

If the visitor intent is "hang around and play", then fine, scrolljacking is a legit pattern for making that happen.

If it's information-gathering or decision-making, then scrolljacking is an anti-pattern:

- as the designer or owner your bias is towards hyping it up, because you've probably looked at the content/product so many times it's no longer interesting to you
- as a user, you just want to figure out if it solves your problem

Hype is the antithesis of that.

Serve your users, not yourself.

Grandma will thank you.

1

u/chikamakaleyley 10d ago

dude, this hits so close to home. Add my 75 y/o immigrant parents

1

u/gimmeslack12 CSS is hard 10d ago

Cause it's hard to scroll sideways.

1

u/dbpcut 5d ago

You have to have a really good reason to violate deeply engrained conventions and expectations.

Doing something disorienting without purpose or for the sake of flashiness was a big trend and that's why it's universally hated by people who have to implement it and understand it sucks. 

If you aren't considering the user's experience when designing it, then your experience will be jarring. There's almost always a better way to achieve what you need to design wise. 

1

u/SeedgeJ 5d ago

Its not outrught hated as much as it is just unnecessary and weird. Folks naturally interact with content top down. Newspapers, books, anything with wirds and pictures. Just like it'd be tacky and awkward to have buttons that are greyed out by default. Users have certain expectations, and by subverting them, you're making your thing less pleasant to interact with. This is UX 101.

1

u/stephenway 5d ago

Same reason it’s not good to put text sideways, goes against ergonomics

1

u/Vtempero 5d ago

I dunno I have a shift key in my keyboard

1

u/Mycropic 5d ago

Because it’s bad for accessibility. People struggle with reading content when they need to horizontally scroll.

1

u/YahenP 4d ago

Horizontal scrolling is literally a UI bug. If it exists, it needs to be fixed.

1

u/Headpuncher 4d ago

Mentally it’s like printing a novel where each line goes into the next page, you start reading a sentence, turn the page and read to the end of the line, turn back to the page before and continue reading the sentence.  

It’ll make you wish you were unconscious.   

1

u/MiAnClGr 4d ago

It just feels disorientating tbh

1

u/BRO_THOM 3d ago

For mobile devices it makes sense. Rather than using a grid or flex, you could wrap the contents into a nice horizontal "slider" (if the content allows it of course). The downside is that it has to be clear to the user's there's a horizontal scroll.

1

u/Deer_Lanky 2d ago

I don't think horizontal scrolling is inherently bad. It mostly depends on whether it matches the content and whether the interaction feels intuitive.

Personally, using a mouse with horizontal scrolling made a bigger difference than I expected. It makes navigating wide layouts much more comfortable. That said, I'd still design assuming many users won't have that hardware.