Auto image sliders are the devil. Here’s what to replace them with on your landing pages.
You’ve seen auto image sliders (aka image carousels, auto-advancing image sliders, etc.) a million times. They’re the image displays on a webpage that automatically slide from one to another, cycling through a certain number of images, often without a way to control speed of advancement.
A lot of people think they’re “cool”, but the reality is that they cause many problems:
- The auto-advancing movement from one image to another ends up being a distraction, and makes it hard to concentrate on the purpose of the landing page.
- The speed of advancement is never ideal (too fast for some users, too slow for others).
- Controls for these images sliders are confusing, or lacking in the right functionality (I have yet to see this handled well).
- These image sliders are even more difficult on mobile. With less screen space, the ability to control or tap on the correct image gets much harder.
The universal feedback from UsersThink results has been how much users hate them for all the reasons above, and really these image sliders are more telling of a bigger issue for a landing page: lack of focus.
Need proof? Erik Runyon did a study of the Notre Dame website, and found that of all visitors to the homepage, only 1% clicked on any image in their slider, and of those clicks, 85% were of the first image. At that point, why even bother with the follow up images if they receive so few clicks? (source)
Don’t worry, we’re here to help.
How to fix it:
1. Remove image sliders from your landing pages
Pretty straightforward, right? :)
Replace the auto image slider with one static statement, whatever you feel is the best foot forward for your landing page, and ditch the slider.
But that approach might not satisfy those on your team (or maybe even you) who still cling to your image sliders, so let’s dig into the reasons why image sliders are an issue.
2. Images that aren’t closely related to each other are a sign of lack of focus
Lack of focus mainly comes from one of two places: not making a true choice, or having to placate a number of different stakeholders.
Fixing the issue of not making a true choice requires being honest with yourself, and making the tough but necessary move to cut all but the most important message.
Yes, there is always a risk that you won’t pick the “best” option, but you can evolve this as you go, and right now having multiple messages move across the screen dilutes each message and ensures that none of them will work.
Having to placate a number of different stakeholders can be trickier, but I think the best approach here, beyond being skilled at navigating the political minefields within your org, is to add facts, like the one from earlier about clickthrough rate. It might not set in at first, and I’ve heard the “that doesn’t apply to us, we’re special” argument a million times, but using evidence from other experiments is often the best way to break through.
Remember: focus is the key to a landing page, and trying to present a bunch of unrelated things in a small amount of space, in a short amount of time, will undermine all your efforts.
3. Figure out what is redundant from your images, and remove them
You don’t want to use an image slider at all, but there might be merit to the multiple messages you were trying to convey.
First thing is to go through all these images and eliminate any that are redundant.
It’s easy to think they’re all unique, but be very honest and cut all but one, and then leave that at the top of your landing page in place of an image slider.
4. If your images tell a narrative, display them in order on your landing page
The most well thought out image sliders I’ve seen have a narrative to them, a clear order from one to the next, telling a story related to the landing page intent.
To be clear, these are very rare cases, but if this is true for you, instead of having that content in an image slider, place the images on your landing page vertically to follow a narrative path as a user scrolls.
The funny thing is, most of the time I’ve seen this type of narrative image slider used, the same content is already displayed in static form on the landing page, so in that case, just cut the image slider from your page, and move the rest of the content higher up.
5. Added benefit: removing image sliders often speeds up your landing page
Some of the code and setup required to put an image slider on your landing page can be pretty resource intensive in nature, not to mention loading all those images.
By taking the time to cut what isn’t needed, and removing the image slider itself, your landing page will be much, much faster to load.
Remember how improving load times for landing pages results in higher conversions? It’s just another reason to cut the dreaded image slider.