Product Showcasing
Parallax Do’s and Don’ts

Here are some great examples of websites that nail the Parallax effect, and some that fail to hit the mark.

Parallax is a relatively new concept. It lives in the world of abstract ideas and is only applicable in the abstract world; so it is no wonder that most people do not even realize that it exists or know how to utilize it to get a desired effect. In this article, We will be explaining the Do’s and Don’ts of Parallax. The end goal is to make your customer’s experience memorable and inspirational; you are trying to invoke the emotion of desire. See below all the websites that do it wrong, and then see the websites that do it right.

Do’s:

Contrasting Colors:

Do use contrasting colors between Parallax screens. The bicycle company Cyclemon is an expert at choosing colors that complement the image and the following page. Always remember, you can left click and inspect any website to learn more about how they coded their parallax:



Discovery of a product:

Do focus on the experience of learning about a product, not just the product itself.
Riiot Labs is a website that uses Parallax scrolling extremely well. As you continue down the page, it seems as if the content is opening up for you, kind of like a pop-up book. The Bubbles over the product is not a Parallax effect, but it is still really freakin cool. It is an mp4 video playing through a hidden video window.

An electric pool analyzer is super boring, but somehow Riiot Labs found a way to make it seem cool. The product by itself would not inspire anyone to buy it over another of equal or lesser value. It is the experience of learning about the product that makes customers want to purchase this device.



Load Times:

Do test your website to make sure it loads quickly. Also, waiting bars suck. If your website needs a loading bar then the content is too complex. You have me for 3 seconds and then I’m hitting the back button; especially if I’m a mobile user. Adidas has a lot of content on this webpage, but they do not have a loading bar, because they know that no one likes to wait. A better strategy is to have the important content, that you do not want coming in patchy, at the middle of the webpage. People will not scroll down until they see the information at the top, so just make that top information more like an introductory image or banner.

Do go to a more secure looking website for the actual purchase of the product. Adidas sells the idea of the product to you on the page below. Then, it takes you to a page with no Parallax scrolling effect. On this page you feel more secure and in control of the purchasing process.



Do everything like Apple. Just everything.



Don’t:


Loading Bars = No Fun:

Don’t make your potential customers wait to see your product. Google says that today more searches are being completed on mobile devices then regular computers. That means that your website is being open on a phone; someone using a phone does not want to wait any amount of time to see your product. If you through a waiting bar in front of their face, they are a lot more likely to hit the back button.

Don’t use the verbiage, “Buy” on your parallax webpage. Refer back to the Adidas website and copy what they do. You want your customer to “learn more” about the product; they will not click the “buy” button if they feel like it is a commitment to purchase the product.
Click here to see the website: lookbook.quechua.com

Use your words..

Don’t forget to tell us about your product… Boombotix looks really cool and I am sure they spent a lot of time on their website adding in the parallax effect. The website is so cool that it makes me want to buy the product even though I know nothing about the specifications of the product.

If you click the buy button, then navigate to a speaker that you want, you can then scroll down to the bottom and hit specs which will give you more information about the device. Do you know how many people are going to click four times following your advertisement to figure out the specs of this cool speaker? A handful at most. Make sure that you add specification (battery life, speaker quality, customer ratings, and tech company quotes) to communicate that your product is legit.
Click here to see the website: Boombotix.com

The people that know how to code Parallax are sometimes not the ones that know how to inspire others to desire a product. If they are a nerd (like me) then they might not see the big picture or understand fully what motivates the average person. So it is important that you, the business owner and product developer, understand your end goal when implementing parallax into your website. I hope this Do’s and Don’t article gave you some good examples of what to do and what not to do when utilizing Parallax.

Read On!

Don't stop here! Read about how to inspire people to buy your product!

Fuel their desire

In this article, We will explain how to inspire desire in others with Parallax and why it is important. When it comes down to it, who is going to use your product? A person is. So who should showcasing your product? An extremely desirable person. Desire fuels action. In this case, the action of purchasing your product./p>

Parallax Product Windows

If you haven't read this article, catch up here!
In this article, We will explain how to utilize the Parallax Product Window and Parallax effect to improve your customer's experience when discovering your product.
The experience of learning about a product is just as important and the product itself.
Make your customer experience one of a kind with Parallax Product Windows.