Parallax Scrolling: Why Your Website Needs It (Part 1)
This is part 1 of the 2-part UX design piece about parallax scrolling.
If there is one thing that strikes fear in the heart of every ecommerce site owner, it is the dreaded “back button.” When that button is hit after a few milliseconds of a view, it informs that business a potential customer isn’t sticking around to see what is being offered. There can be many reasons for that back button hit, but it is the job of the web designer to insulate that page from falling victim to a user who is quickly bored. One positive approach to grabbing that visitor and keeping them engaged is with parallax scrolling.
Parallax Scrolling Website: More Than a Pretty Feature
In layman’s terms (i.e. what you might be telling your next client), parallax scrolling is moving background and foreground graphics and images at varying speeds. Those images can scroll horizontally or vertically. The result is a kind of “living” web page that becomes active. It virtually pulls in the user and compels them to “play around” with the page to see what’s happening. Before you know it, they become a customer, and the champagne corks are popped.
To make your pitch for parallax scrolling, consider the following.
Different Ways to Present Your Product
Parallax scrolling allows a company to present their products in bold, visionary presentations. It is as close to 3D without putting on the glasses. A terrific example of this can be found on Bagigia, a unique site for an equally unique purse. The landing page scroll provides a quick introduction to this bag by taking the user on a spinning 3D tour. The fun zipper scroll totally plays into the thematic elements on the page.
Parallax scrolling also allows for an innovative way of demonstrating a product by allowing the user to become their own guide.
Kanbanize features a simplistic and darkened image behind a scrolling foreground graphic, encompassing a visual map of their applications. This type of feature is best fit for a narrative setting and has direct correlations between each image. Their audience can see the benefits of the services without needing to read a ton of literature. Visualization and representation is key in design parallax scrolling features.
Another example is Ben the Bodyguard. This is a mobile app designed to keep your personal data persnal. The site’s avatar is Ben, a French bodyguard who scrolls through city streets where danger lurks around every corner. At every stop, Ben shows you the benefits of his app. Part video game, part film noir, this type of parallax scrolling is a perfect example of how you can tell a story to present your project. Users will be pulled in and will want to scroll to the end to see how it all turns out.
Reduced Bounce Rate
As mentioned above, a high bounce rate indicates the website is failing. Those numbers are fed into the various search engine algorithms, which in turn can tank a site’s ranking. What works with parallax viewing is that it comes with a built in bounce rate buffer. By virtue of the page being a single entity that requires time to scroll all the way to the end, users are sticking around. Even if it is for a seconds longer than a normal page visit, it will have a net positive result on the bounce rate.
Think of it as watching your favorite television show on demand, commercials included. Savvy network programmers remove the “fast forward” feature on playback. That virtually traps the viewer into watching the commercials. Hopefully, your amazing parallax scrolling designs will never make a user feel trapped, however.
Great Potential for Social Sharing
The hope of any webpage is to get noticed by active viewers. The second goal would be to get those viewers to “share” that page. Parallax scrolling helps increase the potential for the “cool factor” of a given website. If the viewer has a fun experience, then they are more apt to hit one of those social media icons to share the page. BTW, you are including social media icons for sharing on every page, right?
What Doesn’t Work With Parallax
Is everything “rainbows and unicorns” with parallax scrolling? Not exactly. There are some issues you should be aware of that could cause a few bumps for the user. For one, parallax scrolling designs take a bit longer to load. We all know how patient a web surfer can be — which is not very.
Also, parallax scrolling designs aren’t the friendliest designs for mobile applications. Plus, the bugs of integrating SEO haven’t quite caught up to parallax scrolling yet. Clearly, there are design wonks working on these issues, but you should be aware of them and make your client aware as well.
Is There a Parallax Scroll in Your Future?
In your next pitch meeting, you could come across as the smartest person in the room by asking, “Have you thought about parallax scrolling?” It sounds very cutting edge, but it also might not be right for every client. However, adding the ability to incorporate this design element to your portfolio, as well as considering other important factors for a successful website design could certainly move you to the head of the class. What are you waiting for? Start scrolling.
Author’s Bio:
Lexie Lu is a designer and blogger. She is always researching trends in the web and graphic design industry. She writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.
