Stop hijacking my scroll wheel

2023-10-24

Have you ever walked up to a door and instinctively gone to push it, only to realise it was a pull? Or worse, it was a sliding door? After confirming that no-one saw this embarrassing blunder did you blame yourself or the door? Thankfully I can confirm that it was indeed the door's fault and not your own. This is what's known as a Norman Door. Essentially any door that's difficult to use as it's unclear on how it works purely based on its appearance. Take for example, the door above, would you push it or pull it? Typically, we're used to pulling doors with a vertical handle, and pushing those with a horizontal handle, as the mechanism for pulling is easier with our hands in a neutral (or handshake) position, and pushing is easier with our hands in a pronated position (palms down). I'm no designer, but I love Norman Door's and what they represent. Which is essentially; breaking a users expected result will result in a poor experience.

During my second year of university I was taking a UX 101 class. One of the standout moments was when the Professor showed the above icon on the screen and asked what it was. Everyone unanimously agreed that it meant Save, however after a further round of questioning by the Professor, it was evident that half the class didn't know what the icon itself was actually representing physically. I'm sure the majority of the readers of this blog will know it's a floppy disk, but half of this class was born after the use of floppy disks. What's interesting to me about this is that the Save icon being a floppy disk is a design convention that has been stuck with for over twenty years, and people born after the use of floppy disks will still recognise it's silhouette to mean Save. Changing the save icon to something more suitable for this day and age - like an outline of a USB - sounds reasonable, but would ultimately confuse users as it breaks the established convention of what the save icon looks like. Now, why am I talking about doors and floppy disks, isn't this about scroll wheels? Well, yes, it is about scroll wheels, but at it's core it's about User Experience, and not pissing your users off by doing something they weren't expecting.

Across most normal websites, one scroll of my mouse wheel, or one slide of my track pad will result in my browser navigating X pixels up or down the page. It's a predictable number, and with my muscle memory I can reliably gauge how far I need to scroll with my finger to view the content I'm wanting to see. It's the same as using a mouse in general, I know that if I move my mouse at a certain velocity, my pointer will move to the area I'm aiming for. However, on some cursed and wretched websites that exist to rile me up, this reliable muscle memory I've built up over the course of my life is thrown out the window. This can be achieved in a variety of twisted ways:

• Vertical scrolling is switched to horizontal scrolling, and now my browser is sliding content in from the left or right
• The velocity of the scroll has been modified. All previous muscle memory is no longer useful and I'm flying all over the page trying to read the content as my scroll is now set to turbo extreme
• The page has fixed sections that can only be visible one at a time, now instead of scrolling I'm swiping through different full view pages. (Thank you for turning my browser into a powerpoint)

Now I understand that these websites aren't doing this in a malicious way, they're not trying to upset the user, quite the opposite. Most are intending to provide the user a novel way to interact with their website that delights them. However, this can't come at the expense of the predictability and, in turn, usability of your website. Nielsen Norman Group released fantastic research in August about this very topic, ultimately coming to the conclusion that:

Scrolljacking is a design pattern that can do more harm than good if not executed in a manner that maximizes user control and efficiency. Even then, it is risky. Our user research showed that scrolljacking is likely to cause disorientation and frustration.

So to all designers, developers and engineers out there that are thinking about hijacking my scroll; please, reconsider. As your intention may be to delight, but you'll most likely frustrate.