Parallax with a Purpose
May 24, 2012
Headlines like “20 Mind Blowing Websites With Parallax Scrolling” or “23 Stunning Parallax Scroll Sites You Have to Know” always make me wary. When elements of a successful design – strategy, content, visuals and technology – come together to create a seamless user experience, no one contributing element is the star. Instead, each element should complement without overpowering the others, like flavors in a dish.
But just like one overly strong ingredient can wreak havoc on your taste buds, parallax effects can overwhelm a site visitor when the purpose of its presence is unclear or when it overpowers other crucial elements. When implemented as part of a plan to reach predefined goals, however, the results are worth the extra effort. Here are some examples of what happens in both scenarios.
Using Parallax to Reach a Goal
I’ve said before that the best user experiences are not always the flashiest, most remarkable or implemented with the newest interactive technology. But they’re the best possible solution for a specific user in a given situation with a unique goal to reach.
In the right context, and as part of a greater strategy to aid users in exploring content and completing site tasks, parallax effects can complement the site content by creating a more immersive experience.
In the following three examples, parallax has been effectively used to achieve a perceptible goal.
1. Goal: Drive users through content.
Ben the Body Guard
The parallax scroll effects in this site create a scenario-based story to explain the value of the service being offered. Users walk with the third party character through various situations that are interesting enough to pique the curiosity of users and keep them scrolling through the entire experience. The story ends seamlessly in a call-to-action for users to visit the app store to buy the product, or submit contact information if they are not ready to commit.
2. Goal: Differentiate a product’s value with a spatial metaphor.
Borjomi’s The Deepest Site
Borjormi’s marketing microsite clearly ties the parallax experience to a purpose by using a spatial metaphor to differentiate their product’s value from competitors’ products. By participating in the 8,000-meter-deep scroll, users experience first-hand how deep the source is. Finally, there is payoff for participation. Scrollers who make it to the depths of the Borjormi source are rewarded with social recognition: names are “etched” into a plaque within the depths of the site.
3. Goal: Create content hierarchy.
While over-sensitive, the Ascensión Latorre parallax serves a purpose: to create a hierarchy that allows for easier consumption of content. Through parallax, an architecture is created that allows users to graze through top-level content, easily bypassing deeper information. The vertical scroll provides the surface-level overview, while horizontal navigation provides a “deep dive” if more information is desired.
Parallax for Parallax’s Sake
In contrast, the results are disorienting and frustrating when parallax technology is used with no apparent aim: Elements such as load time, content clarity and user expectations are often sacrificed.
In the next three examples, no clear goal is achieved with parallax. The effects have been implemented at the cost of other important elements that should be part of the greater user experience.
1. Sacrificed: Consistency and Familiarity
Consistency is one of the keys to a better user experience. A user should be able to predict what will happen during certain familiar situations and quickly pick up on the results of their interaction on an interface through external feedback. On the Beetle site, however, the interface reacts differently to the same action – downward scrolling – depending on where the user is within the site. First, scrolling launches a mandatory intro animation. Later, scrolling moves the scenery both vertically and horizontally. At one point, attempting to move to the next section of content by scrolling does nothing but wheel a menagerie of whimsical beetles across the screen. By ignoring conventions and foregoing consistency, the site creates confusion and frustration.
2. Sacrificed: Content
Wolff Olins Game Changers
Parallax scrolling adds no perceivable value to the Wolff Olins Game Changers site that was created to promote downloading their free report. The massive, seemingly irrelevant background graphics obscure the site content – headline teasers for the report – almost to the point of being unreadable. The lost readability coupled with an absence of visible cues to show the user where he is within the scrolling experience create disorienting results. It almost seems as if the site creators have made it as difficult as possible for a user to actually make it to the end of the site to download the report.
3. Sacrificed: Reward
Lost Worlds Fairs: Atlantis
While this site deserves kudos for its graphic design and use of parallax to create a journey metaphor, these things alone don’t make a successful experience. For users who give precious web time and attention to this site, the end is one giant letdown. Unlike the Borjormi site mentioned above, there’s no payoff for participating. Users scroll through 20K metaphorical leagues of promising signs such as “You’re Almost There” and “The Ultimate Water Destination,” only to get nothing in return. While the site successfully builds curiosity to keep the user engaged, we’re left hanging and unsatisfied at the end.
I’d love to bore you with a snappy conclusion here, but I think this description of flavor combinations from Kate’s Global Kitchen sums up the role of parallax within a greater experience with a nice food metaphor:
“More ingredients do not mean more flavor. They just mean more work. A very skilled chef can combine seemingly different ingredients and sometimes produce a superb dish, but in my experience, all the great chefs agree: there is no replacement for simplicity. Knowing the right combination of just a few flavors, ones that complement and contrast, is more skillful than amassing many ingredients that overwhelm both each other and the palate.”
Don’t overwhelm your users. What story are you trying to tell with your experience? Does parallax overshadow that story, or does it help tell it? Does it complement the content, or does it kick it off the stage?