Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

An Exploration Of Carousel Usage On Mobile E-Commerce Websites

Does this title make you skeptical? I would have been too before I saw the research that led to this article. Ask anyone and they’ll tell you that carousels are an anti-pattern. Don’t use them. But maybe it’s not so cut and dry.

Using real data, this article aims for a better understanding of the current argument against carousels and whether they really deserve the reputation they’ve gained. I’ll break down the arguments point by point and see if our data lines up with those expectations. Through all of that, I’ll detail our findings and methods and make some recommendations on how and when you should use carousels in future.


(Illustration: Jacky Gilbertson2) (View large version3)

There have been a few contributors to carousels’ bad reputation. The Nielsen Norman Group wrote the piece4 that got the ball rolling. The real tipping point came when Erik Runyon posted a fantastically detailed breakdown of carousel usage5 on the University of Notre Dame’s website. On his website Should I Use A Carousel?6, Jared Smith firmly states that, given the choice, you should not use a carousel. Brad Frost echoes this sentiment in his article “Carousels7.” Luke Wroblewski joined in and suggested that the data available so far is convincing enough to never use a carousel again8 (Luke later presented some additional data suggesting that he may no longer be convinced9).

At Mobify, we develop large-scale e-commerce websites for mobile devices. A lot of the time, those websites have at least one carousel on them. Are we doing something wrong? Are we doing our users a disservice? Could our websites be even better if we stopped using carousels? These were all questions my co-author Peter Maclachlan and I asked each other as we looked through the websites we develop. Instead of being reactionary and following these recommendations to a tee, Peter and I decided to do our own research.

So, we started looking at the data available to us. At first we were just curious — what does our data show? What we found surprised us enough to encourage us to keep looking. We examined several mid-sized to large e-commerce websites over a period of 11 months. When I say mid-sized to large, I’m talking about websites that do at least $20 million in e-commerce sales per year. During this 11-month period, we sampled approximately 7.5 million carousel interaction events. The conclusions drawn through the rest of this article are based on that data.

Why We Use Carousels Link

Carousels are much more than a method of displaying marketing information on a home page. Because we focus on designing for mobile, one of our biggest concerns is making sure that we’re balancing information density with the limitations of small screens. That means making sure we’re always making the best possible use of horizontal and vertical real estate. We use carousels to maximize that information density and maintain context without forcing the user to scroll further down the page.


One type of carousel we measured in our research (View large version11)

Context is integral for carousels. Our design team avoids carousels that don’t provide context to the user. For the most part, we only use carousels in one place on our websites: as an image gallery on product detail pages. On a product detail page, a user knows that swiping through the carousel will give them more product images. On a home page marketing carousel, the user has little idea of what the next slide will show or why they should care.


Another type of carousel we measured in our research (View large version13)

The Case Against Carousels Link

The current argument against carousels centers on a few points:

  1. People don’t interact with carousels.
  2. If people interact with carousels, they interact only with the first slide.
  3. Carousels aren’t accessible.
  4. Automatic advancement of carousel items is bad for users.

I’ll tackle the first two of these points by comparing the data presented in Erik Runyon’s article with the data we found. The last two points are a little more qualitative, so I’ll just address those on their own.

Hypothesis 1: People Don’t Interact With Carousels Link


The argument here usually centers on the data provided by Erik Runyon14 for the University of Notre Dame’s website. This data shows that only 1.07% of visitors clicked on slides in the featured marketing banner carousel. Viewing a slide was not enough to count as an interaction. Users had to click directly on a slide to be counted.

To dispute the hypothesis, the data would have to show that people interact with carousels at a much higher rate than 1.07%.

Our Results

People interact with product image gallery carousels at a high rate: 72% of users advance the carousel at least once; 23% of users directly interact with the carousel by zooming.

If you look at our unique interaction data15 — specifically, for the closest comparison, zoom interactions — you can see that 23% of users interacted with the carousel by directly tapping on it for more information. If you consider advancing the carousel in any way to be an interaction, then that data goes up to 72% of total users who interacted with the carousel.

Note: For a complete breakdown of how we arrived at these results, please read the “Findings2216” section below.

Hypothesis 2: People Interact With Only the First Slide Link


Of the 1.07% who clicked Erik’s carousel, 89.1% clicked on the first slide. Again, if we assume that carousels are effective, we’d expect those numbers to follow a reasonable trend downward as we add more slides. Instead, Erik’s data shows that the slide in the second position received only 3.1% of all clicks. To put that in perspective, of the 3,755,297 visitors to Notre Dame’s website, only 1,234 visitors clicked on the second slide. Slides after the second one show the fall-off we would expect.

For us to dispute the hypothesis, the data would have to show that users interact with the second slide at a much higher rate than 3.1%.

Our Results

People directly interact with the second slide of product image gallery carousels at a rate of 15.7%. At least 64% of people advance from the second slide to the third.

The data shows that users advance carousels at a roughly linear rate17. Different control schemes had different results for the likelihood of interaction. All showed that users had a high percentage of engaging with the next slide. At least 64% of users who interacted with the first slide interacted with the second.


Slide advancement interactions follow an exponential rate of decay. (View large version19)

The Notre Dame data looks explicitly at clicks on slides to measure interaction. To ensure that our data maps well, we would also need to look at direct interactions. For our carousels, that would be the zoom interaction. The data shows that, of the 23% of users who zoomed our carousel, 54.1% zoomed on the first slide. The slide in the second position received 15.7% of all zoom interactions.


Zoom interactions follow a power law for decay. (View large version21)

This looks like Erik’s data: The first slide received the majority of direct interactions. However, the decay in our data is much more reasonable than Notre Dame’s carousel; 45.9% of all direct interactions occur on slides after the first one. This means that nearly half of all direct interactions occur after the first slide.

Note: For a complete breakdown of how we arrived at these results, please read the “Findings2216” section below.

Hypothesis 3: Carousels Aren’t Accessible Link

The next issue is bad but much more manageable. This argument is not against using carousels in general, but against using them as they’re currently implemented. It’s not impossible for a carousel to be accessible, but it does seem to be pretty rare. Certainly, our current carousel implementation was not designed with accessibility in mind.

This, I don’t think, is a fault of carousels in general, but it should be a consideration in your decision of whether to use one. Making our carousel plugin23 accessible is a top-of-the-list feature for our next version. It’s not a part of the argument about the effectiveness of carousels, so we won’t deal with it here.

Carousels, as they stand, are not accessible, but there is no reason they can’t be in future.

The argument here is that, by auto-advancing carousel items, users who want to click on a slide are being thwarted by the interface. We agree wholeheartedly with this point. If you’re going to use a carousel, then definitely avoid auto-advancing the slides. If you need further convincing, check out Brad Frost’s tweet on the matter24.

For an excellent exploration of this issue, read Jakob Nielsen’s article “Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility25.” None of the carousels we design advance automatically.

If you have to use auto-advancement, turn it off the moment the user starts interacting with the carousel. There’s little worse than clicking the wrong slide because the carousel advanced just as you clicked. On the desktop, this means turning off auto-advancement as soon as the mouse hovers over the carousel. On mobile, this means turning off auto-advancement as soon as you register an active touch on the carousel.

Auto advancement is bad. If you have a carousel, do not auto-advance.


Caution: This part outlines how we conducted our research and goes into way more detail on the data. If that sounds interesting, please read on. If not, you might want to skip to the next section26.

Research Methods and Context Link

The data used in this analysis comes from several mid-sized to large e-commerce websites over a period of 11 months. During this time, we sampled approximately 7.5 million carousel interaction events. Following our privacy policy27, we retained no individually identifiable information.

In order to apply to the hypotheses laid out above, the data needs to address two points:

  1. frequency of interaction with the carousel,
  2. frequency of interaction with slides after the first one,

Defining Interaction Link

There are four ways to interact with the carousels that we tracked during this experiment (also shown in the figure below).

  1. Use the swipe gesture on a smartphone’s touchscreen to swipe left or right.
  2. Use an in-slide arrow button to advance or reverse the carousel by one image.
  3. Tap a thumbnail at the bottom of the carousel.
  4. Tap on the slide to zoom the current image in the carousel into a full-screen view.

To map our data to the Notre Dame data, we will consider the fourth type of interaction — zooming — to be the same as clicking on a feature. In both cases, the user is engaging with the carousel slide and requesting more information.

Another important note is that we considered only deliberate interactions as interactions. Touchstarts or touchmoves didn’t trigger interactions. Accidental swipes that didn’t result in advancement of the carousel also didn’t trigger interactions.

Results Link

1. Unique Interaction Rates

The first statistic that interested us is how often mobile users interacted with the carousel. We measured that by looking at unique interactions.

A unique interaction is the user’s first interaction of any given type with the carousel’s content or controls. If a user tapped five thumbnails, we would count it as only one unique interaction. We’ll investigate non-unique interactions in more detail below.

The data shows that around 72% of visitors to the page interacted in some way with the carousel. Thumbnails were the clear front-runner for interactions: 55% of visitors clicked at least one thumbnail.

1a. Proportion of Unique Interactions

Our data shows that the thumbnail controls were the most popular way to interact with the carousel. In fact, they were almost twice as popular as each of the other interaction methods and more popular than arrow and swipe interactions combined.


The ratio of unique interactions (View large version29)

Zooming was the second-most popular interaction type. Zooming is similar to swiping in that it has the largest trigger area of any of the interactions — you can tap anywhere on the carousel to trigger it. We have to assume that some of the zoom interactions we encountered were unintentional mistaps. That being said, the level of engagement with zooming was still high — too high to be accidental. Almost 23% of all visitors interacted with the zoom functionality.

Swiping was the least popular way for users to interact with the carousel. This strongly supports the case for providing an explicitly visible control system for interactions.

Both arrow and swipe interactions involve the same carousel action: advancing to the next slide. If we combine them, their interaction rate is very similar to that of thumbnails.


The ratio of unique interactions with arrow and swipe interactions combined as a single “advance slide” action. (View large version31)

2. Total Interaction Rates Link

In total, there were 2.4 interactions per carousel impression on average. This shows that for the 72% of visitors who did interact with the carousel, interacting with it many times was the norm.

2a. Average Number of Interactions of the Same Type (Non-Unique)

Users who interacted with thumbnails did so way more often than with any other control system on the carousel. On average, a user would interact with 6 thumbnails when they used the carousel. Swiping and arrows both had similar numbers of interactions: 3.5 and 3.9 on average. The low number of zoom interactions shows us that users only zoom on product pictures when they have a high level of interest.


The ratio of non-unique interactions (View large version33)

Thumbnail users having the highest average number of interactions shows that they are significantly more engaged than arrow or swiping users. Exploring how this level of engagement results in additional micro-conversions, such as “add to cart,” might be interesting.

If we combine arrow and swiping interactions, similar to how we analyzed the unique interaction data, then slide advancement emerges as the most popular carousel interaction activity.


The ratio of non-unique interactions with arrow and swiping, combined into a single “advance slide” action (View large version35)

3. Interaction Decay Rates

Using the data we collected, we were able to model the likelihood of a user interacting again after each interaction. In the case of slide advancement, this means advancing from the second to the third image after the user has advanced from the first to the second. In the case of direct interaction, this means tapping on the zoom of each slide after the first image.

We modeled this for each of the different interaction methods: thumbnails, arrows, swiping and zooming.

3a. Thumbnails

For each thumbnail viewed, there was roughly a 69% chance of the user viewing the next thumbnail. A more precise fit can be achieved using an exponential decay rate, shown in the figure below. Even though the user could view thumbnails in any order, most thumbnail users viewed the images in the carousel in sequential order.


Viewing incremental slides when using thumbnails matches an exponential decay. (View large version37)

3b. Arrows

For each arrow tapped, we found a roughly linear relationship with a more precise exponential model. In the linear relationship, there was roughly a 76% chance that the user would click the arrow again to view the next slide.


Viewing incremental slides when using arrows matches an exponential decay. (View large version39)

3c. Swiping

The swipe decay can be modeled linearly, with a 64% chance that the user will swipe again. A more accurate exponential model is shown in the figure below.


Viewing incremental slides when swiping matches an exponential decay. (View large version41)

3d. Zooming

The zoom interaction decay rate follow a power law; a linear approach would be a very poor approximation. An r2 of nearly .98 indicates an excellent fit.


Users directly interacting with carousel items by zooming follow a power law of decay. (View large version43)


Marketing Carousels vs. Image Carousels Link

There is an issue with comparing our findings to Erik’s data for Notre Dame. The types of carousel we’re using are different. I don’t think this presents much of a problem for our findings. While the two types of carousels may not be visually related, our findings show that the underlying pattern is successful. Our goal with this study was to determine whether the idea of a horizontally scrolling multi-slide content display is flawed. The data suggests it is not. The root problem for Notre Dame seems to be not so much carousels in general, but more likely the design.

Users may be exhibiting banner blindness with marketing carousels. Marketing carousels might also not be providing relevant information to users. There are so many reasons why a marketing banner carousel could be ineffective that it would be unreasonable to suggest that the UI pattern itself is the problem. We do sometimes use marketing carousels on our websites. An interesting follow-up to this article would be a comparison of our and Notre Dame’s data for those.

Luke Wroblewski, in a talk presented to Google44, brought up some data from Amazon UX manager PJ McCormick45. PJ shows off how Amazon uses marketing banner carousels and some much more optimistic data on its usage. Luke suggests that one of the big problems with marketing banner carousel design right now is that the controls are not obvious. Amazon’s carousel, shown below, definitely sidesteps this issue by providing overt carousel controls.

Amazon's marketing carousels use very clear controls to encourage interaction.46

Amazon’s marketing carousels use very clear controls to encourage interaction. (View large version47)

Mobile Interactions vs. Desktop Interactions Link

Our carousels are only on mobile devices. Notre Dame’s carousel is only on desktop devices. There is a chance that mobile users interact with carousels more than desktop users. This could be due to the ease of interaction with swiping or controls relative to the smaller control target sizes with a mouse. It could also be a more natural pattern for mobile devices.

The success criteria of the carousels measured here and of the carousels measured by Erik are different. The success criterion for Erik’s carousels is users clicking through to the content offered by the slides. The success criterion for our carousels is users navigating to the next slide and seeing all of the images.

The former criterion (users clicking to navigate to a new page) is at a much higher level. That may be why the interaction rate on Notre Dame’s carousel is much lower than the one we measured here.

University Website vs E-Commerce Website Link

Another limitation on comparison of our findings to those of Notre Dame is that the two user contexts may be so different that a comparison is impossible. The goal of a user on an e-commerce website is to discover information about products to make a purchasing decision. The goal of a user on an educational website is to learn more or find specific information about the university.

Steps For The Future Link

This data opened my eyes to how much research is still needed on carousels. There are some steps I would love to take or see other people take in the future:

  1. We would like to do similar studies on different types of carousels. It would be interesting to see whether our marketing banner carousels perform at similar rates to Erik Runyon’s data.
  2. It would be interesting to measure how interaction with a carousel affects a user’s actions further down the line. If they interact with a product image gallery, are they more or less likely to “add to cart”?
  3. I would love to see whether there is a good way to measure the likelihood of carousel interaction between mobile, tablet and desktop. Unfortunately, we don’t build desktop websites, so that data is less accessible to us. Direct comparison, instead of extrapolation from the data available, would help.
  4. The data shows that swiping is one of the least used interaction types. I have a theory that swipe interaction gets cannibalized by other interaction types, perhaps because it is still an unexpected method of interaction on the web. By presenting extra controls, users have an obvious way to interact with the carousel, so they are more likely to choose that method. It would be interesting to see if removing other control schemes causes swipe interactions to go up.

Conclusion Link

We started this article by going over why and how Mobify uses carousels on the websites we build. There are big differences between the different kinds of carousels. We find a compelling use for them by presenting extra contextual information, without forcing the user to scroll.

Most of the data that exists so far on carousels is based on marketing banner carousels. This data supports the argument that interactions with carousel content are quite low — on the order of 1.07%. It also suggests that the chance of users advancing the carousel and interacting with the next slide is extremely low. The data also raises some valid points about carousels in general: They aren’t accessible, and auto-advancement is bad.

Our research found little in common with the data presented by Erik Runyon for Notre Dame. Users interacted with our carousels at a high rate. They also interacted with additional slides at a rate that is much higher than the Notre Dame data suggests. There are some pretty good reasons for these discrepancies, which we discussed in the “Considerations” section. They’re definitely very different carousels with very different goals. For me, that’s the biggest conclusion to take away from this article.

Carousels come in many shapes and sizes. Some can be effective, others less so. We need a lot more data from a lot of different situations before we dismiss the pattern entirely. Based on Erik’s research, arguing against home page marketing carousels is fair. The user doesn’t know what to expect from the slides, and so they won’t likely want to flip through them. If you’re using it in a context that clearly indicates what the next slide holds and why the user should view it, then a carousel might actually be the perfect solution.

Don’t use a carousel just to get additional content on the screen. Think of carousels for one particular use case: providing additional content within a specific context. Use a carousel when vertical space is limited — as it is on mobile — and when the content is directly related — especially if the content isn’t useful to the user.

Don’t use a carousel if the content isn’t interesting or useful. The first slide has to sell the next slide to the user. Why would someone advance a slide to get another marketing banner unless something is in it for them? Like the rest of our content, carousels need to be engaging in order to be effective. If people aren’t interacting with your carousel, it might not be your carousel’s fault.

Don’t use a carousel if you need the user to see all of the content. Even if your carousel is effective, remember that most users aren’t going to see every slide. The first slide should always show the most important piece of content, and they should all be ordered by importance. If viewing multiple slides is important but not necessary for your content, I recommend using thumbnails as controls because users are more likely to view multiple slides48.

It turns out that there isn’t one answer to this question. In certain situations — as with marketing banners — the answer might be an emphatic no. In others — as with product image galleries — the answer is a definite yes. As with any design pattern, if you find yourself asking, “Should I use a carousel?,” then there’s really only one right answer: if it’s right for your users.

(da, ml, al)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9 #luke-carousels
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15 #unique-interaction-rates
  16. 16 #findings
  17. 17 #interaction-decay-rates
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22 #findings
  23. 23
  24. 24
  25. 25
  26. 26 #considerations
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48 #avg-interactions-same-type
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Kyle Peatt (@kpeatt) is a designer and front-end developer. He strongly believes that designers should also be makers. Kyle leads a team of like-minded individuals at Mobify. He has been working in the web for 10 years and in mobile since the launch of the iPhone. Kyle writes, speaks, and argues about designing and developing for an increasingly multi-device medium. He holds a degree in Sociology from the University of British Columbia but can more often be found holding a pair of strings that lead to a kite.

  1. 1

    Michael Schofield

    February 9, 2015 3:42 pm

    I think this is really compelling, and while I would add that discussions about whether to use a carousel should very much boil down to performance and techniques for implementing them quickly and accessibly, I’m kind of glad Kyle (and co) wrote this. I think it’s easy for a lot of the web industry to jump the best practices bandwagon and adopt one without considering it contextually.

    In general, I think most carousels probably adhere to Erik’s and Nielsen’s findings, but even in academia there are cases where the implementation of a carousel after a redesign as actually increased engagement.

    There is a carousel on the Sheridan Libraries of John Hopkins University website (, which is very much a purpose-driven site: it’s a tool for students and faculty to conduct research. That said, I’m friends with one of the devs who said that the carousel they implemented has a pretty high interaction rate.

    The thing to notice is that the carousel isn’t exactly in a prominent place, the content is actually compelling and it’s not totally driven by just a large graphic, and it shows three news items at a time.

    So, anyway, I’d definitely be interested in seeing more data about different types of carousels :).

    • 2

      Thanks for reading, Michael! You hit what I was going for right on the head: let’s think critically about patterns and anti-patterns instead of just blindly following popular opinion.

      I think a large problem with marketing banner carousels as they currently exist is that the design does not do a good job of creating interest in the content. That’s why I called out that specific Amazon carousel. I think they do a good job of letting the user know exactly what they’re going to get and why they should click through.

      I’d be really interested in seeing the usage data from that carousel. My assumption would be that they’d have a high number of clicks on the first three panels shown as they look pretty actionable. I’d love to see how that falls off as users dig deeper into that content. You should ask your friend to publish some findings!

  2. 3

    I think this article could’ve been helped significantly defining “carousel” instead of assuming a definition from the outset (you later call the bad ones “marketing carousels”). You guys are using them to show details about products so the user has already engaged and committed content exploration. What most of us are reacting to are the bloated, politically-motivated news carousels that sit on home pages (“marketing carousels”). Your carousels are in a different category, and I think this article could’ve been helped by being more specific in its language from the outset.

    • 4

      Hi Chris,

      First of all, thanks for reading the article! I think you make a really fair point. There is a huge difference between marketing carousels and product image carousels. Engagement is much more likely to be higher on the latter. My goal when I was writing this article was to address the fact that carousels aren’t necessarily bad but some implementations of carousels are bad. The reason I avoided making as much of a distinction between the types of carousels when presenting this research was to show that the pattern itself is not flawed — as a counter point to the research I linked to at the top of the article.

      I attempted to clarify this a bit in the Limitations section under Marketing Carousels vs. Image Galleries but maybe this should have been addressed further up the article.

      Again, thanks so much for reading and I really appreciate your feedback!

      • 5

        Bad methodology

        February 11, 2015 10:09 am

        Chris has got it exactly right. What would have been REALLY interesting would have been to segment your test to compare the performance of “marketing” vs. “catalog” carousels (which to the best of my knowledge never caught quite as much flack, except for bad implementations).

        Instead you’re just saying “I don’t think this presents much of a problem for our findings.” Well, sorry but that sounds horribly wrong coming from someone who sets out to prove using data that carousels actually work. Just measure it!

        The first thing you learn about conversion optimization is that your opinion doesn’t matter for s**t.

        Besides, I’m not sure your test proves anything about the value of carousels, which would have to be tested against non-carousel variations. Absolute numbers don’t mean much if you don’t have a comparison.

    • 6

      Exactly, a lot of comparison of using carousels as a splash page marketing billboard versus product detail page images. Apples and oranges. My takeaway after reading this is splash page billboard carousels are useless and utilizing carousels further down a funnel makes it more useful to the user.

  3. 7

    Funny, I was on the CT Shirts website just this morning with my iPhone 6, and found the carousels quite useful (the default shows the shirt, swiping shows the details of the fabric print and colors).

    Regarding the previous commenter, it’s not about “marketing” vs. non-marketing carousels – ultimately they are all trying to get you to buy, so they are all marketing carousels. The question is whether they are *good* marketing. The litmus test is whether they respect a customer’s attention or pushing the seller’s marketing agenda, heedless of whether it is appropriate in this context or not.

    Frankly, my biggest peeve with e-commerce sites are those obnoxious splash screens they post at you when you first visit, trying to get you to sign up for a newsletter. Even bad carousels are pretty low on the list of annoyances in comparison.

    • 8

      Thanks Fazal! I think respecting the customer’s attention is a really good way to put it. If you want your users to read or look at your content, you need to respect their context and their needs. Nice spot on the CT Shirts too :).

      Thanks for reading!

  4. 9

    The article was really worth reading and study about carousel on cross platforms. Personally I’m reluctant to implement a carousel on a mobile device but if it worth for users, why not. I recently saw a carousel on web that the left, right arrows are piled together on the right side avoiding the user’s mouse to travel. ( )
    I don’t have any research about the carousel but it is very interesting to know.
    There are many style carousels that we have to be careful about design and how we present it.

  5. 10

    Thank you for writing this article and looking into the current mainstream view of the in-effectiveness of carousels. While I find your findings interesting and value the research you have done, there is a great difference between a marketing carousel banner on a homepage and a carousel of product images on a product page. They both have a different purpose and context and different meanings to users. On a product page a user is already interested in a product and the chance of interactions will be higher as the purpose of those slides would be to show more details and perspective. The content and context of marketing slides are often very different and range from value propositions, services and products to slogans and testimonials. In the case of a university they will have to sell their institution, build confidence and gain trust of potential students. These slides would consist of text and call to action buttons. Marketing slides therefor have a much harder sell to do. We are currently A/B testing such slides and I believe they haven’t been thought through properly. The results will be in soon.

    • 11

      Hey CC, great points. You should really publish the information you find from your A/B test. The more data we get out about carousels, the better informed we can be as designers and developers.

      You’re totally right in that the context is different and the jobs of the two carousels are different as well. My goal was to prove that the pattern itself isn’t ineffective but that different implementations of them definitely can be. I highly recommend you take a look at the Amazon example that I posted in the Considerations section for an example of a marketing banner carousel done well. Luke W shows off a graph of its effectiveness that looks pretty compelling.

      Thanks so much for reading,

  6. 12

    This is really a knowledgeable share. I have learnt that Carousels are definitely being widely used and the impact of the same can be greater.
    During this marketing trend Carousel are needless. How can they effectively help us is what that matters.

  7. 13

    It seems obvious (intuitive even, as the principle is true of all things) that carousels — i.e. sliders — are superb tools in the right hands.

    The problem, of course, is that one simply need peruse the vast majority of use cases to see that the whole idea of how to appropriately purpose a carousel, let alone implement one with performance in mind, is an idea that the entity who has implemented it is ill-equipped to understand. Let’s be honest: it is an anomaly to see a ‘well done’ carousel and most website designers implement them for the “ohhhh, pretty! (thus spake the client)” factor, performance, context-contributing-to-meaning and UX be damned (most designers that make use of carousels assume the mere presence of a ‘good looking’ one is something that ipso facto equals a positive UX factor).

    If for only this reason, I do believe, generally speaking, that the use of sliders/carousels, should be discouraged, as most sites are blowing off their own foot with them. I further question whether or not their ‘proper use’ is actually something that can be learned or trained for.

    Sorry to be the cynic (realist?), but someone has to do it.

    • 14

      Hey AJ,

      Thanks for reading! I think you make a good point. Patterns are not inherently bad or good — our implementation of them is what matters. That said, I think it’s actually pretty dangerous for us to decry patterns as actively bad to the general public.

      A lot of the articles out there right now say pretty flat out: “don’t do it”. No room for nuance, no room for discussion. This harms the industry more than it helps because it stifles critical thought. Instead of discouraging developers and designers from implementing carousels because they have the opportunity to do a bad job, we should be arming them with all of the information they need to do a good job. So instead of it being an anomaly to see a well implemented carousel, we’ll see people putting them in awesome novel new spots because they understand why and when they’re effective and ineffective.

      I really appreciate your comments and your time reading the article! Thanks so much!


  8. 15

    I would say that the nature of a carousel’s success depends on the target audience of it. That might seem like a novice and obvious statement but quite often I find people put a carousel on a website because it’s “on trend” and it gives them more content in the same space. I believe that if you are on a website to browse or explore products or content you are going to be far more receptive to the carousel suggesting products or articles to you. I see it like a shop assistant trying to sell you something, if you know the product area well they are a nuisance, but if you are somewhat clueless or have any curiosities about other products they are often quite helpful.

    I think we are seeing less and less carousels on websites now. This is probably because people are taking into consideration exactly what there website needs to focus on in a prime area of the first UI they see. There are more and more instructional or conversational headings with a clear link to relevant stream(s) of content.

    I still think carousels have their use but probably less and less for navigational promotion and more for supporting content on pages, e.g. a feature based carousel on a product page to lift existing content from the page.

  9. 16

    Luiz Centenaro

    February 10, 2015 5:06 pm

    Thanks for putting this study together Kyle, I was talked out of using carousels for good reasons but you do make solid points about when, where and how to use them. Never the home page and the idea for product detail pages works well.

    What do you do to combat page load time and thanks for mobify/scooch.

    • 17

      Hey Luiz,

      Thanks! When you say combat load time, are you referring explicitly to carousels or just in general?


  10. 18

    What were the ages of people tested?

    • 19

      Hi Tim,

      We don’t have the ages of people tested as we used events tracked anonymously via Google Analytics. If I were to guess based on the sites we measured, the range is probably 15–55 but that’s entirely a guess.

      Thanks for reading!

  11. 20

    I am definitely not a fan of the carousel feature in both e-commerce website and you general stock standard website.

  12. 21

    It’s great that you took the time to look into this further and a couple of commenters have hit on this already, but you’re essentially comparing apples and oranges here. A bloated ‘marketing spam’ carousel on any site (mobile or otherwise) isn’t going to be useful to most users–but a swipe through of product images on a mobile site? Absolutely an efficient interaction.

    I think what your article points to more than anything is that there are no ‘best practices’, and that the context of every situation needs to be considered before any UI decisions are more.

    I’d also be careful of basing all of your conclusions or research on quantitative data alone. Millions of data points cannot replicate the depth of understanding that running something like this by even a handful of actual users provides. It’s great to know what percentage of people advance beyond the first slide or image, but watching users actually interact with it will likely give you a lot more insight as to *why*.

    Do people understand they can swipe? Does providing ‘dots’ or arrows to indicate multiple images help contextualize that? Do users advance by touching the actual dots or just guess at swiping? Which do they seem less confused by?

    All questions that a numbers-based investigation alone can’t really help you with–and usability testing needn’t be exhausting, time consuming or expensive.

  13. 22

    The data analysis is great, but I am sorry, you can’t compare an “image gallery” displayed by the mean of a “carousel” with “promo and ads” displayed by a mean of a “carousel”.
    These are two radically different use cases that happen to use the same interaction widget. Moreover you should also consider that all research behind why carousels are bad (the ones abouts promotions and ads) is aggravated by the fact that they tend to occupy a truly significant slice of real estate on a landscape screen, whereas that may not be the case in a portrait screen, plus as you say, swiping kn a touch screen is also different than using the mouse or a trackpad on a computer…
    But the data and the analysis about the interaction with the carousel interface i found really interesting and helpful

    • 23

      Hi Luca,

      Thanks for your comment! That was actually my point. Carousels come in so many different shapes and sizes that it seems crazy to say “Don’t use a carousel”. Instead, we should be carefully considering why and when to use them. The goal of this article wasn’t to say that previous research was flawed — simply to provide a counter point for the pattern.

      I don’t necessarily agree that the two types of carousels are “radically different” as you say. In both cases, we’re asking the user to engage with more content to make a decision. In the case of a Product Image Gallery, we’re doing a better job of convincing them why they should bother to interact with it. Marketing Banners don’t do this. We could likely design more effective carousels, like the Amazon one, if we understood that that was the problem instead of ditching carousels outright.

      It’s an effective pattern when used well. Let’s not drop it wholesale just because some people haven’t used it well.

      Thanks so much for reading!

  14. 24

    Fantastic. I’ve never lost faith in carousels. I always felt those against them were misunderstanding how and when they could and should be used.

    Having developed many news-type sites, and therefore looked at others, the carousel is ideally suited to them. It doesn’t matter that there is a sliding scale of interaction, since the news in the slides gets older as the viewer progresses, so less relevant to many readers who’ve already seen it when it was at the top of the slide pile.

    And of course, carousels are an ideal interface on mobile as many touch device interface actions and elements are carousel-like.

    On the web, there are only two ways of displaying content: Single layer or multi-layered.

    Another way to think about these two forms is by their interaction: Scrolled and navigated.

    Single layer is everything on a page visible with the only navigation possibly needed being scrolling. It is a linear style.

    Multi-layered is anything where the content is changed without scrolling. This is things like tabs, carousels, and even traditional page hierarchies navigated with a menu system. (Of course, each layer itself is a single layer.)

    The single layer is having its day in the sun after many years of multi-layered ruling the roost. On many sites, there isn’t even a page hierarchy – everything is one one page.

    The challenge of all web design is getting your content seen.

    The single, flat, one page site hopes you will scroll the whole page. In print media, single layer examples are the poster, the flyer, business card etc.

    The multi-layered approach hopes you will navigate to the different content layers. Will the viewer click/touch on the menu items? Will they navigate the slideshow? Will they click/touch the tabs?

    In print media, multi-layered examples are the book, the newspaper, the brochure, the catalogue and so on.

    Each approach has its pros and cons and situations it should be used. Neither should be dismissed simply because of trendiness or the opinions of vocal opponents (unfortunately often informed by limited studies or personal preference).

    A good designer understands the benefits of all the techniques available.

  15. 25

    Thanks for sharing the efforts of yours. It was worth reading the post. Great information. Cheers!

  16. 26

    Good article.

    Until you have A/B tested the same content *without* a carousel, I still think you can’t argue against “all carousels are bad”. Some just happen to be worse than others.

  17. 27

    Lucas Teixeira

    February 11, 2015 2:26 pm

    I found this article really helpful.
    In my work (a news website) we discovered a number really similar.
    I won’t be able to share the exact amount of users, but more than half of our sessions (in a homepage) swipe the highlights on mobile, and the same amount clicks on arrows on desktop.
    It was also a surprise for us after all of this “don’t use carousels”…

  18. 28

    Fernando Castillo

    February 13, 2015 2:15 pm

    M-Commerce is reaching its ultimate height with its uses. According to my view carousel has gained acceptance on its support.

  19. 29

    Great write-up Kyle.

    First, I’d like to correct one item in the article. At one point you make note that “Notre Dame’s carousel is only on desktop devices.” This is not correct. The carousel on appears slightly different between mobile and tablet/desktop, but it exists on all sizes. This is the case for the other sites tested as well.

    Second, I’m glad you’re conducting these tests. There’s a huge difference between our industries. I’d be more surprised if there wasn’t a difference in our results. Each site should take into account its own users, design, and use-cases and never rely on the numbers from an unrelated industry. Just an FYI, I added a link to this article from my original posting.

    • 30

      Thanks for your feedback, Erik! I feel exactly the same way. I think there’s a bit of a tendency for people to conflate articles with “the right way to do things” so I wanted to approach this from a different angle and try to encourage people to think a bit more critically. I really loved your data-driven approach in the initial articles so I really wanted to replicate that here and see what we found out.

      Sorry I missed out on your mobile/tablet information. Were those users part of the sessions tracked in your data?

      • 31

        Yes they were. I could probably segment out the conversion rate between device sizes. Future post maybe.

  20. 32

    This is a great area for investigation, Kyle.

    However, I’m a little confused as to the measures you chose to assess the effectiveness of a carousel in an e-commerce context.

    In an e-commerce context, conversion is almost always the critical measure. A simple A/B test of a single static screen, vs a carousel, would tell us if carousels sell more product. More extensive testing might also compare unrolling the carousels (ie: multiple inline images), or splitting the images up within the product detail page.

    Using Optimizely, we’ve done just that: tested multiple product detail page layouts, on a large-scale e-commerce site. We found that sales were maximised by a single image at the top of the page, followed by product description text, followed by the additional images inline.

    Of course, this could vary by category; as Erik notes, it’d be surprising if results didn’t vary by industry. But our gains were significant (ie: a 27% lift over a single carousel at the top of the page). I think this is another example where simple multivariate testing trumps theorising.

    • 33

      That’s really interesting, Che! I’d love to do some multivariate but it’s something we don’t get the opportunity to do that often.

      My goal wasn’t to test whether carousels lead to higher e-commerce conversion (definitely an awesome thing to study) but instead to just see if people were using them at all!

      Some additional research into whether they negatively affect conversion could be very interesting, indeed.


↑ Back to top