How to Effectively Use Carousels
March 13, 2019
By Graham Mazie
When you search the internet, you’ll find an abundance of advice warning you to avoid carousels at all costs. A number of blog posts tell you it’s a fad, that no one will ever interact with it, that it will add unnecessary weight to your site. And although I’m not here to tell you that every point made by carousel detractors is necessarily false, I will say that those arguments are often missing the point—namely what carousels are for.
The Misunderstood Carousel
The trend nowadays is to put carousels front and center. I, too, have had the experience of clicking a link to the “Top 10 Vietnamese Restaurants in the United States,” only to be brought to an ad-ridden webpage where each item on the list is part of a dreaded slideshow. At that point, I think, It’s not even worth finding out the number one Vietnamese restaurant in the United States. And that’s a shame.
Or maybe you’ve spent a lot of time, money, and effort building a beautiful website for your new business, only to have a bunch of key content to your brand never be seen on the second slide of your homepage carousel. Heck, we’ve lambasted carousels on our own blog.
But the fact remains that centering your page around a carousel is not their most advantageous use-case.
It’s true that a majority of your users will not click beyond even slide #1. It’s true that carousels have the potential to cause accessibility issues, that they can add weight to your site, that they have the potential to undermine your site's SEO value.
So why would anyone ever choose to put one of these things on their site?
What Are Carousels Good for?
It’s important to stress outright that many of the issues mentioned above are not guaranteed when using carousels (we will discuss this in more detail in the next section). Think of carousels as an alternative to video on your website.
Videos are good at getting a sense of your site’s purpose and mission, but one could also make the argument that putting videos front and center is a bad idea. And yet they serve a purpose. So why not use video? Well, this is a matter of preference.
Videos, depending on the size of the file, can be an even bigger load on your site than a carousel; they disperse information at a fixed rate, while users can speed through carousels at their own pace; and carousels are easily editable and flexible, whereas a video needs additional footage to be shot, or edited in standalone software to be updated.
Carousels also can autoplay without the need for audio—so if a user spends time on a page, there’s a chance they may see the content you’d like to show them without ever having to click a button.
How Do I Use My Carousel Effectively?
At the end of the day, using carousels effectively will ensure that you’re getting the full benefit of your choice. I mentioned that carousels can negatively affect your SEO, but this does not have to be true.
Make sure you’re using caption text in your carousel and keeping as little text off the images themselves as possible. Also, ensure that your developers are building your carousel in accessible ways—using semantic HTML and alt tags on images—because this will also affect your SEO. All of this can be done: The American Foundation for the Blind features a carousel on its front page!
You also want to take advantage of autoplay so that content beyond the first slide will be shown to the user without them having to click anything. But make sure the speed between each slide isn’t too fast—quick carousels feel like advertisements and make the user feel pressured to read quickly.
Also, make sure to pause on hover, because a user hovering over the slide indicates interest, and have autoplay turn off if the user clicks on a navigation item for the carousel, so as not to conflict with user intent and expectation.
It’s also worth noting that you should keep your most important content on the first slide to ensure that it gets seen, and repeat your slider elsewhere on the site to reiterate information. Some smaller items to ensure the best value out of your sliders include:
- Keeping the text on your slider minimal to ensure it gets read
- Adding navigation items (i.e., next/previous buttons and a pager) to allow the user to interact with the slider easily
- Making sure sliders can be swiped and work correctly on mobile devices
- Keeping slides consistent in terms of content to ensure the user doesn’t become confused or disinterested
Don’t let anyone tell you that carousels have no place on your site. They have their place, just like any good UX element, and can be used to great effect on your beautiful new website.
For more articles on how to give your users the best user experience on your site, check out our blog article, “Great B2B UX Examples and Why They Work.”
About the author
Graham Mazie was formerly a Senior Developer at SmartBug Media with nearly five years experience building and contributing to HubSpot COS and WordPress sites. He's led WordPress lectures and meetups in the NYC area and specializes in working with front-end code. Read more articles by Graham Mazie.