The Parallax Effect in eCommerce

BlogHeader-Oct2014

You can’t argue that parallax web design is #trending. Parallax is a technique where content is layered and designed to work and move together. It gives the illusion of a background, middle, and foreground which can move vertically or horizontally showcasing the illusion of depth.

This nifty scrolling effect has opened the doors for creative thought with movement in web design. It creates a new interactive experience for users which is not only visually effective, but also intuitive.

As parallax continues to grow in popularity, many merchants are trying to integrate the technique into their eCommerce sites. Although it’s visually captivating, it isn’t always a good fit for online shopping. Thinking of adding parallax to your eCommerce store? Here are some things to consider…

Related: 10 Product Pages Worth Swooning Over

Conversion Comes First

ConversionComesFirst
Don’t use technology for the sake of it. Just because you have new techniques available to you, doesn’t mean you should use them. Keep focus on what matters – the user interacting with your business. Don’t overcomplicate your site with distracting effects that give little value to your shoppers. It’s important to ensure your products shine through and user experience is at the forefront making purchases simple.

Related: UX Design of a Mobile Off Canvas Mini Cart

Know Your Product, Know Your Audience

Parallax has the ability to create beautiful visual experiences, but that doesn’t mean it’s always effective. Let’s create a few scenarios to illustrate this:

1. Teenage male interested in purchasing a newly released video game.

  • Tim is pumped about the release of the new PS4 game all his friends have been talking about! On release day he navigates over to their site where the web page fades to black, the sound of rain is heard in the distance, and as he scrolls the hero of the story emerges from the darkness. High definition moving graphics lead Tim through the back story of where this hero came from and why he seeks vengeance. As the scrolling comes to an end a simple “Buy Now” button fades in.
  • Since video games are an interactive visual experience, it’s logical that their website would reflect this. A parallax story can create emotion and anticipation for what the gamers have in store.
  • 2. Mom on the go needs more eco-friendly cleaning supplies.

  • Brenda is frustrated to realize she’s used the last squirt of window cleaner… and the sliding glass door is covered in puppy prints. She has to be out the door in 10 minutes to get the kids from school. She pulls out her iPad and hits her bookmarked website for cleaning supplies. No time for navigation and drop downs, she types the name of the window cleaner in the search bar. A listing page displays and she intuitively hits the buy button before running out the door.
  • A lot of people use eCommerce to purchase their essentials. They are repeat customers and don’t need to be sold on how fabulous your products are. Brenda would’ve been extremely frustrated if she had to scroll down a long page to purchase something she’s already decided she needs.
  • 3. 20-something female looking to splurge on a designer purse.

  • Emily wants a new purse… just some random girl named Emily, ahem. She is very conscious of her money and has saved for a couple months to purchase a designer clutch. Emily knows there are a lot of options and wants to make sure she does her research to find the perfect one for her. After surfing numerous designer sites she hits her first parallax experience. A full width image showcases a woman elegantly perched on a yacht, a black clutch tucked under her arm as a handsome sailor looks on. As Emily continues to scroll the focus shifts to the intricacies of the purse’s stitching. The soft texture in the saffiano leather and the beautiful pattern lining the inside. As she reaches the bottom of the page she knows this is the one for her. A simple drop down allows her to choose the colour she wants and she adds the item to her cart.
  • This parallax experience leverages model photography to build lust for a lifestyle associated with a product. Since Emily couldn’t hold the purse like she could in-store, the website did a good job of showing the materials, intricate details, and multiple view points allowing her to have a good idea of what the purse will be like. Since this is a big investment she needs peace of mind knowing that she’s receiving a high quality product.
  • 4. Elderly male looking to restock his Keurig cartridge supply.

  • Bill notices his Costco sized box of coffee cartridges are running low. Since he can’t bear a morning without his caffeine fix he needs to act fast! Since he’s unable to make the trip to Costco, he decides to purchase them online. Bill visits the website from his desktop computer and carefully navigates through the header to find what he’s looking for. He lands on the product page and does a quick read to ensure this is the coffee he likes and it will fit with his machine. He selects his flavours, chooses the largest quantity from the drop down and checks out satisfied.
  • Bill is willing to spend a decent amount of money stocking up on coffee, but he doesn’t need to hear about where the beans came from or how the cartridge was designed. He’s interested in the configurables – what flavours does it come in? How many are sold in each pack? And how long will it take to deliver? Bill takes his time seeking factual over fancy. A parallax experience would likely be overwhelming, confusing, and lack the answers he’s looking for.
  • Moral of the story?

    Generally speaking, parallax works best for high-end items, smaller inventory, and products which take consideration to purchase. It also works well for products with a visually designed component or a story behind them. Parallax is less effective for low-cost, high SKU stores selling impulse-buy products.

    Consider the Risks

    Parallax succeeds in giving your site a wow factor, but it doesn’t come without drawbacks.

    SEO: The structure of a parallax site can make it more difficult to apply standard search engine optimization tactics. However, it’s possible when you have knowledge of the proper techniques to apply.

    Heavy Loading Time: These sites are complex in interactivity and extremely media heavy in terms of imagery and video. Unfortunately those precious extra seconds can significantly affect how long a visitor will stick around. Google also uses a load time algorithm to dictate search engine optimization.

    Mobile Optimization: Parallax effects do not translate well on mobile. The recommended strategy is to disable the transitions and display static blocks of content.

    Flexibility: Parallax experiences are complex, time consuming, and expensive to build. Retailers are constantly reinventing themselves through seasonal promotions and new product launches. These sites are much more difficult to update on a regular basis.

    Related The Checkout Debate: Multi-Step, One Step or Accordion

    Tips & Examples

    Use it sparingly – pick a technique and stick to it.

    Example: Protest
    Tip1
    The Protest website uses it’s homepage to display full width lifestyle photography with a parallax scrolling effect. As you move from section to section the transition effect and call to action buttons remain consistent giving it a beautiful and polished look while remaining intuitive. To exercise caution they have provided a navigation bar on the left ensuring users know where they are and where they are going. Once you navigate to a listing page or product the format is standard eCommerce without any flashy scrolling effects. With limited use of parallax, Protest is able to display a cutting-edge design while remaining easy to use and allowing their products to shine through.

    Let Parallax tell a story.

    Example: Peak Performance
    Tip2
    If you’d like to convey emotion and attach a story to your product, parallax is one of the best options out there. One great thing about parallax is it gives merchants control of the sequential order users consume their content. This means you can lead them to a direct action like “Learn More” or “Buy Now”. Peak Performance have created a beautiful landing page leveraging the knowledge they have of their audience. Knowing their customers are adventure seekers they’ve built an experience that would pique their interest without any aggressive sales tactics. The story draws the user in with relevant content and eventually makes the connection to the product. Some eCommerce sites are using the parallax story technique as a landing page which is linked from the home page or shared through social media. If you were to visit the Peak Performance home page you would find a more traditional eCommerce layout. It’s a nice way to use parallax without compromising the easy shopability of a standard layout. If you build a unique, content rich landing page it is more likely to be shared between users.

    Provide pointers when things get complicated.

    Example: Fight 4 Pride
    Tip3
    All the scrolling, overlapping elements, unexpected movements, and direction changes can be confusing and overwhelming to users. If you want to take the parallax plunge but are concerned about user experience, provide lots of visual direction. These cues could include a side bar with dots indicating where you are, a sticky navigation which updates as you reach new sections, or small animated arrows indicating which direction you should move to next. Fight 4 Pride has a lot of complex movements happening so they’ve implemented subtle techniques to guide the user experience. When you first reach the site there is an arrow at the bottom indicating you need to scroll to see more. The main banner image is a slider and the design has large arrows on the left and right to indicate this. They also change the cursor when you hover over this section indicating the direction change. The main navigation is easily available at all times and interesting hover techniques spell out what clicking each element will do. Although there is a lot of movement and numerous animation techniques, I never feel lost on this site.

    To Parallax?

    Parallax is a fantastic engagement tool, but it’s not necessarily suited for eCommerce. Know your audience, know your product, and put user experience first before implementing Parallax on your online store. I hope this post will help you determine if this is the right direction for your online store strategy.

    Related: Improve Site Performance 
& Maintenance with OOCSS, Sass & Style Guides