Scrolljacking — The Usability Nightmare?
Scroll hijacking has been demonized by good UX but could it become the cornerstone of your next UI design?
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:
- Use our mouse/trackpad/finger to scroll up/down the page
- Use the built-in (default) browser scrollbar — that bar on the right side of the page.
- 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.
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.
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.
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.
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!
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.
