The Effects of Parallax Scrolling on User Experience in Web Design

Introduction

Over the past few years, the field of human-computer interaction (HCI) has seen a shift of focus from product utility to the affective experience users have when interacting with a product. This relationship, which has been dubbed “user experience” (UX), has evolved into a core principle of design and product development. Proponents of UX regard it essential for the success of any product (Kujala, Roto, Väänänen-Vainio-Mattila, Karapanos, & Sinnelä, 2011). Garrett (2006) proposed UX as an instrument for creating customer loyalty and thus should be the objective of every retail product. Taking this into account, product designers have gone to great lengths in the design of their products to ensure a pleasurable UX. Today, parallax scrolling (PS) is one such design strategy employed by designers in an effort to create a great UX for their website visitors.

At the time of this writing, a quick search on Google for the term “parallax scrolling websites” yielded over two hundred thousand search results showing websites currently exploiting this technique to enhance the appearance and interactivity of their website and engage their visitors. The PS effect allows multiple backgrounds in a webpage to move simultaneously at different speeds, thereby creating the illusion of depth. In addition to its aesthetic appeal, PS offers web designers an opportunity to directly draw the users’ attention and guide them to their products or “call to actions.” For example, designers can create stories that can be revealed to users while scrolling down the webpage or in other cases, show users the functionality of a product in animated fashion. In this research, we investigated how PS within a website can affect UX.

Parallax Scrolling and UX

According to Hassenzahl and Tractinsky (2006) the phrase “user experience” has several different meanings, which include usability, aesthetics, and hedonic qualities. They also relate UX to emotions such as fun, happiness, beauty, pleasure, enjoyment, and pride that may emerge in a human-product relationship. In spite of its growing popularity in the HCI domain, a common definition for the term user experience is yet to be accepted. In fact as Law (2011) noted, there is yet to be an agreement amongst researchers on how UX should be measured. Qualitative researchers frown on the idea of converting a subjective concept like experience and trust to numbers as it fails to completely capture the users’ true experience. On the other hand, when qualitative researchers conduct UX studies, their frequent use of surveys and questionnaires signifies the need for a numeric measure (Law, 2011). These discrepancies have created some serious issues that need to be resolved if progress is to be made in this emerging research area.

The goal of this study, however, is not to find a common definition of UX, nor how it should be measured. In light of the previous limitations, in this study we considered UX as the emotions that are aroused when a user interacts with a product or technology. We examined how PS affects the following variables: fun, usability, visual appeal, satisfaction, and enjoyment, which consequently impacts the user’s overall website experience.

Research shows that it generally takes a user only 50 milliseconds to develop an impression of a website and decide whether he or she likes it (Lindgaard, Fernandes, Dudek, & Brown, 2006). However, in order for the PS effect to work, all page elements and files must be loaded from the server onto the webpage before the user can start viewing the page. Compared to a typical website where a few images and elements are loaded, all elements are loaded to a single webpage in PS. Depending on the size and number of page elements, the page loading can last from a few seconds to over a minute. Depending on the user’s intention for using the website, this can determine whether he or she continues on the webpage or navigates to a new website. This research investigated how PS can influence the overall UX while keeping page loading time constant.

Methods

The following sections discuss our hypotheses, sampling techniques, experiment setup, procedure, and instruments used in this research.

Hypotheses

This study seeks to investigate the effects of PS on web design. There were two websites: one with PS and one with no parallax scrolling (no-PS). We tested the following hypotheses:

• The PS website will be perceived as being more usable than the no-PS website.
• The PS website will be perceived as being more enjoyable than the no-PS website.
• The PS website will be perceived as being more fun than the no-PS website.
• The PS website will create greater perceived satisfaction than the no-PS website.
• The PS website will be perceived as being more visually appealing than the no-PS. website

Sampling

Participants for this study were recruited in a central general-purpose building at a large Midwestern university. The intercept method was used to recruit students as they walked through the hallway of a heavily patronized area within one of the university’s libraries. This sampling method was used primarily because it offered a relatively inexpensive method of collecting high quality data. Bush and Hair (1985) showed that the intercept method has the potential to provide overall quality data equivalent to that of telephone interviewing. Miller, Wilder, Stillman, and Becker (1997) found that the intercept method produced more representative distributions of age and gender than telephone surveys and could be used as an alternative to traditional survey methods. A limitation to the generalizability of this study, however, is that participants were restricted to a university population. As a result, 98% of participants were between the ages of 21 and 34. Due to the fact that most participants were students or otherwise affiliated with the university, we assumed users to be computer and Internet savvy. Our observations of the participants while exploring the website and performing the tasks confirmed this assumption.

We had a sample size of 86 participants, 43 in each group. This sample size was consistent with similar research conducted in the field (Hung & Chen, 2012; Lindgaard, Fernandes, Dudek, & Brown, 2006; Sauer & Sonderegger, 2011). In keeping with similar studies (Al-Shamaileh & Sutcliffe, 2012; Lindgaard, Fernandes, Dudek, & Brown, 2006), we employed a between-groups design. Each participant was alternately assigned to either the PS group or the no-PS group.

Experiment Setup

The objective of this research experiment was to investigate how the scrolling technique affected the perception of satisfaction, usability, enjoyment, visual appeal, and fun. These five variables have been shown to contribute to the overall UX (Hassenzahl & Tractinsky, 2006; Norman, 2003). We divided participants into two independent groups. One group was assigned to work with the PS website while the other group used the no-PS website. Both webpages contained the same content, fonts, font sizes, color, design, and symmetry. They looked exactly the same, with the only difference being the technique of scrolling. Our goal was to have the same level of usability and visual appeal except for the impact of PS.

Procedure

We created the websites for a hypothetical hotel, identical in all respects apart from the scrolling method (see Figure 1). In order to test the websites in a real world environment, both websites were uploaded into a server over the Internet where participants accessed them. We kept loading time constant for the two websites by simplifying the PS; that is, using just five web-optimized background images to create the parallax effect. Also the participants accessed the website through the university network with an Internet download speed greater than 45Mbps, which made the differences in loading time between the two websites indistinguishable. Two identical laptop computers with Internet access were set up to conduct the experiment

Figure 1. Image of the hotel websites used in the experiment. Websites were identical to each other with the exception of the scrolling techniques.

We intercepted students as they passed through the library hallway and asked them to participate in a study that would take no more than five minutes. Each participant then used one version of the website, either with or without PS. Prior to starting the session, participants were given a sheet containing the instructions. After reading the instructions, participants navigated to a web address that was provided to them on the computer by directly clicking on the link or by typing the provided URL in the address bar.

We instructed participants to spend between 30 seconds to a minute browsing the website before they attempted the two tasks. The first task asked participants to complete a web form by entering some demographic information about themselves. For the second task, participants were asked to make a hotel reservation. We controlled order effects by counterbalancing the order of the two tasks. Each participant performed the tasks in the presence of a moderator. When we determined that the environment had become so noisy that it risked distracting the participant, we did not allow the participant to start the session.

When the tasks were completed, participants answered a 15-item post-test survey. All survey items were measured on a 6-point Likert scale ranging from “strongly disagree” (1) to “strongly agree” (6). In total there were three items related to and measuring each of the five variables: usability, enjoyment, fun, satisfaction, and visual appeal.

Instruments

Content validity examines whether the questions included in the instrument are representative of the area of study (Li & Yeh, 2010). Consequently, we opted to use items from previous studies:

• usability (Flavián, Guinalíu, & Gurrea, 2006)
• enjoyment (Cyr, Head, & Ivanov, 2006; Van der Heijden, 2004)
• fun (Cyr, Head, & Ivanov, 2006; Van der Heijden, 2004)
• satisfaction (Cyr, Bonanni, Bowes, & Ilsever, 2005; Sauer & Sonderegger, 2011)
• visual appeal (Cyr, Head, & Ivanov, 2006; Li, & Yeh, 2010)

The position of the three items for each of the five scales was randomized to prevent response biases. Cronbach’s alpha was used to assess the reliability of scales and was measured against the reliability coefficient threshold of 0.6 (Hair, Anderson, Tatham, & Black, 1998; Nunnaly, 1978).

The three items measuring the usability construct were just three of the components of usability, not a comprehensive list of the components. Nielsen, Tahir, and Tahir (2002) list 113 components of usability.

Results

The following sections discuss the participant demographics, reliability analysis, and the analysis and hypotheses testing.

Demographics of Participants

A total of 86 individuals completed the tasks and the post-test survey. With respect to age, 56 participants were 21 years old or younger, 29 were between 22 and 34 years, and the last participant was between 55 and 64 years of age. Overall there were 40 male and 46 female participants, the majority being Caucasian (39). Of the remaining participants, 22 were Black, 19 were Asian, four were Latino, and the last two participants were American Indian and Pacific Islander. Sixty-eight participants were undergraduate students, 13 were graduate, while the remaining five were non-students.

Reliability Analysis

The Cronbach’s alpha levels for the items within each sub-category were the following:

• usability, α = .806
• enjoyment, α = .947
• fun, α = .860
• satisfaction, α = .922
• visual appeal, α = .899

Analysis and Hypotheses Testing

We assumed that PS would affect the five variables that the literature shows to be components of UX. As a result, we formulated five hypotheses in support of this postulation. We conducted an independent samples t-test to verify differences in participants’ responses between the two groups on the five dependent variables: usability, enjoyment, fun, satisfaction, and visual appeal. We combined (arithmetic mean) the three items in order to provide a single measure for each variable. The survey instrument containing the 15 individual items measuring those five variables is shown in Table 1.

Table 1. The 15 Survey Items Measuring Each of the Five Variables

Therefore we rejected the hypothesis that PS would improve perceived usability, enjoyment, satisfaction, and visual appeal.

• perceived usability PS group (M = 5.2, SD = .96), no-PS group (M = 5.2, SD = .849), t(84) = .478, p = .63;
• perceived enjoyment, PS group (M = 4.9, SD = 1.32), no-PS group (M = 5.1, SD =.58), t(84) = .634, p = .53;
• perceived satisfaction, PS group (M = 4.8, SD = 1.16), no-PS group (M = 4.9, SD = .919), t(84) = .412, p = .681; and
• perceived visual appeal, PS group (M = 5.5, SD = .914), no-PS group (M = 5.18, SD = .958), t(84) = 1.382, p = .17.

The independent samples t-test did, however, show significant differences in perceived fun between the two groups, the PS group (M = 5.2, SD = .857) compared to the no-PS group (M = 4.7, SD = .921), t(84) = 2.708, p = .008, d=0.56. This effect size (d = .56) confirms a relatively substantial difference between the perceived amount of “fun” participants from the two groups had while interacting with the two websites. These results supported our hypotheses that the PS website is more fun than the no-PS website.

Discussion

The lack of a difference in perceived satisfaction between the two groups requires some explanation. It may be due to the artificial nature of the tasks. The website the participants used allowed them to make a reservation at a hypothetical hotel that they knew they would not be staying at. Therefore, the students may not have been enthusiastic about the situation. According to Ortony (1990), satisfaction results from the confirmation of a desirable event; the greater the desire, the greater the satisfaction when this event is fulfilled. Participants may have had no desire to go to make the reservation and therefore any satisfaction was minimum.

Perhaps most importantly, we observed that two participants in the study suffered from motion sickness and experienced significant usability issues while interacting with the PS website. After completing the session, both participants said that the PS effect made them feel sick. In fact one of the two participants admitted to not being able to spend much time interacting with the website because it caused her to become nauseated. She also confessed to rating the website very poorly in respect to its perceived usability because of her nausea.

Limitations

This study might have been subjected to certain confounding factors that could have affected the results. We conducted the experiment in an open area patronized by many students and consequently we could not directly control the environment. Therefore, users completed the experiment under different environmental conditions, at times quiet and other times more distracting, which may have influenced their responses. However to control this, we did not allow any participant to start the session if we deemed that the environment had become too noisy or distracting. Another limitation is that our sample population was limited to Internet savvy college students, which was not a true representation of general Internet users. Therefore as a result of our research location, we oversampled young users.

Implications

This research study can benefit UX practitioners who want to study PS. In addition to providing empirical research on the effects of PS in web design, our experience in conducting the study provides insights for UX practitioners. Most importantly UX practitioners need to consider the loading time and motion sickness issues associated with PS. The loading time of PS creates a dilemma for the UX practitioner and forces them to make decisions about which loading option to choose. The first option is to pre-load the webpage as this allows for a better measure of the PS experience itself. But this may fail to reflect the total experience of PS. The typical user does not encounter a pre-loaded webpage. Option two is to include the loading time and although this may lower the impact of PS, the user’s total website experience will be more truly represented. You also should consider the average network speed of the computer. The average Internet connection speed in most households in the United States is 7Mbps (State of the Internet Report, 2013), which is not enough to load a graphic-heavy PS website quickly. A third option, the one we chose for this study, is to simplify the level of PS in the design. This is a case of “less is more” as users have less moving objects on the webpage to contend with.

As mentioned above, two of the participants in this study experienced motion sickness. The nausea and motion sickness caused by PS is not just a usability issue, but an ethical consideration in the design of a PS website and in the conduct of PS research. Research requires that participants experience minimal risk, which means that they should not experience any harm or discomfort greater than what they experience in everyday life (U.S. Department of Health and Human Services, 2009). Therefore as UX practitioners, this requires us to screen participants for motion sickness and vestibular disorders before allowing them to participate in a test. In some cases, this may require IRB permission, which may mean requiring a longer time to conduct the UX study. This issue is one that UX practitioners should consider when planning to conduct a PS study.

Conclusion

We hypothesized that PS would improve UX, which is defined in this study as the emotions that are aroused when a user interacts with a product or technology. The PS website was perceived to be more fun than the no-PS website. With respect to perceived usability, enjoyment, satisfaction, and visual appeal, there were no differences between the PS website and the no-PS website.

However, this by no means negates the usefulness of PS in web design. Our research shows PS to have important implications for designers and usability and UX practitioners. PS could positively affect UX when used in a hedonic and fun context.

But two of the participants in the study suffered from motion sickness and because of that reduced their ratings of usability of the PS website. Consequently UX practitioners planning to work with PS should consider this issue and how it may affect their test participants.

Tips for Usability Practitioners

It is our hope that this research study will provide a foundation for UX practitioners who want to conduct studies with PS. Here are a few tips for working with PS:

• Increased loading time is a serious issue with PS. Therefore it is important that you consider how to deal with it based on the objectives of your study.
• The average Internet speed in most states in the United States is 7Mbps; therefore, the UX will be more pleasant if you are testing on a faster Internet connection.
• PS may cause certain people to experience nausea; therefore, it is important to screen your participants for motion sickness and vestibular disorders before allowing them to participate in a test. Also carefully watch participants as they work for signs of distress.
• PS may be more effective when used in a hedonic and fun context.
• Here are a few accessibility guidelines and techniques for the use of images in web design: http://webaim.org/techniques/images/.

References

Al-Shamaileh, O., & Sutcliffe, A. (2012, November). Investigating a multi-faceted view of user experience. In Proceedings of the 24th Australian Computer-Human Interaction Conference (pp. 9–18). ACM.

Bush, A. J., & Hair, J. F., Jr., (1985). An assessment of the mall intercept as a data collection method. Journal of Marketing Research (JMR), 22(2).   

Cyr, D., Bonanni, C., Bowes, J., & Ilsever, J. (2005). Beyond trust: Web site design preferences across cultures. Journal of Global Information Management (JGIM), 13(4), 25–54.

Cyr, D., Head, M., & Ivanov, A. (2006). Design aesthetics leading to m-loyalty in mobile commerce. Information & Management, 43(8), 950–963.

Flavián, C., Guinalíu, M., & Gurrea, R. (2006). The role played by perceived usability, satisfaction and consumer trust on website loyalty. Information & Management, 43(1), 1–14.

Garrett, J. J. (2006). Customer loyalty and the elements of UX. Design Management Review, 17(1), 35–39.

Hair, H. F., Anderson, R. E., Tatham, R. L., & Black, W. C. (1998). Multivariate data analysis. London: Prentice-Hall.

Hassenzahl, M., & Tractinsky, N. (2006). UX-A research agenda. Behaviour & Information Technology, 25(2), 91–97.

Hung, W. K., & Chen, L. L. (2012). Effects of novelty and its dimensions on aesthetic preference in product design. International Journal of Design, 6(2), 81–90.

Kujala, S., Roto, V., Väänänen-Vainio-Mattila, K., Karapanos, E., & Sinnelä, A. (2011). UX curve: A method for evaluating long-term UX. Interacting with Computers, 23(5), 473–483.

Law, E. L. C. (2011, June). The measurability and predictability of user experience. In Proceedings of the 3rd ACM SIGCHI symposium on Engineering interactive computing systems (pp. 1–10). ACM.

Li, Y., & Yeh, Y. (2010) Increasing trust in mobile commerce through design aesthetics. Computers in Human Behavior, 26(4), 673–684.

Lindgaard, G., Fernandes, C. J., Dudek, C., & Brown, J. (2006). Attention web designers: You have 50 milliseconds to make a good first impression! Behavior & Information Technology, 25(2), 115-26.

Miller, K. W., Wilder, L. B., Stillman, F. A., & Becker, D. M. (1997). The feasibility of a street-intercept survey method in an African-American community. American Journal of Public Health, 87(4), 655–658.           

Nielsen, J., Tahir, M., & Tahir, M. (2002). Homepage usability: 50 websites deconstructed (Vol. 50). Indianapolis, IN: New Riders.

Norman, D. A. (2003). Emotional design: Why we love (or hate) everyday things. New York: Basic Books.

Nunnaly, J. (1978). Psychometric theory. New York: McGraw-Hill.

Ortony, A., Clore, G. L., & Collins, A. (1990). The cognitive structure of emotion. Cambridge university press.

Sauer, J., & Sonderegger, A. (2011). The influence of product aesthetics and user state in usability testing. Behaviour & Information Technology, 30(6), 787–796.

State of the Internet Report (2013). Retrieved November 30, 2014 from http://www.akamai.com/stateoftheinternet/

Van der Heijden, H. (2004). User acceptance of hedonic information systems. MIS Quarterly, 28(4), 695–704.

U.S. Department of Health and Human Services (2009). Code of Federal Regulations, Title 45 Part 46: Protection of Human Subjects. Accessed November 30, 2014. Available from http://www.hhs.gov/ohrp/policy/ohrpregulations.pdf.