The Community Of Over 578,000

Home ›› Business Value and ROI ›› 6 Key Questions to Guide International UX Research ›› small_16 ›› The Hypnotic Effect of Parallax Scrolling and How it Impacts User Experience

The Hypnotic Effect of Parallax Scrolling and How it Impacts User Experience

by Zack Rutherford
Share this post on
Share on twitter
Tweet
Share on linkedin
Share
Share on facebook
Post
Share on reddit
Share
Share on email
Email
Share on print
Print

Save

When implemented properly, parallax scrolling can create a hypnotic effect, drawing users deeper into your site and compelling them to act.

Parallax scrolling has become increasingly popular in web page design. Pages that employ it often create an impression of action through clever techniques that utilize page depth, animation, and movement.

Owing its beginnings to the multiplane camera technique developed by early animators in the 1940’s, parallax scrolling was first popularized in the 1980’s as a way to add depth in 2D video games. These day’s though, you mostly hear about parallax scrolling as a way to improve user experience in web design.

It works by having the foreground and background move at different speeds while the user is scrolling. This creates a hypnotic animated effect that can impress, engage, and direct the viewer’s attention toward whatever you desire. This can be extremely effective when attempting to draw attention to on-page calls to action, and parallax scrolling gives web designers an unprecedented amount of control over the flow of user experience. By having images enter, intertwine, and exit as the visitor scrolls, you’re able to create a visual narrative, giving your website a certain storytelling quality that can lull your visitors into a trance.

parallax scrolling

Example of parallax scrolling courtesy OhSqueezy

Advantages

So what does this mean for you? It means that, above all else, applying parallax scrolling can help engage your visitors. Creating a visually pleasing aesthetic with a fancy interface can be the difference in holding on to the fragile attention spans of the masses. This is because the unconventional format serves as an invitation to interact. People will automatically feel more engaged when they’re scrolling (which is an instinctive action) because doing so drastically alters the depth and content of their view. By simply scrolling, they’ve seemingly changed the fabric of the site itself. This creates a feeling of power and significance. It’s a psychological trick that pulls a visitor deeper into your website, by fueling their desire to explore.

Designing your website with parallax scrolling can help to improve all of the following areas:

  • Visitor engagement
  • Holding visitor interest
  • Directing the course of visitor attention
  • Making your site easily navigable
  • Storing all of your content on one page
  • Creating a compelling narrative around your brand

All of these factors combine to create an engrossing user experience. An experience that I’ve opted to describe as hypnotic, and it is hypnotic in a sense. When scrolling through a well-designed web page that employs parallax scrolling, a visitor does give up a measure of control to the web designer. Much like a roller coaster, they are along for the ride until they’ve reached the destination. A destination that’s predetermined by you, the designer.

Disadvantages and Solutions

There are some concerns with parallax scrolling that need to be addressed. In particular:

  • Page load times
  • Mobile viewing
  • Horizontal movement
  • Search Engine Optimization
Page Load Times

Because sites that have parallax scrolling often pack a lot of their content onto one page, things like animation and layered imagery can result in longer intervals between clicking and loading. This wouldn’t be a problem, except that visitors are notoriously impatient while browsing. If a page is taking too long, it’s often a signal that whatever is content it contains isn’t worth the actual time it takes to view.

As with every web design choice, there are pros and cons to implementing parallax scrolling

To circumvent this problem, it’s smart to keep your pages somewhat minimalist. The more animation, layers, and content you add to your page the slower it will be to load. So in order to cut down on the load time, you’ll need to avoid an overly busy interface. Doing so will free up those precious seconds while your visitors decide if they want to stick around for the pay off or not.

Mobile Viewing

Parallax scrolling does not play well with mobile technology. If you’re investing in a parallax enabled page, you need to have a separate mobile optimized site in place, or at least a mobile application in lieu of an unresponsive and ineffective mobile site.

Horizontal Movement

This is just a personal preference really, but many users find it odd when they scroll downward and the page moves horizontally. It can be an unexpected and unwanted phenomenon. That being said, you won’t please everyone all the time, and many users don’t mind horizontal scrolling in the slightest. So use your best judgment as to whether or not this is right for your site.

Search Engine Optimization

Many have claimed that parallax scrolling pages force you to take a hit on your SEO page rankings and subsequently your organic traffic. This is certainly true to a degree. Having one page rather than several means that you’re looking to rank for all your keywords on a single page. This will be a lot harder than ranking for one or two on multiple pages. Not only that, but you won’t be able to update your site’s content as often with fewer pages to work with.

Still, it’s not all hopeless. Parallax scrolling sites are magnets for back links. They increase page views and page view intervals. Also the unique design can escalate overall traffic, and as we’ve mentioned the main advantage is improved engagement. With more engagement, comes more social media sharing, which has a direct effect on page ranking.

Effective Examples of Parallax Scrolling

As with every web design choice, there are pros and cons to implementing parallax scrolling, so it’s a good idea to check out what a successfully integrated design might look like. Take a look at the following 5 examples to see what’s possible with parallax scrolling.

  1. A map of the history of Mario Kart
  2. The Smokey Bones Restaurant site
  3. A site advertising a music festival called Beer Camp
  4. Web design firm, Unfold’s site
  5. A site selling bicycle designs and prints

Parallax scrolling is not all that difficult to implement—either by tweaking code to achieve this effect or using jQuery plugins—and it makes for a uniquely hypnotic user experience.

 

Image of optical illusion courtesy of Shutterstock.

post authorZack Rutherford

Zack Rutherford, Zack Rutherford is a freelance copywriter, with an invested interest in UX and web design. A combat sports enthusiast and poetic soul, Zack endeavors to create beauty through syntax, sentence structure, and the liberal use of hyperbole. Follow him on Twitter (@zack_rutherford) or visit his website (Zackrex.com) to read all of his innermost thoughts.

Share on twitter
Tweet
Share on linkedin
Share
Share on facebook
Post
Share on reddit
Share
Share on email
Email
Share on print
Print

Related Articles

Building digital products for the web’s next billion users
  • Connectivity issues are further inflated by accessibility gaps. This, in turn, undermines user experience and creates obstacles for the wider use of digital products.
  • When designing for users, it’s worth considering such issues as poor connectivity, accessibility constraints, levels of technological literacy within different countries and cultural barriers.
  • In order to satisfy the needs of the next 3 billion users, it’s vital to build inclusive and accessible products that will provide solutions to the critical problems the next generation will face.
Share:Building digital products for the web’s next billion users
The Liminal Space Between Meaning and Emotion
  • To innovate well is to search for meaning behind the innovation first. This requires investing time into discovering what users need and think of unique ways to serve them and better solve their problems.
  • Emotions are widely misunderstood in UX design and often manipulation is used to predict user behavior. However, a much better approach to UX design is storyscaping, which aims at empowering users, rather than controlling them.

Read the full article to learn more about liminal space and how to apply this thinking to your design.

Share:The Liminal Space Between Meaning and Emotion

Stop frustrating your users. Invest in notification strategy instead.

The UX of Notifications | How to Master the Art of Interrupting
  • As part of UX, notifications are key to leading the user to a better interaction with the product. Therefore, notification strategy should have a central role in UX design.
  • A good starting point is to create a user’s journey map and identify major pain points. This should serve to understand when and where notifications might be of help, rather than create confusion.
  • It’s a good practice to use a variety of notifications and provide the user with opt-outs so they don’t feel overwhelmed.
Share:The UX of Notifications | How to Master the Art of Interrupting

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and