Parallax, the new „Click“?
Recently I read an interesting article about Parallax Scrolling and how it is captivating your users. My first initial thought was: „Ah right, that thingy….I thought that was a fad…“
First of all, I am a huge fan of evolving interfaces, design patterns and technologies that help increasing usability or changing the way how we experience a product, brand or even a webpage, app or mobile site. I am pretty sure that the article I have read is mainly aiming at the way how we approach the process of creating and designing great and relevant interfaces. I think it is really important and I agree that we have to get away from that old static thinking when we plan and work on user interfaces and should focus more on user flows and transitions. And parallax scrolling is surely one of these things that smoothed the way.
But as it is with all technologies, make sure you understand when and how to use things like parallax scrolling. It is too general to say that scrolling is the new click and is captivating all of your users. Not every website will benefit from trends like this, in fact parallax is not even beneficial for websites where users want fast informations. I don’t say don’t use it but keep these things in my mind when you plan with it. So far there were hardly any insights on how users are interacting with content displayed in a parallax mode and how we should arrange it in order to make sure people find informations and get the story as fast as possible. We couldn’t even say if people really scrolled or were still using the navigation at the top of the page to „jump“ to another section.
Until last year we lacked insights like this up to the point where Dede Fredrick from Purdue University set up a study of his own and tried to figure out what the effects of parallax scrolling on user experience and preference in web design are. He designed two hotel websites similar in every way, from content to color scheme, except that one featured parallax scrolling and one didn’t. He intercepted 86 people, brought them to a computer and engaged them either with the standard site or the parallax site. Frederick’s survey focussed on five areas of the user experience: usability, enjoyment, fun, satisfaction and visual appeal. And he was sure that the parallax site would be mind-blowing. But as it happens, the parallax site was only superior in one sense – fun. None of the other measures indicated a significant difference in user experience, parallax didn’t even edge the standard site in questions about visual appeal. Quite contrary to the standard site he also discovered one critical disadvantage of the parallax site: test participants who suffered from motion sickness found the style disorienting.
I am also sure that future test will go beyond the general experience of users and how they engage with parallax scrolling. Tools like eye-tracking or content-related questions, for instance, could help designers recognize how to set up a great experience and determine whether parallax interferes with the user’s ability to get the story. „Right now“, says Frederick, „people have not understood much about parallax scrolling and they are using it in all different context.“
Personally I think it is still a fad with a future but it might help us to think more carefully about how we set up great interfaces. If you want to use it make sure you are aware of the context in which parallax is applied. Pages with a lot of text are still not the best environment for parallax and could disorient users whereas pages with images could be a better fit.
Apart from that there are some other „issues“ that could help you to decide whether you want to use it or not.
I only state the most important…(in my opinion)
1. SEO and Parallax
Heading Tags (H1) are key to search engine ranks. They define a page hierarchy, divide copy and differentiate sections and help engine spiders which check header consistency with associated content. On a „traditional“ webpage we have numerous H1 headers on individual pages, with parallax we have multiple H1 headers on one long side. All these H1 headers are competing with one another and can decrease ranking. Google recommends a single heading per web page.
2. Loading times
Parallax scrolling requires a lot of scrolling patience caused by loading times because sites like that are image-heavy. This can make persons leave your site before it has even had the chance to show its beauty.
Sites like that provide a single url only. Sharing specific content with friends on social media can be difficult.
4. Device and OS fragmentation on mobile
Nowadays we are facing device fragmentation and OS fragmentation. Pages that look great on desktops can look horrible on mobile devices. Think ahead and implement a responsive parallax design from the beginning or develop a mobile specific page. Mobile devices often have a hard time accommodating parallax and some parts of the site may not function properly.
Despite all the things above I think they are still some very good examples in the world wide web that impressively show how to set up pages with parallax in the right way. But always keep in mind there are plenty of other ways to make a site stand out and engage visitors without parallax scrolling.
Have empathy with your users, keep the usability high and ask yourself if parallax really helps them to easily read text, navigate pages and find informations that are most relevant to them.
And last but not least: Be unique.
You can find Dede Fredrick’s study here.