What are the UX benefits of parallax scrolling sites?

In a recent blog post I shared design expressions to listen for in 2013, a list that included parallax scrolling. As parallax scrolling websites have started to become more mainstream, I have become interested in the user experience of these sites and have noticed many strong UX benefits of this design style.

To recap, parallax scrolling is when layers of the website move at different speeds as a user scrolls through the page. It can be very powerful in leading a user through a narrative. This style has been around for awhile, most notably in video games.

gif

(Gif from abetteruserexperience.com)
User Experience Benefits:

Gives the user more freedom
This style also takes cues from mobile touch screen design, in that it gives a user slightly more “free reign” to navigate through the website. Instead of just vertical scrolling, a user can choose how to experience the website.

Entertains and engages the user
Parallax scrolling adds a level of entertainment to website design, especially when it involves subtle animation or surprise.

Allows a designer to lead the user through the website in a meaningful way
With parallax scrolling, a designer can lead a user through the experience in a guided way. Instead of depending on colors and scale to draw a user’s eye across the site, the movement can guide the user through the site.

Important UX Considerations:

Overall, the site still needs to be usable. It should be clear how to navigate through the site, and the parallax scrolling effect should add something meaningful to the design. Employing the technique solely because it seems cool may actually work against you if it is distracting; it should add to the website narrative.

These are a few of my favorite Parallax Scrolling examples:

1
2
3

 

This entry was posted in Customer Experience, Technology and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>