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
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.
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.
2. Mom on the go needs more eco-friendly cleaning supplies.
3. 20-something female looking to splurge on a designer purse.
4. Elderly male looking to restock his Keurig cartridge supply.
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.
Tips & Examples
Use it sparingly – pick a technique and stick to it.
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
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
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.
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.