“Carousels are the bane of webdesign”
“Only the first item of a carousel gets any attention or clicks at all”
“Carousels aren’t accessible and are overall a bad user experience”
You’ve probably heard all these statements and see the many, many, articles and case studies that support this opinion. Or you’ve probably got shouldiuseacarousel.com bookmarked to throw it at anyone who suggests using Carousels. Ever.
This article isn’t to argue against those arguments. They’re totally true. Carousels can be horribly implemented; they can convert terribly and be bad user experiences.
But they don’t have to be any of those things either.
Real-world Uses of Carousels
I haven’t seen data on the use of any of these examples, but considering how much vitriol there is against Carousels in web design in general, it’s a bit shocking that the following real-world examples exit.
The New York Times Uses Carousels
Go to the homepage of the New York Times and prominently, you’ll find a carousel. It doesn’t use auto-play, it only has navigation when you hover over it. But it’s there, and I assume they put it there for a reason and with data.
Amazon.com Uses Carousels like They’re Going Out of Style
At any given time, you can go to amazon.com and probably see at least 3-4 carousels on their homepage. Is it a good use of carousels? Maybe not… then again you can’t argue with the fact that no one sells more stuff online than Amazon.com, and for whatever reason they REALLY like carousels.
It’s not just Online Shops. Honda Uses Carousels Too
It doesn’t get more “brick and mortar” than a car dealership or manufacturer. Honda.com prominently uses a carousel right on their homepage as well.
So, despite all the hub-bub, obviously really large brands still believe that Carousels can be effective tools for product placement, and conveying information to their site visitors. Honestly, each of the examples above I would have a short list of suggested improvements for their uses of Carousels. But in the face of these examples, it’s just impossible to write-off carousels as if they should never be used.
The Major Pitfalls to Avoid
OK. So if we’re going to use them, how should we do it? Essentially, a carousel is relatively simple, but it’s implementation — like any other element of your website — should be carefully considered for its effectiveness. Here’s a few major things to watch for.
User Control
One of my number one rules in web design is that nothing should happen on the page without the visitor triggering it to happen in one way or another. This is why “exit intent” popup are more effective than ones that just interrupt your reading randomly — for example.
In the case of a Carousel, autoplay should almost never happen. Ideally, your carousel will present your visitor with an image, or perhaps several images, and it’ll just sit there and wait. The only time the Carousel will do anything is when the visitor purposely interacts with it. If your images are compelling and draw the visitors attention, then they’ll most likely want to see more.
Which leads to the next item…
Navigation
Is should be abundantly obvious to your user how they might go to the next or previous image or set of images in your carousel. I don’t recommend navigation that only appears on hover — for example. I think a carousel should show it’s intentions clearly. “LOOK! I have more things to show you… if you want them.”
Accessibility
Lastly, carousels are notorious for not being very accessible for non-visual visitors using screenreaders or who navigate primarily via the keyboard. A solid carousel will be built in a way that it’s accessible to all viewers.
Enter FooGallery Owl Carousel Version 1.3
[foogallery id=”2221″]
FooGallery Owl Carousel is my most popular personal plugin. It has over 5,000+ active installs (not that many honestly in the grand scheme of things), and it has 9 out of 10 5 star reviews. Not bad for an idea I started and finished within the span of a week in my spare time two years ago.
I just released version 1.3 of it, and digging into the code reminded me of how great this little tool is. It’s flexible and relatively simple. It can do a lot
Here’s a quick list of the updates I pushed out:
- General Code clean-up and enhancements for performance
- Updated Owl Carousel JS/CSS to latest version 2.1.6
- Added Keyboard navigation
- FIX: Inset shadow wasn’t working well. The size is now also calculated according to the image height instead of static.
- FIX: Thumbnail Preview working correctly again and enhanced
- FIX: Border and Hover effect buttons working as expected again.
I believe Owl Carousel is a great tool that can be used effectively and avoid these pitfalls. It supports multi-image “stages” so you’re not limited to one image being visible at a time. It has both prev/next navigation as well as button navigation to navigate through the stages instead of one item at a time. While autoplay is available, it is off by default.
Overall, FooGallery Owl Carousel fits the bill for almost all of these items. … wait… what!?
Yep, I said “almost all.”
A user reached out to me a month or so ago from a public University. He was revamping their website and wanted to use FooGallery Owl Carousel. But he hit a snag. All public Universities are required to have their websites fully accessible and FooGallery at that time wasn’t. So he reached out to me about it.
I recently did some work on our Give plugin for accessibility reasons, and I also learned a lot about accessibility in color contrast through my work with the Twenty Sixteen theme. So when this user said he needed my plugin to be accessible, I jumped at the chance.
You’ll see in that changelog above the item “Keyboard navigation”. That’s the beginning of my work on this plugin with accessibility. Here’s a quick list of things I still need to do:
- Make the keyboard navigation work only when the specific carousel is focused on. This is important for when there’s more than one carousel on a page.
- Make the keyboard navigation an on/off setting per carousel. Not all users want this.
- Make tabbing through the carousel possible.
I plan to continue working on this so that FooGallery Owl Carousel is as accessible as possible. In the meantime, give FooGallery Owl Carousel a spin and let me know what you think.
If you’d like to see development of this plugin advance and get that accessibility work done, give a donation of any amount. Donations actually go to support hosting and maintenance of local nonprofits here in San Diego, but donating to this plugin keeps me working on it as a source of revenue for these nonprofit orgs. As I say, Help Me, Help Others.
