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.

Image carousel example

Example carousel from my collection (click to view all)

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

Further Reading

Posted on: November 10, 2013 | 1 Comment

Recent Entries in "Usability"

1 Comment Posted (Add Yours)

Thanks for the valuable tips. Seems my website is little bit slow b/c of heavy graphics. Need to implement a few of your ideas....

I've found that carousals have been a problem more so for mobile users. They do work on mobiles but they can be a little unpredictable in terms of both responsiveness and functionality.

Good food for thought though :)

Funny thing is that I use a slideshow. I like it and when I visit websites I love to look at the deals or the news going on in the website. I actually am in a re design and warming up to the simple 1 page websites to gather leads.

Thanks for explaining this issue of why we shouldn't use them :)

"On, to give them. Nike Air Presto 5 How could no risk of doing business, and if they can not pay o nike free sko ff, then it would have to stay here with us to work out. Anyway, we can not lose, what are we afraid?" Sitting seat Whether the woman is on the spoke.
although the same woman, but listening to nike lunar eclipse tilbud the voice of the treasure

Nice tips but I myself used Carousels on my site idl4.com but they seems fine. As long as someone commented to increase the time the banner moves from one to another so i did but other than that I did not found any issue in Carousels for the movement. Even I used it on many sites i developed.

Carousels really shouldn't be used for anything considered important on the page when there is a choice to be made by the user. However, showing additional benefits or options are a good way to use carousels/sliders.

Great tips! Thank you.

In some cases, carousels are a good way to get clients, it depends on the niche that you are directed, in my case its a good way to attract people, maybe people dont use it but people like to see it.

Thanks for sharing these vital points regarding using image carousals for a webdesign. I was in a dilemma regarding its usage and had mixed opinions regarding its functionality. I guess after reading this post, there has been lot of clarity on this topic.

Great advice. I have clients who just love the image carousel - it's tricky explaining this concept to them. :) Thanks for another great post.

Subscribe

Subscribe to my RSS FeedSubscribe to my Web Design Blog RSS Feed

TOP STORES

Categories

Proud member of 9rules network