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.
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:
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.