Carousels Are Killing Your Conversion Rate: Here's How to Fix That
What is a carousel?
Carousels (aka sliders) are large website banners that cycle through 3-7 different slides, each having a background image, headline, and some kind of CTA (call-to-action).
They were popularized, in part, by the WordPress plugin "Slider Revolution" — which started off as a tool for making basic carousels, and, over the years, grew into a lumbering behemoth, jammed to the gills with parallax effects, 3D animations, and "drag & drop" layout options.
Why do carousels kill conversions?
Most companies struggle with deciding which marketing message deserves top billing on their website. Carousels allow them to bypass that decision by featuring everything in one go.
Sounds great, right? Not so fast, sparky. With convenience for you (the business owner) comes great inconvenience for your customers. Moving content, slow load times, and frustrating controls all add up to a bad experience that feels a bit like this: Your Site as a Store.
Carousels confuse people
Like the old-timey "Your Site as a Store" example illustrates, sliders are difficult to use. For some people, they move too quickly, and for others, too slowly. They're also often overwrought with fancy animations and transitions, which seem cool in theory, but actually annoy users, who are busy and just want to find what they're looking for quickly.
Only 1% of people actually click
Studies consistently show that sliders do an abysmally poor job of getting users to engage. For example, when Notre Dame University tested a carousel on their home page, only 1% of users actually clicked on a slide — and of those, 89% clicked on the first slide.
You could stick to one slide only, but that kind of defeats the purpose of a slider, doesn't it? A static banner is much easier to build, and it will be equally effective on all devices, from desktops down to smartphones.
Jack of all messages, conveyor of none
It's tempting to try and pack all your marketing messages into one space using a slider, but the truth is, it simply doesn't work. When Nielsen conducted a usability study on a home page carousel for Siemens Appliances, they found that, worse than not clicking, users ignored the banner all together.
They attribute this to "banner blindness" (i.e. people skip over content they perceive to be an advertisement). The lesson here is that, by trying to say too many things, you end up saying nothing at all. And, in doing so, you lose the opportunity to create a strategic, relevant offer that will actually connect with potential customers and get them to take action.
What are the alternatives to carousels?
Alright, enough doom and gloom. The good news is there are plenty of things you can use instead of a carousel—and there are even some minor changes you can apply to your carousel to make it a lot more effective.
1. Disable auto-play and remove animations
As demonstrated by the "Your Site as a Store" example, auto-play annoys users by preventing them from deciding (on their own) what content they want to see and when they want to see it. Simply turning auto-play off can make a big difference—and while you're at it, ditch all those superfluous parallax effects and slide-in animations. They do nothing but slow down your site.
Here's a great example of a pared-down carousel by Topo Designs:
Initially, I didn't even realize it was a carousel because of the minimal navigation, and that's fine. The brand gets its most important message across, and the other slides are simply icing on the cake for any users who are interested enough to take a longer look.
I also like that they've placed their secondary CTAs right below the banner. The vast majority of people will scroll down on a website instinctively, so the buttons are much more likely to be clicked there than if they were buried in the slider.
2. Show (almost) everything at once
A slightly different way to tackle multiple competing messages is to show abbreviated versions of each message and allow users to expand the one that's most relevant or interesting to them. Hamilton College uses a split-screen banner to accomplish this, displaying one expanded message and two cropped messages.
The genius of this approach is that even though the secondary modules are cut off, there's just enough information visible to pique your interest. When you click on an image, it brings up a short excerpt that tempts you to watch a video or read more. Fair warning: trying to divvy up such limited real estate is no easy task, and should only be attempted if absolutely necessary.
3. Go full static
I think the two above examples are cool, but let's be honest...you probably don't need to get that fancy. Basic image, text, and button banners have been around since the dawn of the internet—they're simpler to design, less expensive to build, and generate as many (if not more) clicks than much more elaborate layouts.
Take, for example, this barebones, no nonsense banner from Chilis. It's clear and direct, with a sprinkle of quirkiness. You don't have to struggle to find the offer, and you're not going to get frustrated (if takeout doesn't interest you), because it's short enough that you can scroll past it to something more relevant in a split second.
Whew! That was a lot of carouselling.
Thanks for reading. I hope this post was helpful in generating some ideas on how to prevent carousels from killing your conversions. If you try any of these alternatives or you've had success with something else, let me know about it @sherpadesignco.