3 Ways To Optimize Parallax Scrolling For E-Commerce Sites.

By Marc Schenker

 May 9, 2014

Parallax scrolling has been an increasingly popular trend in web design for the last few years now. Designers who don’t seize on this technique to create eye-popping sites that also enhance the E-commerce user experience are shortchanging their clients...and themselves! Parallax is the smack in the face that today’s E-commerce sites need.

The problem with many E-commerce sites is that they all look the same. You have a product page, product information, pricing information, images and maybe a video or two of the product. All this information is presented in a static page, which is a huge, missed opportunity. By incorporating this surreal and dreamlike technique of parallax scrolling, designers can bring up the prestige of E-commerce sites in a way that everyone’s going to have to notice.

Parallax scrolling has been an increasingly popular trend in web design for the last few years now. It was popularized only back in 2011 with Nike’s Better World website. Today, though, Nike’s changed the design of its Better World website, yet that was the site that brought this design style to a wider audience on the Internet.

Historically, parallax scrolling isn’t new. In fact, it has its roots in the multiplane camera technique from the 1930s, where it was used primarily in animation. In the 1980s, it was popularized in video games, specifically, the 1982 game called Moon Patrol. This technique is known for producing a visual effect that is characterized by foreground images that move faster than background images. This creates a dreamlike and surreal effect that’s amazingly unique.

Though one of the strengths of parallax scrolling is that it’s simply pretty to look at, it also has functional and practical benefits. One example is in E-commerce. Here are three ways that graphic designers can optimize this technique for clients’ E-commerce sites.

Improves The E-Commerce User Flow.

In E-commerce, it’s all about getting conversions, which is also applicable when you create a responsive website. E-commerce clients want to know that designers have the skills necessary to help them increase revenues. As far as designers are concerned, they’ll accomplish this by how they plan out and construct a product page. This is where parallax scrolling can be optimized to make the product page user flows so much more successful, interactive and fun.

The vast majority of product pages is not parallax scrolling. As such, they force the user to explore the content (pricing, product descriptions, images, videos, reviews, etc.) on their own. The user gets no guidance or that much association in what to do next on the page (read: convert). Users run into a lot of clicking and closing product images and a general disconnect between page copy and images.

The use of parallax scrolling can fix all of this; it’s all in how you design a website. It’s almost like using a storytelling technique of taking the shopper through all of the most important elements on the page as he scrolls down. This will show all the content on a product page in context and even highlight value propositions feature by feature as they pop up on the screen.

Just imagine this: You click on an ecommerce site that you found after searching for TVs on Google. Instead of a boring and old-fashioned product page, you’re greeted with parallax scrolling splendor. As you scroll down the page, you see everything about the product in context, first starting with its image.

As you move down, an appropriate description is highlighted, with specific, important features drifting into the screen from the sides. You scroll down further still, and you notice a video to provide additional context to the product, along with pricing information and a special discount for a limited period of time.

Finally, to complete the user flow, you’re brought to the bottom of the page, where a big and bold call to action “buy now” button is presented in all its glory. You’ve just experienced a parallax scrolling product page, but it’s almost like you’ve just taken in a neat story, and you’re so much likelier to buy, as a result!

For some inspiration on how this could look, check out the parallax scrolling site for Oakley’s Airbrake MX Goggle. Note how everything about it -description, features, etc. - is presented in context and in a highly captivating, storyteller fashion.

Turns New Visitors Into Return Visitors Likelier To Buy.

The stats prove that people who spend longer on an E-commerce site are much likelier to buy. Designers, then, must figure out how to make website design so attractive and captivating that new visitors will want to become return visitors who spend longer on the site.

Here’s how it all breaks down: New visitors to a site spend just over two-and-a-half minutes on a site while return visitors spend considerably longer, at just over five-and-a-half minutes on a site. Naturally, new visitors look at fewer pages per visit as well. They look at just 3.88 pages per visit while return visitors take in 5.55 pages per visit.

When they design a website that features parallax scrolling, designers can prompt visitors to spend longer on the site because they’ll be immersed in the dreamlike effect of the technique. This will inevitably lead them to inspect various elements of a page…which also increases the chances that they’ll come back to the site. When they become return visitors, chances drastically increase that they will also make a purchase.

Check out Rimmel London US’ ecommerce site. This maker of makeup knows that customers will be engrossed by a nifty parallax design and, thus, will stay longer, explore the site and be likelier to make a purchase!

Makes Your Products Pop Out At Shoppers.

Designers have to be ever-mindful of how they present their ecommerce clients’ products and design a website because they want to increase conversion rates. A huge part of that is getting the attention of shoppers by making sure that products stand out immediately. Designers can use this memorable technique to do just that.

Take a look at the site of Bagigia, an Italian manufacturer of hot water bottle-handbag hybrids (we’re not kidding). As visitors scroll down the site to take in the effect of parallax, they’re not only treated to storytelling at its finest, but they also get to see the product stare them in the face from all angles. This naturally causes a huge impression to be made on them because Bagigia has made its product pop out at visitors from the very start.

Encourages Progressive Disclosure.

The master touch of parallax is that it allows for progressive disclosure of information on an E-commerce site. Progressive disclosure is when information—such as product descriptions, images, reviews, etc.—is revealed in easy-to-digest chunks instead of all at once. As you scroll down with the parallax effect, more and more information is revealed, but it’s done in a manageable way.

Research shows that people reading on the Internet simply refuse to absorb a lot of information all at once. The human brain just is not programmed like that, which is also something to remember when you create a responsive website. In other words, even if people liked what they saw and read on your Ecommerce site, they wouldn’t even read much of it due to information overload.

That’s why it’s all in how you design a website to feature the parallax effect: It basically offers bit after bit of manageable content that your shoppers get with every additional scroll down of the mouse wheel.

Sells Your Products’ Benefits Handily.

A huge rule in marketing and, by extension, E-commerce is that businesses have to point out the benefits of their products to their customers. Doing so ensures that your products sell with greater success. Fortunately, to create a website with parallax is just the ideal way to highlight the various benefits of your products on your site.

From the user experience standpoint, every new section of the page that features elements dropping down or sliding in from the side is the perfect opportunity to showcase what benefits your products will provide to your shoppers. Your shoppers get to view this information in a standalone way for each section, so that they’re also that much likelier to retain the details of your products’ benefits.

Adds An Interactive Experience.

Another way that parallax scrolling suits E-commerce very well is the interactive nature of this technique. Have a gander at the website for Soul Reaper (it takes a while to load), which is a digital comic book. The way it works is that you interact with the site by scrolling down to read more of the comic book—so it’s like turning pages, except you’re doing so by taking advantage of the parallax effect.

Just imagine this highly imaginative effect on your E-commerce site! It’s a perfect means of encouraging your readers to interact with your product pages by getting them to scroll down in order to reveal more information about a product they’re super-excited about. This can involve pricing information and availability details to product specs and anything in between.

Engages Your Shoppers, Which Turns Into More Sales

Customer engagement is big for those shopping in the E-commerce world. Don’t believe me? Then just take a look at this Harvard Business Review analysis of what drives customer loyalty in E-commerce companies. The study determined that online shoppers demand customer engagement as a key feature that will keep them around for longer; E-commerce companies that already do well in this regard have better company stock performance (read: more buyers) than those who don’t measure up.

Customer engagement usually involves asking your shoppers what they’re passionate about…and then reflecting that passion in specialized content geared toward those interests. Again, parallax comes in handy here, so remember that when you create a website.

Imagine the use of the technique as a way for any E-commerce company to conduct a survey of topics its shoppers care passionately about. After a successful conversion, your company would survey shoppers about various attributes (luxury, fashion, health, etc.) as they scroll down the page. Then, you can use their answers to gear specialized content to their tastes.

Lets Your Shoppers Examine Products As If They Were In A Store.

The thing about the E-commerce website design is that it doesn’t really let you try what you want to buy, as you’d be able to do in a regular brick-and-mortar store. For instance, let’s say that you see an outfit that you really want to buy. You obviously can’t try it on over the broadband connection! That may change a bit, thanks to the wonders of parallax scrolling.

On the parallax site of KRYSTALRAE, shoppers can actually “dress” up a model to get a better sense of what it will be like to wear the outfit that they want to purchase from the site. As shoppers scroll down the site, the clothing on the lone model in the center of the screen changes, thereby handily showing shoppers what various outfits could look like on themselves.

Helps Bring Shoppers Right To Your Call To Action.

Calls to action significantly help to increase conversions. That’s a proven fact. That’s why so much research is devoted to crafting and designing the right kinds of calls to action. Incidentally, if you’ve created a responsive website, that’s so much more important. Still, sometimes, the placement or size of calls to action can be mishandled, and as a result, conversion rates will drop.

The parallax technique is the perfect solution to shoppers failing to obviously see your call to action buttons. By the time shoppers finish the scroll, they will be lead right to your call to action, which means they can’t miss it. The website of Tinke, a wellness-monitoring gadget, epitomizes this benefit of parallax.

As shoppers scroll down the homepage, they’re treated to a description of the gadget’s features and pros, but at the very bottom, they’re prompted to “buy” as the call to action pops up. Genius.

Directs Your Shoppers’ Line Of Sight.

Getting your shoppers to see the important elements on an E-commerce site is super-vital. You don’t want them to miss important details, information or calls to action, especially if you create a responsive website. Parallax scrolling is ingenious when it comes to helping guide the line of site of your site visitors to the stuff that matters.

Let’s say you want shoppers to be aware of important discounts or one-time-only deals. Or how about news about hot products that are selling like crazy? Parallax scrolling can direct the attention of shoppers to these elements.

On the website of Guy Vernes, the Dutch street fashion house, a flying character flies in from the left as you scroll down, directing your line of sight to the “about” snippet of this street fashion house. Without this effect, many shoppers would likely miss it.

Parallax And E-Commerce: A Perfect Fit.

Based on these noteworthy examples, it should be quite obvious that E-commerce sites can benefit a great deal from the parallax effect. The various aspects of site design that are optimized include storytelling, the length of time that visitors spend on the site and various pages, and how strongly an impression is made on said visitors. In short, parallax delivers in a huge way for E-commerce because it’s unique, new and very creative to say the least.

Designers should pay heed to this news, as they can offer ecommerce clients a very interesting and effective way of increasing sales and revenue. When the Internet is so saturated by traditional site design, parallax scrolling is an absolute breath of fresh air in a sea of commonness. It can be harnessed by creative and intelligent designers to make clients’ ecommerce sites stand out from the rest.

How do you feel about parallax scrolling in E-commerce? Tell us all about it in the comments below! 

Blog  /  Web Design  /  Parallax Scrolling

Comment