In the struggle to engage the ever-shortening attention span of the internet users, web designers have created a variety of techniques intended to catch and hold the users’ attention. One such technique is the parallax scroll, which gives the viewer the perception that a site is 3 dimensional by moving the background more slowly than the foreground when they scroll down the page. Parallax scrolling is a fun and modern way to captivate users when they arrive at your website, pulling them deeper into the content and extending their browse time. Still, with this particular effect, a little goes a long way.

A well done parallax scroll can do everything from enhancing a page’s aesthetic appeal and pique a customer’s interest to telling a story and taking the user on a journey through the site’s content. Conversely, a poorly executed and overly clunky parallax scroll design can lead to slow page load times, user confusion, frustration, and abandonment.

One site that employs parallax scrolling particularly well is the US homepage for Rimmel London, as the page loads quickly and the parallax scrolling effect is engaging, while simple enough to not overwhelm the user. The Rimmel homepage highlights featured products and captures users’ attention with a subtle parallax effect, encouraging them to explore deeper content. Individual makeup items glide down the page as the user transitions from one section to the next. As the user scrolls, the content seemingly slides into its place within the section.

 

Users can easily keep track of where they are on the page and jump to each page section using the position tracker. The tracker’s location next to the scroll bar makes it easy for users to find.

 

 

 

Additionally, the top navigation menu persists throughout the scroll to each new section, allowing for easy access to Rimmel’s products and offerings. The prominent Rimmel icon provides users a quick way to return to the main homepage section if they find themselves lost.

 

 

 

Taken together, these elements create a site experience that encourages users to interact with the content and click to learn more about the featured products.

 

Here are some things to keep in mind when considering the parallax scroll for your website:

Advantages	Disadvantages	Best Practices
Makes the site appear modern and sleek Engages the user and keeps them on the site for longer Drives users to explore clickable content Makes the site memorable, leaving the user more likely to return in the future Positively impacts brand image by giving the impression that the company has invested time and money in a unique website experience	Users on slow connections can experience difficulty when trying to scroll quickly, causing the perception of jumpiness Slow page load time is frustrating even before users explore the site Can be confusing to users who do not know where to go A lack of direction makes it difficult to know where to start	Less is more: a little bit of the parallax effect is enough to capture the users’ attention, while too much can be overwhelming and impact page load time Indicate a scroll to start or click to start Keep track of where users are with a tracking bar Allow users to navigate directly to each content section without having to scroll

 

If you are interested in finding out how parallax scrolling impacts your website’s user experience, eVOC recommends In-Person Usability Testing to evaluate customers’ ability to perform key tasks on your site.