Why 1% of people click through carousels, what we can learn from it and what it means for our industry.

By now, most of us probably know that carousels have a low click-through rate. Somewhere around 1%, to be more specific. The same study linked here, has also shown that, of this 1%, only 11% clicked through to one of the next slides.

If you struggle to make sense of this number, what this actually mean is that if you feature your products with a carousel, only 0.12% of all people visiting your website will most probably ever click to see your other featured products in the carousel. (PS: This is not a typo. It’s 0.12%. Zero Point Twelve.)

Let’s make this stat dummy proof:

If you want people to see and click through your featured products, a carousel is a really broken and ineffective pattern to use.

You might think this is an interesting fact, but here’s a more interesting one: Did you know that 1 out of every 2 e-commerce websites still use carousels to feature their products? Well, me neither because I just made this stat up. But if we look at lists like this, it just as well could have been. Nearly 15 out of the 30 sites listed here use a carousel.

So, why do people still use carousels? I’m not exactly sure, but here’s a quick poll that can help us with this question:

Which statement is most applicable to you?
a) I didn’t know carousels are ineffective
b) I know carousels are ineffective in general, but mine isn’t
c) I use them because they are beautiful
d) My boss told me to use one
e) I don’t know of a better alternative
f) I don’t use carousels at all because they are bad‍

Up until a few months ago, my vote would have been e), because I thought there wasn’t a better alternative. But that’s a myth. There are alternatives to carousels that look great, pack a punch to give you a higher click through rate and silence the politics.

So, are you ready to explore one of these alternatives with me? Great! Then buckle up and get ready, because we’re about to discover more than an alternative pattern.

Let’s start by unpacking some questions…

What make carousels so broken & ineffective?

While I was researching carousels over the past few months, I came across nearly a dozen things that render them broken or ineffective. You might be familiar with most of them, but this includes:

1. Small interactive areas
2. No indication of the number of slides
3. Auto forwarding without the option to pause
4. Not mobile optimised
5. No clear Call-to-Action
6. Marketing message is part of the image
7. Increased page weight
8. Primary means of navigation
9. Too many slides in the carousel
10. Poor accessibility

Enough has been said about these points, so I wont discuss them here.

Now, something very interesting occurred to me...

Even if we fix all these things, carousels will continue to perform poorly.

Why would that be? Let’s find out with a quick design exercise:

Let’s make the interactive areas, like the arrows, bigger and clearer, indicate the number of slides available, add a clear CTA, and fix all the other things that is broken about them. We end up with something that could look like this…

It doesn’t look much different from an ineffective carousel, hey? Even though we’ve fixed all the things listed above, this optimised carousel will still perform poorly for this simple fact: All the products, except the first one, are hidden behind an arrow and there is very little incentive for people to click on them to discover more.

The #1 reason only 1% of people click through carousels is this simple fact: They hide your products.

How can we fix this?

So can we fix this? Yes, we can! How about this?

This is a product slider (live demo here). It’s main purpose is to fix what’s broken about carousels — to make products more visible & obvious. This automatically give products more eyeballs, clicks and sales.

You will see that there are 4 characteristics that enable this:

1. Products are more visible
   All products are more visible on the right, with clear labels to indicate how many and what products are featured. This characteristic also follows Fitt’s Law — increasing the size of interactive areas and allowing people to explore products faster & easier.
2. It is fully responsive
   Different devices requires different solutions. Therefore, on smaller devices where screen real estate is limited, products peek out on the right of the screen to encourage interaction.
3. Clear text & buttons
   The marketing message and buttons are in clear plain text on top of the cover image. This allow for optimal readability and conversion, no matter the device size.
4. Improved usability
   All the major usability issues mentioned in the list to the top, is fixed as well. It doesn’t auto rotate, images are size optimised and it is more accessible.

You can still kind of get away without the last 3 points, but it really is the first point that completely changes the interaction behaviour.

But there’s more to a pattern than fixating on clicks and sales.

Amazon, carousels & our industry

This is where it might get a bit uncomfortable. The product slider I described above, isn’t a new pattern and I definitely didn’t come up with it. It has been around for quite a while and is now famously used by Amazon. The interesting thing is that they use a carousel on their home page as well. “No ways!”, I hear you say, “If carousels have such a low click through rate, how can Amazon, of all companies, do such a thing?”

Well, I don’t know and I can only speculate. My best guess would be that they are either A/B testing the conversion between carousels and product sliders or perhaps they’ve already tested it and decided to rather use the carousel because it looks more beautiful. Or perhaps they are completely oblivious. It is highly unlikely though.

So what does this mean? Should you use a product slider on your product pages and a carousel on your home page because Amazon or the rest of the world does? No, please don’t. We‘ve already gone down this path with the hamburger menu when Facebook used it back in the days. (Psst… It’s not their primary means of navigation anymore. Just for incase you missed it.) The result? A big chunk of internet is now using it. That’s despite it’s bad usability and navigation capabilities.

Now, this isn’t Facebook’s fault. We only have ourselves to blame; both product designers, engineers and entrepreneurs. Maybe you…

Let’s learn from this. We need to stop copying patterns. Especially if we are too lazy to think through the problem we’re trying to solve. We need to run more experiments and measure more. That’s the only way our industry can grow out of infancy.

And yes, I know it’s big frog to swallow, but as a tech industry we are still in our infancy (in comparison to architecture that’s 1000’s of years old). We’re just starting to walk, learning what work and what doesn’t work. But don’t fret. This is normal. Kids go through the same thing as well and most of them grow up in the end. So I’m quite optimistic about the future of our industry.

Experimenting forward

6 months ago I decided to start experiment with UI patterns; to create ones that work - tried and tested in different countries, cultures and contexts. I created thispattern.com as placeholder for these patterns, and Product Slider is the first-born of this experiment. It’s aim is to challenge what has been written about carousels so far and what I’ve come to accept about them as a result of that. I remain wary of my assumptions and I’m open to be proven wrong. That’s the most important part of experimentations: to remember that what we put out in the world, is a hypotheses and we could be proven wrong at any point.

So, should you use a carousel or a product slider? Well, there’s really only one answer: if it’s right for your users. And there’s really only one way to know and that’s to test things.

If you don’t have time for testing, here’s simple rule of thumb you can use with your next project:

Obvious always wins.

For this simple truth, together with some basic maths, I am pretty confident that a product slider will outperform a carousel every time.

With all of this said, in the end, it’s up to you to decide.

Lastly…

So, how effective is your carousel? Have you used something else that is more effective? Let me know, I would love to hear about it. We need it.

Not sure how your carousel is performing? That’s fine. I’ll tell you a secret: Few people do…

Let’s run more experiments. Let’s measure them. Let’s be the kid who grows up.

See you around

You can download Product Slider over at thispattern.com