Should you use a carousel on your website?

Short answer is no. Long answer is contained in this article.

Carousels are still a very popular element in many homepage layouts because it allows you to communicate a lot of information in a small space. It’s a design compromise that lets you put everything you want to put right there, at the top of the page. Does it benefit user experience? Not really. Does it help drive more conversions? Not really. They aren’t great for promotional purposes but they can be effective on a page designed as an image gallery.

According to Kristine Schachinger, a marketing expert, usability testing shows that people rarely go past the first 2 images. Adding many images in a small space causes a lot of issues for no no real effect. Nils Kattau has some solid advice to help you deal with multiple images: "instead of having a slider, take the content, and put it into a collage. And watch your click rate grow dramatically."

Carousels are the go-to solution for fitting multiple marketing messages into one space. Your content won’t be noticed because of banner blindness though. Studies consistently show that carousels are not good at getting users to engage. 

You can have an entire Instagram presentation by Nils Kattau to help you convince others not to use sliders.

Why are carousels bad UX? As Julianna Rowsell explains it perfectly: “for so many reasons”. Carousels almost always have significant accessibility hurdles such as:

• Focus management
• Content changing = interruption and distraction
• Carousels can cause issues with screen readers, immersive readers -a+ conversational interfaces. 
• ADHD folks hate them

Focus management is a problem for both humans and screen readers when faced with carousels. If it moves to the next content, the carousel disrupts the screen reader. The screen reader is interrupted to get the dynamic change and the focus is hijacked or worse it’s not communicated at all. For someone with ADHD, it’s swooping visual changes that disrupt consumption of content and concentration

What are the disadvantages of using a carousel?

There is a dedicated website to answer this question: https://shouldiuseacarousel.com/ 

If you want an official stance on the matter, the Canadian Government has a page called “Avoid promotional carousels, improve web content”. Banner blindness is not helping you achieve your goals. As the Canadian Government states: “Carousels may meet organizational needs of having content front and center, but users scroll past them because they look like ads.” Thanks to David Pepin for sharing this with us!

Why are rotating banners bad?

Because at their core, they are a distracting and convoluted way of accessing content. Making them accessible to many users is also very hard: “even if you implement it correctly, which is a 

lot of work”, you may not find that they communicate information adequately. Eric Egger has produced a great guide on what makes a carousel accessible - it will give you an idea of the work required. 

It depends. Image carousels can work in specific situations such as image galleries. However, as Sidra Mahmood, design lead at DECD states, from an #a11y perspective, they're just tricky to code to be compliant. It’s hard to build one that is enjoyable from a design perspective and accessible. They must have controls like stop/start, assign specific roles and IDs in the code which can be painstaking for a CMS, and limited animation/transitions. 

Here is another take on that question by a wonderful albeit mysterious SEO: "I think it largely depends on implementation. Properly structured/marked up carousels, without intrusive behaviours, should be fine. The problem is, most are not semantically structured, have poor conveyance and controls, and stupid behaviours."

Google uses some carousels now so they are not necessarily out of the question but should be implemented correctly.

Think of the use: if it’s information worth showing and sharing, it should not be in a medium that hides the content and then resurfaces it at intervals. Stephanie Figas makes an excellent point to put the user first, which means to provide relevant content at the opportune time. Put your content on a medium where the information is properly highlighted for users. There is no one size fits all recommendation to help you do that. There are plenty of things you can use instead of a carousel:

1. Disable auto-play and remove animations - this will make a big difference.
2. Show abbreviated versions of each message and allow users to expand the relevant one. Ensure you have just enough information to pique visitors’ interest. 
3. Make everything static : basic image, text, and button banners are easy to design and a familiar design for internet users. 

Believe it or not, we get asked that question quite often. The answer is: yes. Here are the many reasons why carousels are bad for SEO:

• They negatively impact load time which impacts page experience
• They often duplicate the H1 titles
• They require extra JavaScript which in turn uses more data on mobile
• They either move too fast or too slow
• They cause decision paralysis
• They skew analytics data by creating additional page views

We just don’t like carousels. Feel free to ask Jenny Halasz about it:

Carousels negatively impact load time

If they are above-the-fold and large, you will often deal with carousels are they often impact Largest Contentful Paint (LCP). Some use non-composited animations which can cause Cumulative Layout Shift (CLS) issues. Bonus: if you autoplay, this can cause infinite layout shifts. Yikes!

For more information, read this Web.dev article on the matter.

That's all folks! If you want, you can check the entire Twitter thread on that topic.

If you want to do a deep dive, I recommend reading this article sent to me by Alexander Ujcik: Are sliders and carousels good or bad in web design?