Scrolljacking — The Usability Nightmare?

Scroll hijacking has been demonized by good UX but could it become the cornerstone of your next UI design?

Christina Paone
Jan 21 · 6 min read

For all the right reasons, scroll hijacking (a.k.a scrolljacking) has been blacklisted from a usability perspective. Scrolljacking is when a website takes control of ‘how’ we naturally expect to scroll up/down a page.

“ Messing with someone’s scrolling is similar to driving your car, pressing the horn but instead of honking, you wipers switch one. Not only is this disjointing and frustrating for users, it can also feel too invasive. The idea of an outside source messing around with how your page and mouse works, as though the designer or website owners know best, isn’t something many people aren’t going to be happy about…” — Discovery Design


Expectations

When we land on a page we naturally expect 3 ways to ‘scroll’ through the content:

  1. Use our mouse/trackpad/finger to scroll up/down the page
  2. Use the built-in (default) browser scrollbar — that bar on the right side of the page.
  3. Use keyboard arrows to move up/down the page.

Scrolljacking occurs when we manipulate these behaviors. Common offenders are the horizontal scroll, parallax, controlling the speed of scroll, altering the design of the scroll bar and the list goes on…

“OK, so scroll jacking certainly doesn’t create dangerous situations, but still, it goes against everything a user has learned to expect from their previous experiences with scrolling, both on the web and in most applications.” — Gaspfour Digital

So we know scroll hijacking is bad but from a design perspective, it can be really really cool!

So how do we use this really really cool effect in a practical and rational sense? As a designer, how do we create experiences that are captivating and useable?

Examples

The following are some examples and advice to consider scroll hijacking in an acceptable manner for your next website design project.

First, you need to assess the user group and type of experience you are trying to create. If the user group is the general public, a high traffic site, multi-device use, has accessibility requirements, novice tech user group … stop reading and run away from the scroll jack. If you are creating a website for a niche group, on the edge of experimental, med-advanced tech user, early adaptor, device specific … then consider the following ideas.

Note: Even the best attempts at scroll jacking is often horrible on mobile/tablet devices. Consider an alternate solution or invest in testing and refinement to your design.


https://www.tumblr.com

Classic Example of the Scroll Hijack

UX Rating: Bearable

Pros: The dot based navigation helps indicate your place within the content. Dots are also clickable and let you skip around.

Cons: It is really slow. The hijack controls the rate of your scroll and loads one section at a time, no matter how fast you try to scroll down. This can be annoying.

Feedback: Overall this experience is bearable because they have a low volume of content. This controlled scroll effect is matched well to absorb the page content. I would suggest avoiding this design pattern. We can learn from it but the level of creating a memorable experience does not exceed the loss of usability.


http://www.anonymoushamburger.com

Horizontal Scroll Hijack

UX Rating: OK
UI Purpose: Creative Experience

Pros: This is a beautiful design that compliments the content. It would work well in a vertical or horizontal format. It feels as if you were scanning across the dining room table.

Cons: Again, the hijack controls the rate of your scroll and loads a selection of articles at a time, no matter how fast you try to scroll. This can be annoying. The design provides alternate methods to speed up the process by clicking the ‘scroll —>’ text button or dragging the page (which is favorable for tablets). However, on a computer, our natural instinct is to scroll, and the speed should be free-flowing.

Feedback: This is a nice horizontal design and works well to showcase the content. It would be better if the rate of scroll was not controlled and limitless. It would also be helpful to include a location status indicator to show our relative location within the content.


https://www.reputationsquad.com

Horizontal Scroll Hijack

UX Rating: OK
UI Purpose: Storytelling

Pros: This method tells a story in a linear fashion, like a traditional book. This site does not control the scroll speed, which is nicer for the user. The user might skip content with this method but they will go back to reread it if they are interested. You can also drag to navigate.

Cons: The experience is smooth however it is missing a location status indicator to show your relative location within the content.


http://valaire.mu

Parallax Scroll Hijack

UX Rating: OK
UI Purpose: Creative Experience

Pros: This page scroll design is very well done! You don’t feel as if a robot has hijacked your abilities to navigate the content. You have free will to control the scroll speed and your location on the page. It is a fun experience and makes me want to explore more! The location indicator is useful and the sticky menu items give a sense of grounding to a design that is full of movement.

Cons: It doesn’t need the ‘scroll to discover’ button at the start. There is a big debate about these types of indicators but my perspective is that people will naturally scroll (which is what this article is about) so why do we have to remind them. Less is more and let the user explore!


https://durimel.io/nel

Horizontal / Parallax Scroll Hijack

UX Rating: OK
UI Purpose: Creative Experience

Pros: I like how this small section of hijacking adds movement to what could have been a long boring list of names. This works well because you are not moving around — the content is moving within the browser window. You control the scroll rate. Also, you can see from the numbers/names that the content loops — you don’t need to worry about missing anything (and you don’t need a location indicator).

Cons: None. It would be interesting to explore a mobile/tablet solution.


Many of the examples in this article were found on a curated list from awwwards.com — check out the full article for more inspiration. *You will find both useable and not so user-friendly examples on their experimental list.


Reflecting on this post: Do you strongly disagree? Did you learn something new? Could you offer alternate links and resources to continue the discussion? Please share your thoughts in the comments below.

Enjoyed this post? Click the applause button to help others find it!

Christina Paone

Written by

Senior Brand + UI/UX Designer | Principal of paonecreative.com | Interactive Educator at ideaschoolofdesign.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade