A white paper about user experience on parallax scrolling on websites

1. User Experience in Parallax Scrolling
Anuparna Banerjee
School Of Information, University Of Texas at Austin, USA
1 Abstract
The term, Parallax is derived from the Greek word parallaxis which means to vary. In terms of real world,
parallax refers to a shift in the position of the object in concern with respect to the some other frame of
reference. From the perspective of website design, it’s a design principle wherein certain areas seem to flip,
animate, move or blur with a quick scroll thus creating an increased interest levels for end-users. Some
exciting examples of the parallax phenomena are
• http://nasaprospect.com/
• http://www.ok-studios.de/home/
Parallax scrolling also has certain concerns like search engine optimization, page load times, mobile
viewing but future research is looking into areas where these aspects could be improved to provide a better
user experience.
It is considered as a dated trend based on researches done on the past user experience but modern
parallax scrolling offers great source of a dynamic and positive user experience particularly since this
phenomena has the ability to provide visual feedback to user interactions. In essence, parallax scrolling can
provide an element of depth if used appropriately but can be totally destroy the user experience if overused.
2 Introduction
Positive user experience from websites plays a important role in formulating marketing strategies for products.
The user experience in the today’s growing Internet world is based more on depicting the emotional character
of the websites which can connect at the visceral level. The elements of Parallel Scrolling communicate to
the primal mind of the end-users which can affect their overall perception of the business in concern.
Parallax scrolling can also generate a successful user experience through its novelty. Novelty of
websites can influence the consumers’ emotional perception and draw their attention. This could lead to a
strong stand for businesses in the intensely competitive world.
This paper reviews how website design technique of Parallax Scrolling affects the user perception of
websites. The parallax trend brought in a couple of years back has itself evolved in a number of ways. The
paper studies how this trend seeks to contribute towards a rich user experience.
3 The Parallax phenomena
3.1 The beginning
Parallax Scrolling was introduced in the Web world by Ian Coyle for the website of Nike’s brand and products
called "Nike Better world" on 2011. The beautiful parallax scrolling illusion of the website was created by
maintaining the background scrolls at a slower rate and the same speed of content scroll as the window.
The success of the website was based on its ability to be lightweight and highly optimized for both Web
and devices. It was creative and possessed a high degree of story-telling capability. It also provided a much
needed visual engagement of users than compared to previous web designs with static images.
3.2 Degrees of Parallax
The implementation of the parallax scrolling can now be seen many places like the floating app icon effect
in IOS platform, video and computer games. Parallax is all about creating a dynamic experience, a type

2. User Experience in Parallax Scrolling Anuparna Banerjee
of digital environment wherein the user manipulates perspective. It also gives the user a certain degree of
freedom to choose how to experience the website through effective navigation techniques. 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 (What are
the UX benefits of parallax scrolling sites?, n.d.). Although engaging, it is important to gauge the degree of
distraction parallax brings to a site. As with any technology, it can get in the way of the site navigation and
distract from the real calls-to-action (CTA). (Degrees of Parallax, n.d.)
3.2.1 Modern Parallax Techniques
As described in (30+ WEBSITES THAT PROVE PARALLAX ISN’T DEAD, n.d.), modern parallax scrolling
implementations include
• Header Parallax: Headers are elements creating the depth while the rest of the content remains scrollable.
Example : http://www.thisisuncoated.co.uk/
• Text Parallax: Parallax is often used to improve UX, by keeping text content front and center while
supporting content like images scroll past the user. Example : http://fletcher-systems.co.nz/
• Subtle Parallax: Subtle parallax effects applied to a few elements create an elegant browsing experience
that charms and engages the user. Example : http://charactersf.com/
• Classic Parallax: This character of parallax is still under development. Since parallax is far beyond
trend now, the websites with classic parallax display it as a natural effect on websites. Example :
http://piratetoronto.com/
3.2.2 Recent Research on User Experience
A research was done to understand the holistic view of parallax scrolling on user experience.(Frederick,
Mohler, Vorvoreanu, & Glotzbach, 2015) According to the study, researchers attribute this pleasurable user
experience to the fulfillment of the following variables: usability, satisfaction, enjoyment, fun, and visual
appeal. The study hypothesized that parallax scrolling would positively influence each of these five variables
and subsequently the overall user experience.
Eighty-six individuals from a large Midwestern university participated in the research. One group
of participants (N = 43) interacted with the parallax scrolling website, whereas the second group (N =
43) interacted with the non-parallax scrolling website. An independent samples t-test revealed significant
differences between the two groups in regards to perceived fun. Participants believed that the parallax
scrolling website was more fun than the non-parallax scrolling website. The results of the study also showed
parallax scrolling to be more effective when used in a hedonic and fun context. In spite of these benefits, two
of the participants suffered motion sickness and experienced significant usability issues while interacting with
the parallax scrolling website. As a result, this potential risk to participants raises some ethical issues that
UX practitioners and web designers should consider when planning to implement parallax scrolling.
The results prove that text-heavy sites that use parallax scrolling are more likely to disorient users.
Websites that emphasize on visual elements - images, infographics, or data visualizations, in particular, are
probably a better fit for the style.
3.2.3 The Problems
There could be some negative implications of parallax scrolling as listed below :
• Websites with parallax scrolling fail to implement search engine optimization techniques. Search engines
rank websites on the basis of their headings. Headings are website components which define webpages
and divide a website into a logical structure. They are highly effective for websites having multiple
webpages as they serve as a key to search terms. A parallax website is comprised of a single web page
and hence a single heading is present to match the search term. This makes the website unavailable
during search for a related search query.
2

3. User Experience in Parallax Scrolling Anuparna Banerjee
• Parallax effect can also ruin the user experience if the websites fail to display the purpose they were
designed for just to create an initial emotional impact. It is really important to understand the user
requirements before designing a parallax website.It not only impedes navigation but it may fail to
deliver the message to the user it was intended for.
• Parallax scrolling web interfaces have another drawback of delayed website loading time. Parallax
websites are more inclined to place the entire content of the website in one single page. Extremely high
quality images are used to develop the website and this leads to a slow performance of the website.
According to recent psychology studies, humans have an eight-second attention span. As a consequence,
successful websites should aim to load within 8 seconds. Based on a research done, 47% of people
expect a web page to load in two seconds or less and 57% of visitors will abandon a page that takes 3
seconds or more to load.
(11 Low-Hanging Fruits for Increasing Website Speed (and Conversions), n.d.)
• In 2015, 33.4% of all website traffic was generated through mobile phones (Percentage of all global web
pages served to mobile phones from 2009 to 2016, n.d.). To reach out to all consumers, it is necessary
to design websites which are mobile-compatible. Components of parallax scrolling do not load properly
on mobile devices which harms the mobile user experience.
3.2.4 The Solutions suggested
Several solutions have been suggested by various researchers to circumvent the problems of parallax scrolling
• To increase the page-load time, websites can pre-load images or use sequential loading techniques like
lazy-loading.
• Some researchers consider the one-page architecture of parallax websites as a misconception(Parallax
scrolling and SEO are 100the misconception, n.d.). The article clearly justifies the point by stating that
their website rankings did not fall even after parallax scrolling being present on each URL. Parallax
scrolling can thus be effectively used on the website home page and can link to other parallax or
non-parallax web pages. It can significantly improve the website’s search engine optimization and
provide multitude of options to its visitors.
• Navigation flow should be kept as simple as possible. The main focus of the website is to acheive the
user-requirements and parallax scrolling should make it easier to attain. Good parallax designs do not
involve too much of the scroll component since that could lead to distraction.
4 Conclusion
Businesses can look forward to implement websites using parallax scrolling particularly if they want a soft
branding of their products. It will help build a unique emotional connection with the customers and thus lead
to evolution of the brand.
The golden rule is to keep a vision for user experience in mind - parallax can bring an extra layer of
visual interest, or immerse visitors in a virtual whirlwind of stimuli(Degrees of Parallax, n.d.). Parallax web
designs could prove to be very useful subject to its testing to check all functionalities including cross browser
compatibility.
Another important aspect to look forward is mobile compatibility. There are several libraries available
for mobile app designs which implement the concept of parallax scrolling. Parallax scrolling will help take
animation and more interactive storytelling in mobile design to the next level. With traditional design being
more flat and one dimensional, parallax implementation will add depth to mobile design that we haven’t
experienced before.
Parallax can be considered in researches like eye-tracking to understand which aspects are appealing
to users and which distract them. Modern parallax sites are created to convey a linear story where scrolling
can be an effective tool for narration. Surveys to study the user experience should be directed towards being
3

4. User Experience in Parallax Scrolling Anuparna Banerjee
more content-oriented to understand whether parallax effects poses as an hindrance to realize the story being
told.
References
11 low-hanging fruits for increasing website speed (and conversions). (n.d.). http://conversionxl.com/
11-low-hanging-fruits-for-increasing-website-speed-and-conversions/.
30+ websites that prove parallax isn’t dead. (n.d.). http://www.webdesignerdepot.com/2015/07/30-websites
-that-prove-parallax-isnt-dead/.
Degrees of parallax. (n.d.). http://thejibe.com/blog/13/10/degrees-parallax.
Frederick, D., Mohler, J., Vorvoreanu, M., & Glotzbach, R. (2015). The effects of parallax scrolling on user
experience in web design. Journal of Usability Studies, 10(2), 87–95.
Parallax scrolling and seo are 100clearing up the misconception. (n.d.). http://www.mmarley.com/parallax
-scrolling-and-seo-are-100-compatible-clearing-up-the-misconception/.
Percentage of all global web pages served to mobile phones from 2009 to 2016. (n.d.). http://www.statista.com/
statistics/241462/global-mobile-phone-website-traffic-share/.
What are the ux benefits of parallax scrolling sites? (n.d.). https://www.sundoginteractive.com/blog/
what-are-the-user-experience-benefits-of-parallax-scrolling-sites/.
4