How to Use Image Carousels the Right Way ?
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:
- Automatic rotation makes the user lose control of their interaction with the site. This is especially annoying for users with motor skill issues.
- 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.
- 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.
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.
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:
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 VWO 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:
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:
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.
- 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.