Homepage Image Sliders Suck
Image sliders, carousels, whatever you call them, if you’re ever been to an eCommerce website in the last couple years you have seen them: those large, rotating image galleries that grace the tops of homepages.
As ubiquitous as they are, you would think that they were useful.
Turns out, they freaking suck. Do not use them. Sliders get poor click-throughs because people:
- Don’t sit and wait around for content
- Experience banner blindness
- Find them annoying or frustrating
Here’s the top reasons brand owners say they want carousels, and why the reasons are BS.
“We have a lot of cool content, products, and sales people need to see.”
So don’t hide your content behind a carousel! You might love to admire all your pretty photos and great specials flashing across your homepage in and out, in and out. . . but how many of you customers are sit there and do that?
The answer is practically none.
A Notre Dame study of sliders revealed that “only 1% of total visitors clicked through from the carousel” and 84% of them interacted with only the first slide.
Forget about it on mobile.
Why make people wait to see something? If you want to show something, just show it. Make space in your page design for branded imagery, specials, CTAs (not too many!), and so on. If you want people to see your products and collections, make sure your navigation is clear and your search is working well. Announce sales and specials with announcement bars, up-sells, and the occasional (well done) popup or fly-in. If you do use some kind of banner, keep it focused: “One focused banner message will drive higher CTRs than a few unfocused banners.”
“We want movement.”
Movement is good. I am pro-movement. Now imagine if you were reading a magazine and someone walked by and flipped your page without warning.
Here’s GAP’s (RED) homepage, which features an auto-rotating carousel of content:
Each slide appears for 5 seconds before it moves on to the next. I’m a fast reader, and I did not have time to read their blurb on hotel suites at the Andaz West Hollywood before it switched to something about bracelets. (Clicking on the image didn’t pause it, either.)
Movement works best when it 1) mimics real life (skeuomorphism), and 2) is controlled by the user. For example, tapping a menu icon to have it slide gracefully open and shut, like a drawer. Movement for the sake of movement is annoying at best, frustrating at worst.
“Lots of other sites have it!”
As mom used to say: if everyone jumped off a bridge, would you?
An unintended consequence of lots of sites having sliders is that because they aren’t always used for the same thing, there is no way to know what a particular slider contains. One site might use a slider to show sales, another collections, another . . . literally anything else. It would be presumptuous to expect your visitors would know that your slider is a must-see. In fact they might 1) hate sliders, or 2) love certain sliders but hate yours.
In the (RED) example above, it was clear each of the three sliders went to unique product pages. Check out this GIF of Yellow Leaf Hammock’s slider and try to guess where each goes:
If you guessed they all go to the catalog page (which was my guess, and which annoyed me because I was waiting for something new and different each slide), well, you’d be wrong. The first and fifth go to Cotton Rope Hammocks, and the second to fourth to Classic Double Hammocks. When I finally gave up waiting for a sale or special collection, I didn’t even get taken where I thought I would! (I will say they were smart about mobile and turned the slider off, putting one CTA instead.)
What to Use Instead of Image Sliders
Literally anything else!
- A compelling hero image with one or two CTAs
- Several boxes/shapes with their own content
- Introduction text against a plain or muted background
- A video (these do convert well, just make sure it’s short and doesn’t auto-play!)
Here’s Airbnb’s latest homepage (as of this post):
It gets right down to business: a compelling CTA (live like a local), and how to go about it (search form).
Check out Ben Sherman’s old home page (they have since replaced this with…a slider):
This homepage makes the point that they wanna sell you their new blazers.
My client Fly High Adventures has four main areas she wants her visitors to explore, so we laid them all out plain as day:
Another site I worked on with simplisic, UNLEASHED, uses a short video introducing her brand:
Visitors can opt to view it or not, rather than us force it upon them.
Don’t get sucked into the trend of poorly performing image sliders/carousels. Think outside of the rotating box!Tags: image coursels, image sliders, user experience, ux, ux/ui, web design