Usability Best Practices for Parallax Scrolling

Usability Best Practices for Parallax Scrolling

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