Carousel’s, Just Don’t Use ’em
This content of this blog is heavily based on this article by John Moore Williams
Ah yes… the good old header carousel, slider, slideshow, gallery, or whatever you want to call it. It’s been a staple of website design for such a long time it’s almost synonymous with business websites.
Every time our clients request a carousel we groan a little. They’re almost never worth the trouble and they do little to improve the capability or functionality of a web page.
Why Don’t we Like Carousels?
Carousels are ads
A Carousel’s movement and its ubiquitous design can actually convince your users that it’s an ad and we’ve trained ourselves to ignore ads. Don’t believe me? Without checking, what was the last ad you saw online? I guarantee you saw one on Facebook, Twitter, Instagram, or whatever social media site you frequent, but you ignored it. Now think of literally any other website you visited. What was the content in the carousel?
Your users will ignore your carousel in the same way you ignored the last carousel you saw.
Carousels are Horrible for Accessibility
If you follow this blog at all, you know we’ve been on an accessibility kick the last couple of months, and we’ve learned a few things. Movement on a website can have an impact on a user’s ability to parse the content and navigation the website. It can negatively impact accessibility for those with motor control issues.
The Content is Unmanageable
Let’s imaging you have a carousel on your website with 3-4 slides. You obviously want people to read slides 2-4 otherwise they wouldn’t be there. So, you opt to make the carousel switch slides automatically. But that means you may be switching slides while someone is reading the content of slide 1! You just interrupted someone genuinely interested in your content. It’s better sense to make all the content visible. Besides, the content hidden at the end of your carousel might not be seen at all! So, we must beg the question, why is it even there!?
They Don’t Perform
Presumably, each slide in your carousel has some sort of call to action or link. Ideally, you want users to click on these links. However, we’ve found that each subsequent slide performs about 25% as well as the previous slide. So, let’s say slide 1 gets 100 clicks in a week. Slide two will likely get 25, slide 3 will get 6, and slide four will get less than 2.
What if we MUST have one?
Sometimes clients (or bosses, or stakeholders) just insist on a carousel… what do we do about that? Well, lets implement them responsibly.
Don’t use a carousel in your homepage’s hero section
This practice severely impacts the performance of your site both in terms of site speed and user interface. A user’s first impression of your site is the most important. It’s the time to gain their trust and re-enforce your brand. Typically, we want to ensure users that they have landed in the right place. Your users need to be 100% confident that the website they landed on is the website they wanted. The feeling that prompted your users to visit must match the feeling they get when visiting your site. This establishes loyalty and trust.
Secondly, the messaging needs to be clear and straightforward. If you replace a single clear message with a multitude of messages and images then you’re asking for your users to be confused. Keep it simple, stupid. 🙂
Don’t use a carousel when its for your company, not the user
Almost all websites have some sort of goal. That goal can almost always be broken down to “establish the connection between what we offer and what our users need.” This means that, as content managers and website designers, we must put content on our website that directly connects us to our customers.
Unfortunately, we see companies putting carousels on their website to increase some sort of internal metrics like clicks, or views. None of these things benefit your user. If you cannot explain why a carousel benefits your users, then it probably won’t benefit them. Instead, think about the one thing your visitors are here to do and enable them to do just that.
Improving internal metrics should not come at the expense of good user interface… and it should not annoy people.
-Me, I said this.
Don’t let it become the link dump
Look, carousels are useful at one thing… they provide a place to put every’s idea on the home page. Website managers covet places like this because it enables them to make people happy with little effort. But this means carousels act as a place where content goes to die.
Carousels are attractive places to put content because they don’t change the layout of a page, it’s satisfying to see a collection of content, and the content doesn’t need a clear strategy. For all of these same reasons it doesn’t solve a user need, it garners no clicks, and then… get this… everyone forgets the content is there! Want proof? I won’t mention the company, but I just removed their “Christmas Specials” carousel slide yesterday (I’m writing this in April).
When Should we Use a Carousel?
Now that we’ve gotten all our trash-talking out of the way, and thrown some shade at the carousel, let’s talk about when they are appropriate to use.
Use a carousel when there is a reason to use a carousel
Carousels can be incredibly powerful tools to display complex or large collections of information. As UX/UI designers it’s our mission to make the content (even complex content) easily digestible and readable. Sometimes a carousel is the exact right tool. For example, slideshows, image galleries, timelines, and presentations are all carousels. They have the goal of displaying information that builds upon itself in a linear fashion. Carousels can help us ‘onboard’ a user. They can explain complex information.
Here is a simple list of potentially good carousels.
- Related Products
- When comparing two or more items
- When it saves a user’s time or clicks (like auto-advancing forms)
- When it’s your great aunts’ vacation slideshow
How to do it right?
Ok, somehow you’ve been duped into adding a carousel to a website. Here are some simple rules to make sure it’s done correctly and with as little lost usability as possible.
Dont autoplay.
The largest problem with carousels is caused by auto-advancing. So, don’t advance them automatically.
Give User’s Control
Users like having control, so give it to them. After all, your website should be for them, not you. Of course, we need to make sure we’re designing with clear glass; the carousel needs to be intuitive and require no direction. There are two main ways of providing user control over your carousel:
- Arrows: Two little arrows on either side of the carousel that give the ability to change slides. Ensure these point in the direction that the carousel moves.
- Dots: Little dots at the base of the carousel provide a clear indication of how many slides there are and what slide is active. Clicking on one of these dots should bring the user to that slide. Also, consider using smaller versions of the displayed image in the dot navigation to make it exceptionally clear.
Keep it Short and Sweet
This rule goes for literally everything on a website, but it’s immensely important here.
Ensure Proper HTML Hierarchy
Carousels often have headings in them. However, multiple H1 headings can wreak havoc on SEO and screen readers ability to parse the page. Ensure your page only has one h1 tag, including the content in carousels.
Make it Touch Friendly
On phones we swipe, so make your carousel swip-able. If that’s not an option (it probably is) then make sure the entire right and left side of the slide is clickable and the content inside is really large and easy to click as well. Nobody wants to meticulously aim for a small arrow or link.