The Next Generation of Visual Website Optimizer is launching in April 2014 See What's Coming

Image Carousels – Why You Shouldn’t Use Them and How to Use Them the Right Way (If You Have To)

Posted in Conversion Optimization on August 13th, 2013

Oh the annoying merry-go-rounds!

I’ve lost track of the number of times I’ve tried to get hold of those running slides. It’s just so irritating to try and hastily read what has been written before another slide takes over. Now, I don’t even bother to scan any further than the first slide of image carousels.

I thought I’m the only one who couldn’t stand these automatic sliders. But thank god, there are others like me as well! A usability study by Neilson Norman group confirmed that auto-forwarding carousels annoy users and reduce visibility.

The study highlights a couple of reasons why these believed-to-be “cool” design element are actually not good for your site’s usability or conversions:

  1. Automatic rotation makes the user lose control of their interaction with the site. This is especially annoying for users with motor skill issues.
  2. They create banner blindness and are often easily ignored by users. The eye tracking example below from another source also validates this. You can see how the image slider (the black area in the picture) hardly gets any attention by site visitors.

    Eyetracking study shows that image carousels are ignored by visitors

  3. Low-literacy users and international users (whose native language differs from the language on your website) often read slowly. A user clearly expresses his frustration in the study when he says, “I didn’t have time to read it. It keeps flashing too quickly.”

I wonder if these sliders are so confusing and annoying for so many other users, why is it that they are almost everywhere? Open a few eCommerce websites and you’ll know.

As it turns out, image carousels or rotating banners are often thought of as an easy solution to provide better navigation to all the important content/offers on the site. The data suggests otherwise though.

Notre Dame University tested their carousel. The chart below shows the results they found. Only 1% of total visitors clicked through from the carousel, and majority of these visitors (84%) interacted with only the first slide of the carousel.

Traffic decreases drastically after the first slide

Okay, I get it! Every department wants to have their special offer on the homepage.

And of course, carousels are an easy way out to make everyone happy.

But frankly, 1% of clickthrough rate from something that occupies major homepage real estate is a clear waste of efforts. Do you still think image sliders are a good idea?

Apart from posing a usability challenge, carousels stuff multiple offers in one place, which is a big conversion killer. Like the proven conversion wisdom suggests, you should ideally have only one offer or call-to-action per page. And carousels definitely are the offenders here.

Too many offers together just say, “We don’t know what should be our top priority, so we dump them all together here and see which one works the best.” Man up and take some responsibility, people! Decide the priority of your offers before you proceed any further.

Done?

Okay, now if you are ready to get past this rather detrimental “standard practice,” here are a few image carousel alternatives you can try…

Focus Your Homepage on Your Primary Offer

Put your best foot forward. Let your most relevant offer catch the attention of your visitors. And add on a few offers that consistently perform well for you throughout the year. You can see how Ben Sherman implements this on their homepage:

Ben Sherman focuses on only one offer

In the above image, only the blazer offer is what the visitors can see above the fold.

Don’t make your website look like a promotion hoarding. You need not hold onto every offer that you have promoted earlier. Like Paul Phillips mentioned in one of his articles, every offer has an expiry date.

Convert Each Slide into a Targeted Homepage for Specific Visitor Segments

Let’s say, you have a global clothing store online. Now, countries often have different clothing trends. So, you can segment your visitors on the basis of their geographical location with the help of your A/B testing software.

Show them the homepage that promotes an offer about the most popular clothing trend in their country. This is a great replacement for a “one-size-fits-all” image slider solution that shows 4 slides, out of which 3 are more suitable for trends in the US (because 80% of your traffic comes from the US), and 1 slide is for UK.

But guess what? Probably you are passing out on the preferences of visitors from other countries. So, even if you have made efforts to ship everything to those countries, your conversions for them will still be poor.  

Instead of showing your visitors an ever-rotating image slider that lists maybe even one offer per slide for the 5 major countries from where you get majority of your traffic, why not just do away with that damn slider and replace it with showing your visitors only their location-specific offer? You can easily use pre-set segments in Visual Website Optimizer to set this up in just a few clicks.

As Depesh Mandalia, the eCommerce & Digital Expert, has been rightly quoted in this eConsultancy article:

One focused banner message will drive higher CTRs than a few unfocused banners. Serving 100% of your visitors is near-on impossible without knowing something about them yet there seems a self-persuasion with content managers that more choice is good = more clicks = more sales. It doesn’t work that way.

Not enough? Too stubborn, aren’t you?

So if you REALLY want to go ahead with this even after hearing all those reasons, do it the way Sephora did:

See the image below from Sephora’s homepage:

Awesome Image Slider Execution by Sephora

Now this is hands down, one of the best executions of image sliders I’ve seen on the Internet. Some of the reason why it is so great:

  • They limit their carousel to only 2 slides
  • Loads super quick
  • The slider is manual and not auto-rotating
  • Clear navigation buttons on the sides that are carefully placed over white overlays so that they are easily visible
  • The two offers displayed in the slideshow are relevant for their complete target market, and not just a particular visitor persona (like, teenage girls, or women over the age of 40)

If you think you can pull this off like Sephora, then by all means go ahead and give it a shot.

Although all conversion experts, including Peep Laja, Tim Aish, and Chris Goward, strictly recommend that you should get rid of image sliders, I think there’s one small exception to this rule. And that is photography websites where sliders can be used to display image portfolios.

But this doesn’t change the fact that moving UI elements are notorious for their reputation to be nothing but a distraction. So, even when you plan to use an image carousel on a photography website, make sure your slide frequency is not too fast. Around 4-5 seconds per slide should be fine. And of course, empower your visitors. Give them the control. The carousal below from Royal Mail is a perfect example:

Pause and play button on the Royal Mail carousel

See how the pause and play buttons are prominently provided over the carousel to suit users’ preference. An extra heads up to this one for making the main call-to-action permanent over the slider and not a part of the rotating images.

Key Takeaways:

  • Don’t use image sliders

But let’s admit it – these rotating banners are not going anywhere sometime soon. Thanks to the herd mentality! So, if you really have to, here is a quick summary of what you should keep in mind:

  • Quick load time
  • Keep your slide frequency slow
  • Let users control the show (either provide pause and play buttons, or keep the image rotations manual and not automatic)
  • Your slide navigation options must be very prominent and obvious (huge arrows on both sides placed over the white overlay work well. Small dots buried in the corners of the image sliders do not)
  • Offers on the slides must be relevant to your entire target audience (and not just a particular visitor persona)
  • The lesser the number of slides, the better.

No matter which one of these image slider alternatives you try, don’t forget to A/B test it. Even if you are 100% confident that your treatment page will increase conversions, test it just to see how much percentage improvement it means over your Control page. And by all means, please come back here and share your experience with me.

Smriti Chawla

Content Marketer at Visual Website Optimizer by the day, SEO enthusiast by the night. I love reiterating quotes and collecting weird people. You should follow me on Twitter.

The Complete A/B Testing Guide

Know all that you need to get started:

  • What is A/B Testing?
  • Is it compatible with SEO?
  • How to start your first A/B test?
Show Me The Guide


Tags

8 Comments
Unmana
August 14, 2013

Yes! Thank you! I’m often mystified at other people’s love of image carousels. I find them annoying, for exactly the reason you suggest: they don’t let me control the interaction and go through the content at my own pace. As a result, I usually scroll down and ignore the carousel altogether (if there’s anywhere to scroll down).

B. McKenzie
August 14, 2013

“But frankly, 1% of clickthrough rate from something that occupies major homepage real estate is a clear waste of efforts. Do you still think image sliders are a good idea?” I think this question is asking us to leap to a conclusion far beyond what the data supports.

1) It’s a university website. I’d be leery about blindly assuming that something which is true at one nonprofit website is also true for a commercial website. This needs to be tested.

2) ND’s gallery focused on secondary elements which were not terribly relevant or interesting to visitors. Generally, most of the galleries I have running right now direct customers towards the most popular pages.

2.1) We don’t have any data comparing the clickthrough rate on these links when they were in an automatically rotating gallery vs. as a user-controlled gallery. This is the only way to compare whether the gallery’s rotation is the main factor or whether there are outside factors (e.g. whether the content is interesting).

3) This test would only apply to home pages.

4) The above data appears to rest on the assumption that an image is only useful if it causes someone to click through. When I use galleries on subcategory pages (e.g. to show off casement windows to convince someone to call in for a window quote), clickthrough rate is not a consideration.

I’d definitely recommend testing auto-rotating galleries vs. manually rotated galleries vs. a single static image, though.

Smriti Chawla
September 6, 2013

@Unmana – Yes, I’m not a fan either.

@Brian, agree with your points to an extent.

1. “I think this question is asking us to leap to a conclusion far beyond what the data supports.” – Maybe, yes. But it wasn’t completely baseless.

I meant to write this as an opinionated piece. And even though the data stated before this statement might not seem sufficient, the links to known conversion experts, like Peep Laja and others (strongly recommending not to use carousels) support that statement and should be sufficient, I believe.

2. The appeal of the content does matter. But carousels mean that you’re providing multiple choice to your users, which often reduces conversions.

2.1. Yes, I wish someone runs a test comparing automatically rotating sliders with user-controlled sliders. :)

3. Not sure why you’d say that? The points apply to almost all image carousels, I believe. You have any example for me where this won’t apply?

4. I’m guessing your casement window gallery only display images in the carousel?

Sanket
September 18, 2013

Agree. Sliders are annoying.

But if you have to have a slider, have a user-controlled one with small thumbnails of what the other slides have on the bottom or the right.

Dave
October 26, 2013

Great article, and fantastic information to discourage my clients from using a slider.

What I don’t like about this article is that you are opening a new window on me when I click an external link. Maybe next article should be titled How to Annoy Users by Opening New Windows ?

Chuck
November 7, 2013

What if we used the sliders as a slide show that had a purpose, that would need the slide to tell a story or build engagement? For example:
slider #1: Picture of man at computer looking confused. Text asks “Who has the lowest interest rate for car loans?”
Slider #2: Picture of a group of happy people. Text says “YOU do!”
Slider #3: Picture of your logo, something representing your company etc. Text says “Click here to find out how low!”
I’d make each slider be able to click through to the same target page.
This way the sliders aren’t competing against each other, but are building engagement and creating a “pain” (finding the lowest rate”. What do you think?

Yuna
November 8, 2013

I like sliders, especially on recipe sites, or even on amazon.

Of course, it’s even better when it’s easily controlled. I try to find a way to control it. Sometimes there is that option.

So, my take away is that the slider should be controlled in some way.

Sliders are great for seeing a lot of pictures at one time. The pinterest type sometimes looks cluttered to me.

I do appreciate this article and it has some very valid points. Thanks! :)

Smriti Chawla
November 8, 2013

@Sanket – We’re in agreement there!

@Dave – Sorry about that. Fixed!

@Chuck – Super interesting stuff. I’d love to see a test where image sliders are used to weave a story to achieve one goal. As long as the user has the control over the slider movement, I think it should work well. But test, test, test — the mantra must be used fir validation. :)

@Yuna – That’s right. Image sites like Pinterest can take advantage of image sliders as long as the user is handed over the control for movement of sliders.

Glad you found the article useful. :)

Leave a comment
Required
Required - not published


9 × = seventy two

Notify me of followup comments via e-mail.

RSS feed for comments on this post.

I ♥ Split Testing Blog


Stay up to date

Recent Posts

Write for this blog!

We accept high quality articles related to A/B testing and online marketing. Send your proposals to contribute@wingify.com