2019 – The Year We End Scrolljacking

Why 2019 Should Be The Year We End “Scrolljacking”

Scrolljacking is when native scrolling on a webpage is replaced with scripted movement to a specific area on a page instead of a natural scroll.

The User Experience Uncanny Valley

In aesthetics, there’s a concept called the Uncanny Valley. If you’re familiar with science fiction you may have heard of it . If not, you’ve probably experienced it. The general idea is that a robot or other human-like object that looks almost human, but not quite ,  is far more disturbing than a robot that doesn’t look like a human. If you still don’t get the concept, think of how unnerving those facial recognition emojis can be.

The same principle can be applied to UX aesthetics in a similar way. If you have your front-end JavaScript emulating scrolling programmatically, it has to be good, or everyone can see that the scrolling isn’t really quite right. Even if it’s just a subtle difference, people can notice that something so fundamental to a web page, like scrolling, isn’t the native browser action they’re used to. To quote the usability expert Jakob Nielsen:

“Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen.”

If you notice a difference, your users will, even if they don’t know the words to express that. I can pretty much guarantee that any added benefit that your scrolljacking plugin affords your page is not worth launching your users into the gaping maw of the UX Uncanny Valley.

If you’ve found a way to seamlessly scroll programmatically, that’s great. However, that might not be a good reason to do it, because…

Not All Devices Are Created Equal

At Brunch, cross-browser and cross-platform testing is a huge part of our development process. However, we firmly believe a good rule of thumb in web development is to be as inclusive as possible (within reason, of course .) The processing power of devices and efficiency of browsers varies widely even within the window of browsers and devices you should reasonably support–Even among versions of the same device. According to Geekbench, who collects user-submitted benchmark reports from different devices, reports that the iPhone XS has more than six times the aggregate processing power of the iPhone 5 (which is still supported as of December 2018). Many mobile devices are nowhere near as powerful as desktop devices.

Case in point: even if your scrolljacking provides seamless scrolling animation, it’s probably not going to look the same across all devices.

Don’t Reinvent the Wheel

Users have come to expect certain conventions when browsing the web. By introducing new, atypical methods of accessing content on your website, oftentimes you’re actually burdening the user and making it more difficult for them to access content. There’s always an inherent risk in drastically changing how users see the webpage, so there should usually be a very specific reason as to why you are making the change.

One example is horizontal scrolling. Because most people aren’t used to accessing content horizontally, they’re forced to maintain closer attention and exert more effort to maintain the horizontal drag/scroll. They’re also not used to seeing content there. As such, they could easily ignore this type of content by mistake. Same goes for navigation cues. Again, because this behavior is often new to users, it’s likely that it won’t get noticed.

Another reason for frustration is that when a designer or developer is introducing new scrolling methods, they are essentially taking that decision away from users themselves. This leads to a feeling of less control and creates a learning curve, even if it is quick. Users can have short attention spans, and it’s important that we capitalize on the short amount of time we have to get the content across as quickly and as easily as possible.

Lastly, another issue with taking scrolling out of the hands of the browser is directly tied to maintainable code. Browsers’ basic UX, like scrolling on a page, is optimized and integrated with a low-level browser engine running the application — like Chromium for Chrome or Gecko for Firefox. Creating your own scrolling with extraneous JavaScript not only uses valuable JS processing resources, it assumes that your custom scrolling library can and will be updated as web browsers grow and change. Maybe it will work just as well in five years or maybe the developers will continue improving and supporting it that long, but it’s a piece of your codebase you’ll have to be concerned about maintaining or rewriting in the future.

There Are Better Ways

There’s actually quite a bit of options when it comes to scrolling behavior — that don’t involve completely upending typical contentions. AKA not re-inventing the wheel.

ScrollMagic is one method. This effect of having elements fade in as you scroll vertically has become quite popular and is seen all over the web. Apple products usually use some combination of this type of effect, with some sort of delay between animations (TweenMax does a great job of introducing animations on scroll, not on load).

Long story short: you don’t need to entirely scrap the behavior that users have become accustomed to. It contributes to bad usability and user frustration. You can achieve high quality animation and interactive web layouts without sacrificing usability and typical web convention. The idea is to enhance content layout, and make the web more exciting and enjoyable to use — not create barriers to accessing content.