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

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

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.

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.

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.

ABOUT THE AUTHOR(S)

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.

Add new comment

Login via:

Your name *

E-mail *

The content of this field is kept private and will not be shown publicly.

Comment *

Because of problems with spam comments, HTML in comments is not permitted. URLs are allowed, but they will not be rendered as click-able links.

Comments

Caleb

July 9, 2014

Although i don't do parallax sites much, I don't believe you need to take a hit to your SEO. If you know your PHP and Ajax with Javascript, you can put all of your info on one page, but if the user does not have javascript, fallback to a different layout with different pages. Google i believe sees it this way.

You are the second article I've read saying that parallax scrolling is bad for SEO because it = one page site. Why can't you have it on your main page, and still have other pages that don't? Why must all your content go on one page when using it?

(something is wrong with your site, i tired to login via twitter and G+ and it didn't work after verifying on both services.

As you mention, parallax scrolling isn't for everyone, which heightens the importance of designing for your audience. I can see its place for sites with a narrative, or trendy ad campaigns that allow alignment with other media. But generally I would read hypnotic as distracting. And this is yet another case of just because we can, doesn't mean we should.

I can see why you'd think of it that way. The definition of a word will always hold different connotations for different people. I personally do like parallax sites, but in many cases it just wouldn't be appropriate.

Here is one of my favorite parallax website: http://graphicnovel-hybrid4.peugeot.com/start.html
A some point it switches from vertical to horizontal scrolling, but I like it. It surprises the user I believe, yet helps with the storytelling process.

Hi Zack,
Great article. I noticed you implied that parallax scrolling is a one page design technique in the article above. Parallax scrolling is a design technique however it is not limited to one page. Parallax Scrolling and SEO are 100% compatible. Many people are making this assumption because most designers use parallax scrolling on one page web design.
Thanks! Carla

More here....mmarley.com/parallax-scrolling-and-seo-are-100-compatible-clearing-up-the-misconception/

Hi Zack,
Thanks for getting back to me. This article was published yesterday and I really think you will enjoy it. http://www.iprospect.co.uk/blog/featured/parallax-scrolling-and-seo-how-to-use-jquery-to-seo-your-website.html

I submitted an article to Moz called Parallax Scrolling Websites and SEO - A complete tutorial and real examples – Yes they are compatible. I will let you know when it gets published.
Cheers !
Carla