In this paper a novel and significant study into the usability of carousel interaction in the context of desktop interaction is presented. Two equivalent prototypes in an e-commerce context were developed. One version had a carousel and the other version did not have a carousel. These were then compared with each other in an empirical experiment with 40 participants.
The data collected were statistically analysed and overall results showed that in terms of performance the Web site version without carousel outperformed the version with carousel. Furthermore, the subjective preferences of the participants were strongly in favour of the without carousel version of the site.
The results of this study make an important contribution to knowledge suggesting that in many cases implementing a carousel is not the best design decision. The results of this paper are particularly significant in relation to desktop versioned Web sites and goal-driven tasks. Serendipitous-type tasks and mobile versioned web sites used on mobile devices with touch screens were not part of the scope of this work.
2. Previous work
3. Prototype design
4. Experimental design
6. Discussion and conclusions
Carousel interaction on Web pages and particularly on e-commerce Web sites has become a popular option with Web designers. According to Holst (2016) and in relation to a ‘homepage and category benchmark’, 52 percent of ‘50 top-grossing U.S. e-commerce websites’ used a carousel on the home page for their desktop version. Carousels are often used to display multiple images or content on a specific space on a Web page. Some carousels automatically rotate with a range of seconds between highlighted content. Whereas other styles of carousel can be manually rotated by the user. There are also some mixed-format carousels available where they automatically present content to the user but, at the same time, allow a user to also manipulate content. Certain carousels are used at the top of a homepage, and these are called homepage carousels. In many cases carousels are used on business Web sites to display products.
In this paper we aim to provide significant results on desktop carousel interaction. To our knowledge there is a lack of empirical results demonstrating whether carousel interaction is the most usable and appropriate option within Web pages.
This paper is divided into a number of sections. The sections will discuss some of the main relevant literature, the prototype user interface used in our experiment, experimental evaluation carried out for a new user interface, results from a statistical analysis and conclusions and ways forward.
2. Previous work
On 3D carousels, (Sundar, et al., 2011) found that test participants thought the 3D carousel was more interactive and that the 3D carousel ‘stimulated user interaction’. However, the 3D carousel did also have some negative aspects. ‘Memory’ in relation to audio was worse and opinions concerning ease of use were negatively affected.
Another study into 3D carousels (Wang, et al., 2005) examined the context of browsing and item selection for users that could be done at a glance. The results showed the 3D carousel to have mostly negatives and some positives in terms of some aspects of usability. The positives were that the carousel was good for ‘comparing result set sizes and ... aesthetics’ (Wang, et al., 2005). However, the negatives were that a list view was more efficient than the 3D carousel. Wang, et al. also tested their 3D carousel design on a small screen and found that a list view was considered to be significantly better than the 3D carousel.
In a different type of investigation, Appleseed (2019) indicates that 28 percent of the ‘top U.S. and European e-commerce desktop sites’ have a carousel. This clearly shows that the percentage of people using a carousel feature is large. Appleseed (2019) stated that in their UX benchmark ‘only 41 percent of the sites that have a homepage carousel have an implementation that’s largely free from usability issues.’
According to Holst (2016) most implemented home page carousels do not perform well with users. Holst (2016) suggests that while there are other options to a carousel that work very well and are easier to implement, he suggests 10 features that would aid to get the best out of a carousel if it is considered to be the best option by a designer.
In Runyon (2013), some details of user interactions with carousels on the nd.edu (University of Notre Dame) were tracked. Runyon found that only one percent of visitors clicked on the carousel and 84 percent selected the very first slide of the carousel. He obtained strong tracking data to suggest that in most instances the first item of a carousel always received a much higher click rate than other items further down the line.
Angner (2015) discussed a comparison using a front page carousel and static image in the context of a real pet store Web site. The static image led to more interest and engagement from users. Angner revealed that the carousel version of a Web site achieved 2.06 percent of clicks and the improved Web site got 40.53 percent of clicks.
Noriega, et al. (2016) looked at the effects on memory to carousel use and news headlines. They tested a manual and automatic carousel with seven news headlines and then 14 news headlines where each headline was accompanied by a relevant image. The main results were that, with an automated carousel, memorization was greater for the seven news items. With a manual carousel there was no difference in memorization irrespective of seven or 14 news headlines with images. The authors also observed that participants had better memorization with fewer slides on the carousel. However, the data the authors collected and analysed for interaction effects showed no statistical significance, although it was tending towards significance.
Overall, it can be seen from research on carousel interaction that in most cases a carousel is not the best option for a Web page. There are other design options that are better for business and end users. However, there is evidence lacking of a more empirical nature concerning the usability of carousels which this paper aims to begin addressing.
3. Prototype design
Two e-commerce Web site prototypes were developed for conducting an experiment with users. The first prototype was ‘with carousel’, and the second was ‘without carousel’. The architecture of the two prototypes was almost similar, and they contained the same information, images, and products. Only the user interfaces were different based on the implementation, or not, of a carousel. Both Web site prototypes were designed by using html5, css3, bootstrap, and the jquery plugin. The Web sites used in the study used actual images of clothes. These illustrations are not presented in this paper due to copyright concerns.
3.1. With carousel prototype
Several pages were developed to emulate a clothing e-commerce Web site with different products. Different kinds of clothes for men and women were displayed. The homepage had four sections. In the first section, four slides of a manual carousel were displayed. Every slide represented a product, e.g., a denim jacket, gown, shirt, and men’s suit. There were also some discounts, coupon codes, and information.
Figure 1: Carousel prototype banner section.
As shown in Figure 1, at the bottom left side, there are four slides, with the current slide position at number one. Two arrow buttons act as a navigator to see all the slides.
In the second section, all the latest products of different categories were displayed. The prototype offered nine different category clothes for men and women. Those were: top, striped dress, men’s suit, jacket, shirt, gown, overcoat, t-shirt, and jeans. Those categories were displayed via the carousel where the user had to click manually the arrow button to see the next category or to click the back-arrow button to see the previous category. Four categories were on display each time.
Figure 2: Carousel prototype latest product section.
Upon selecting a specific category, e.g., men’s suit, one could see different kinds of suits — plain grey, double-breasted, dinner, wedding, summer, check, sports jacket, and zoot. Upon selecting the summer suit, different coloured summer suits would be displayed on a subsequent page.
Figure 3: Carousel prototype only khaki color summer men suit.
Figure 3 shows an example of a resulting display upon selection of khaki coloured summer suits.
3.2. Without carousel prototype
The second prototype was identical to the first one, except it had no carousel. This site had four sections as well. In the first section, four slides at a time were displayed in two columns as shown in Figure 4.
Figure 4: Without carousel prototype banner section.
The second section also had nine categories of different clothes for men and women, displayed without a carousel. The categories were displayed in three separate columns in three different row positions at a time, as shown in Figure 5. All products were displayed in three columns at a time.
Figure 5: Without carousel prototype latest product section.
In line with the prototype developed with a carousel, if one selected a specific section, they would see only that category product on the next page.
The next section will discuss how the experiment was designed and conducted.
4. Experimental design
An experimental quantitative approach was chosen because it helped to collect more concrete data that was statistically analyzable. Participants were involved in conducting specific tasks on two prototypes. A within-users design was adopted so that participants could experience both user interfaces. Some pre-defined shopping tasks were given to participants and tasks were the same for both sites. Task times, errors, and personal opinions were collected as part of the experimental process.
A sample of participants was recruited from different parts of the world where participants had to have experience in computer and Internet use. Participants were recruited via e-mail and social media. The experiment was conducted with a total of 40 participants of different ages and diverse professional backgrounds. The participants were from 15 different countries with different professional backgrounds. They were either students, employed, or both, with a minimum of two years of online shopping experiences.
The independent variables were the two user interfaces and the tasks associated with the interfaces. The dependent variables were performance and user satisfaction. The dependent variables were measured based on overall task time, errors, and user opinions elicited by means of a six-question post-experiment questionnaire. Errors were categorised as a participant clicking on a wrong section during a task and if a participant chose a wrong product in relation to a task. The post-experiment questionnaire covered aspects of perceived ease of use and user friendliness in relation to the two user interfaces.
4.3. Apparatus and materials
For this experiment, the following systems and materials were used to conduct the experiment:
- Lenovo laptop with windows 10 OS, 12GB RAM, intel corei7 processor, 15.5-inch screen;
- Chrome Web browser;
- A stopwatch;
- Debut screen recorder software;
- Information sheet;
- Consent form;
- Google form;
- Tasks document for the experiment;
- Post-experiment questionnaire.
4.4. Task design
All tasks were designed to be realistic in the context of an e-commerce Web site and centred around finding various items of clothing. As the experiment followed a within-users design participants experienced both user interfaces. Forty participants accomplished all four tasks as described. Half of the participants experienced the carousel prototype first and then the non-carousel prototype. The other half experienced the user interfaces in the opposite order. Table 1 illustrates how the participants were organized in relation to the tasks and the two prototype Web sites.
Table 1: Organisation of participants to tasks and user interfaces. Group name Number of participants Interface order Tasks performed Group A 20 First with carousel
Second without carousel
Task: 1,2,3,4 Group B 20 First without carousel
Second with carousel
The specific tasks designed were:
- Task 1: Find a summer men’s suit, khaki colour with exactly US$500 price from the latest product section.
- Task 2: Find a choker top, floral colour with less than US$300 price from the latest product section.
- Task 3: Find a men’s v-neck, black color t-shirt with more than US$150 price from the latest product section.
- Task 4: Buy a men’s suit with the coupon code from the new arrival section.
The whole experiment was conducted in three different stages including a pre-experiment briefing, the actual experiment, and then providing a post-experiment questionnaire. Before starting the actual experiment with the selected participants, pilot testing was conducted with two different participants to identify possible problems in advance. The recruitment questionnaire asked participants to state their age group, gender, nationality, years of online shopping experience, and years of Internet usage experience. The post-experiment questionnaire asked a series of questions covering satisfaction aspects of the two user interfaces.
Ethics principles in line with Norwegian requirements were followed in this research. An information sheet was given to each participant that contained details of the study and expectations about the experiment. An ethical consent form was also used where it outlined participant rights and understandings for the experiment. Initial contact with the participants was established by sending an e-mail message with the consent form. Upon agreement, a suitable appointment was set to conduct user testing. During the experiment, the following aspects were manually recorded: task times, errors, and any particularly noticeable behavioural aspects on the part of the user (e.g., joy or frustration).
Screen recording software was used to record the whole experiment and a stopwatch was used to count exact times. When participants asked any questions regarding issues they faced, some hints were provided to complete the tasks. Those hints were the same for every participant in order to reduce biases.
In the end, a post-experiment questionnaire was administered via Google Forms, which dealt with aspects of participant preferences and opinions about the two user interfaces. At the end of the experiment, participants were thanked for their participation.
The data for participant opinions were collected via Google Forms and were analyzed using SPSS (Mayers, 2013). A t-test (Mayers, 2013) was used to analyse all data collected in pair-wise comparisons for the two user interfaces. T-tests were used for task times, errors, and subjective opinions which had been given via Likert-type scales (Likert, 1932). The questions used Likert-type scales ranging from one to five and for each question, a five represented the most positive response.
A description of the partipants noted that:
- The gender split was 40 percent female and 60 percent male.
- For online shopping experience, 20 percent of the sample had five years of online shopping experience, while 12 percent had 10 years of online shopping experience. The remainder of the sample had one to eight years of experience in online shopping.
- Concerning computer and Internet experiences, 23 percent of the sample had 10 years of experience, with the remainder of the sample (77 percent) had 12 to 15 years of experiences.
- The experiment was conducted with users representing different nations around the world, some 15 different countries.
- In terms of age, 62 percent were between 20 and 29 years old, 23 percent were between 30 and 39, and 15 percent were between 40 and 49 years old.
- A significant portion of the participants (35 percent) were students, while 45 percent were employed, and the remaining 20 percent were both employed and students.
Statistical analyses provided the following results:
Errors described earlier were analysed and no statistically significant differences were observed. However, the without carousel version incurred slightly fewer errors when compared with the carousel version.
Task time in minutes, is significantly different across the two conditions, where the tasks carried out with the without carousel user interface were significantly faster (mean (M)=6.2, standard deviation (SD)=2.9) than the with carousel user interface (M=8.2, SD=3.3), t(78)=4.5, p<0.001.
Post-experiment questionnaires, consisting of six questions, were also completed by the participants. Each question was completed twice, once in relation to the user interface with the carousel and once in relation to the user interface without the carousel. Each question used a scale from one to five, where five was the most positive score. This allowed for a clear comparison between the two user interfaces.
Question one concerned ease in finding items from the Web site using the two user interfaces. The results suggest that the ease in finding items using the without-carousel interface (M=4.5, SD=0.67) was significantly easier than with the equivalent carousel interface (M=3.2, SD=0.83), t(78)= 7.7, p<0.001.
Question two concerned whether participants liked the carousel or lack of it in the banner section of the prototypes. From the t-test result users significantly like the without-carousel interface (M=4-0, SD=1.09) in the banner section more than the carousel interface (M=3.38, SD=1.21), t(78)=2.4, p<0.02.
Question 3 concerned whether participants liked the carousel or lack of it in the products section of the prototypes. Participants significantly preferred the user interface without the carousel (M=4.2, SD=0.90) in the product section when compared with the carousel version of the Web site (M=3.7, SD=1.2), t(78)=5.3, p<0.001.
Question 4 concerned whether participants perceived the user interface to be user friendly. Participants significantly perceived the without carousel (M=4.3, SD=0.8) interface to be more user friendly than the with carousel (M=3.6, SD=1.06) version, t(78)=3.7, p<.001.
Question 5 concerned whether participants thought navigation aspects were easy to follow. Participants significantly thought the without carousel (M=4.3, SD=0.85) version was easier in terms of navigation when compared with the carousel version (M=3.4, SD=1.20), t(78)=3.7, p<0.001.
Question 6 concerned whether participants thought the content was easy to follow. Participant opinions did not reveal any statistically significant differences. However, the scores for the without carousel version were overall slightly more positive than for the with carousel version.
6. Discussion and conclusions
As discussed earlier, errors, task times, and subjective opinions were explored in this study. As expected, errors did not yield any statistical significance with participants committing errors at very similar rates across both user interfaces. Since the user interfaces were not complicated the lack of significance in errors is an expected result.
Task times, however showed clear statistical significance indicating that the without carousel version of the Web site led to faster completion rates for task times. This is a very important finding as one would expect that most users trying to find items to buy would appreciate being able to do so as quickly as possible. Thus, the with carousel version is not a desirable design in this context.
The overall results for subjective opinions were also quite categorical with opinions about user friendliness, navigation, and liking of each version showing very clearly — with statistical significance — that the without carousel version was preferred across all factors.
The only subjective response that was not significant concerned the content being easy to follow. As expected, since the content was the same across both versions of the site, large variations in opinions would not be expected.
These results are important to Web designers and user interface specialists. The use of carousels in sites is not, in most cases, a good design decision, especially in a desktop context. The results presented in this paper suggest that a carousel reduces performance and fosters more negative opinions on the part of users.
These are very novel and significant results, because to our knowledge there are not many empirically-based and peer-reviewed studies presenting clear evidence of this kind. Therefore, the results presented here add more concrete evidence to the current knowledge and at times anecdotal evidence that carousels are in most cases not enhancing usability. The significance of these results should also influence more web designers in how they implement web pages. We suggest by, in many cases, simply not using a carousel. There are much more usable and easier to implement options.
Future work could examine further interface issues. Our prototypes dealt specifically with e-commerce Web pages. It would be useful to look at carousels in different contexts, on educational, news, and other sites. Noriega, et al. (2016) examined the news context, but further research is needed.
Although we felt the questionnaire worked well in this study, this survey could be supplemented by interviews to see if any other interface issues emerged. Lastly, as discussed earlier, the prototypes were developed in a desktop context. Much Internet use occurs on smartphones and tablets with different forms of interactivity. It would be useful to examine carousel use in a mobile context.
About the authors
Rashika Tasnim Keya earned a Master’s in Universal Design of ICT from Oslo Metropolitan University (Norway) in 2020.
E-mail: rashikatasnim [at] gmail [dot] com
Dr. Pietro Murano is an associate professor of computer science at Oslo Metropolitan University (Norway).
E-mail: pietro [dot] murano [at] oslomet [dot] no
M. Angner, 2015. “Will front page carousels improve your conversion rate?” at https://angner.se/blog/will-front-page-carousels-improve-your-conversion-rate/, accessed November 2020.
J. Appleseed, 2019. “9 UX requirements for designing a user-friendly homepage carousel (if you need one),” at https://baymard.com/blog/homepage-carousel, accessed October 2020.
C. Holst, 2016. “10 requirements for making home page carousels work for end users (if needed)” (6 July), at https://www.smashingmagazine.com/2016/07/ten-requirements-for-making-home-page-carousels-work-for-end-users/, accessed November 2020.
R. Likert, 1932. A technique for the measurement of attitudes. New York: Science Press.
A. Mayers, 2013. Introduction to statistics and SPSS in psychology. Harlow: Pearson.
P. Noriega, T. Pinto, J. Assunção, F. Lourenço, C. Ungureanu, and E. Ribeiro, 2016. “Web press carousel and his effects over news memorization,” In: F. Rebelo and M. Soares (editors). Advances in ergonomics in design. Advances in Intelligent Systems and Computing, volume 485. Cham, Switzerland: Springer, pp. 53–61.
doi: https://doi.org/10.1007/978-3-319-41983-1_6, accessed 1 January 2022.
E. Runyon, 2013. “Carousel interaction stats” (22 January), at https://erikrunyon.com/2013/01/carousel-interaction-stats/, accessed November 2020.
S.S. Sundar, S. Bellur, J. Oh, and H. Jia, 2011. “Calls for interaction: The more the better? User experience of 3D carousel and additional interaction techniques,” In: P. Campos, N. Graham, J. Jorge, N. Nunes, P. Palanque, and M. Winckler (editors). Human-computer interaction — INTERACT 2011. Lecture Notes in Computer Science, volume 6949. Berlin: Springer, pp 487–490.
doi: https://doi.org/10.1007/978-3-642-23768-3_64, accessed 1 January 2022.
S. Wang, M. Poturalski, and D. Vronay, 2005. “Designing a generalized 3D carousel view,” CHI EA ’05: CHI ’05: Extended Abstracts on Human Factors in Computing Systems, pp. 2,017–2,020.
doi: https://doi.org/10.1145/1056808.1057081, accessed 1 January 2022.
Received 25 August 2021; revised 5 November 2021; accepted 9 November 2021.
“Is carousel interaction really usable?” by Rashika Tasnim Keya and Pietro Murano is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.
Is carousel interaction really usable?
by Rashika Tasnim Keya and Pietro Murano.
First Monday, Volume 27, Number 1 - 3 January 2022