Why You Should Not Use Image Carousels on Your Website

A web design element that I have commonly used is the image carousel or image slider. However, I recently caught up with some articles that highlight usability issues with them.

This has caused me to question my fondness for them as a way to present hero content above the fold when space is limited.

An article from Visual Website Optimizer on why you shouldn’t use image carousels points out three reasons why auto-forwarding banners may not be good for your users:

1. Auto-rotation makes it hard for the user to click on the right banner.
2. They can create banner blindnesss, causing the user to ignore them.
3. Low-literacy users may not be able to read all the banner before it switches to the next one.

In addition, unless optimized, the large file sizes can increase page load times, especially on mobile devices.

Econsultancy asked the same question about whether carousels should be used on ecommerce sites, concluding probably not, as this quote from usability consultants Whatusersdo sums up:

Practically all of our clients who have implemented auto-scrolling carousels quickly withdraw them after testing them with users.

Widerfunnel tends to agree, calling rotating offer banners the scourge of home page design. In addition, this study provides an example of image sliders reducing user engagement and click-through rate.

So why do site designers still insist on using them? ConversionXL offers two reasons in their post on why you should ignore the carousel fad:

1. People think they’re cool.
2. Different internal departments want to get their message on the home page.

Regarding point #2, rather than being an elegant solution for meeting the competing needs of different internal stakeholders, Tim Ash writes in his article against rotating banners that they actually represent a lack of editorial responsibility:

Rotating banners are a bad idea because you have basically abdicated your responsibility for curating and editing the content on your page. You have thrown up your hands and said, “I’m not sure what is important, so I am going to throw it all up against the wall and see what sticks.”

And regarding pure usability, Brad Frost points out in his article on carousels that:

Carousels introduce a level of complexity to an interface. Instead of simply looking at content on a page, users are burdened with having to identify the carousel and then learning its controls, conventions and behaviors.

How to Use Carousels

So, if you still want (or have) to use a home page carousel, what’s the best way to implement one? Laura Diane Hamilton recommends that you can still use a carousel as long as it doesn’t auto advance by itself:

It is fine to use a static carousel – one that doesn’t advance on its own. The user should always be in control of what’s happening on his screen. So if you are working on a retailer’s site, for example, it’s fine to give the user the option to flip through multiple offers.

In addition, not surprisingly, having fewer banners results in more of the sub-banners receiving clicks. In the conclusion to their article, VisualWebsite offer five useful suggestions for improving carousels:

1. Make them load quickly
2. Make them manually controlled by the user
3. Make the carousel navigation prominent and easy-to-use
4. Make content being presented on the banners relevant to your entire target audience
5. Use fewer banners

Read More About the Pros & Cons of Image Carousels

• Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility
• Should you use an auto-advancing carousel on your home page?
• 3 Alternatives to Your Home Page Rotating Banner
• Designing Effective Carousels: Create a Fanciful Amusement, Not a House of Horrors
• That big sliding banner? Yeah, it’s rubbish