UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 1170 January 13, 2014

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.

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.

ABOUT THE AUTHOR(S)

User Profile

Zack Rutherford is a freelance copywriter. He contributes web content and especially snappy articles to TemplateMonster and Webydo. 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

Comments

24
28

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.

63
79

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.

87
85

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.

77
77

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.

81
84

Parallax scrolling is so hypnotic in part because it's simply a feedback loop. It is the site providing constant feedback to the user with every interaction they make within the site.

51
62

Well, plain-old normal scrolling already covers this, doesn't it?

67
89

Couldn't have said it better myself, James. As I stated within the article, engagement is the goal, so the inherent dynamism of parallax scrolling serves as a reward to viewers who decide to interact.

75
67

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.

75
78

That's actually one of the first sites I came across when I began my research for this article. And I completely agree, the moodiness and the stellar artwork really are a joy for viewers.

74
79

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/

Here is a board with SEO friendly parallax scrolling websites http://www.pinterest.com/ecumbre/seo-and-parallax-scrolling/.

Basically there are 3 techniques to merging SEO with parallax scrolling.
1. Parallax Scrolling on multiple URL's and on a SEO architecture
www.kickpoint.ca
www.posicionamientowebenbuscadores.com (I know long URL but interesting site)
2. Parallax Scrolling on homepage and regular SEO architecture
www.spotify.com
3. PHP JQuery fix - http://www.awwwards.com/seo-optimization-for-parallax-scrolling-websites.html

This comment is meant to be completely constructive. Many people confuse the web design technique called parallax scrolling with one page web design.

80
76

Thanks for the feedback, Carla. I'll have to take a look at these sites and reassess my approach to that particular facet of the subject.

83
75

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

85
77

I look forward to reading it. :)