Stop using carousels on your website

Lots of websites are making use of carousels to showcase news items or other content types to their users. While sliders are a great addition to a website to make it more lively, they also disrupt the user experience.

The downside of using carousels on a website

As a web developer, I have seen the same issue coming back for years. Most blogs and/or news websites use a carousel on the cover of their website to showcase new or important content to their users. The issue arises when you want to open a news item that's in that carousel; it's gone before you're able to click on it. In the worst case, you may open an article you didn't intend to read because you clicked on the next slide in the carousel with a completely different item. Most of the time, there is no way to find the article you want to read in an alternative way, and the user has to wait for more than 15 seconds before the news item reappears in the carousel. When I encounter this issue, I just don't read the news article. It's too much hassle, and I will simply leave the website.

A second issue with carousels in the cover is that most of the time they are used to show the most important news items to a user. When there are, let’s say, three news items in the carousel, which are all important, none of them are considered important. One of my personal rules is to never hide content. Of course, there are a lot of other reasons against using carousels. Such as:

• Carousels don’t work good on mobile
• People don’t interact with them
• They negatively impact your website conversion
• Higher loading times

Are carousel really that bad?

Maybe, however, I still think there are a few use cases where carousels can be used. One of them is for a product display. As an example, suppose we have a webshop and want to show a product using multiple images. In that case, we can use a carousel as long as we show the thumbnails of the next slides below it. In that case, there is no hidden content, and the user can fully interact with it.

A second case might arise when you have a row of blocks and want to display more. You can use a carousel for this purpose, but don't let it scroll automatically, and be aware of hidden content. The user might not understand how your carousel works

A few examples of good and bad usage:

The first element is a carousel that automatically transitions to the next slide every three seconds. The only indication that this is a carousel is the presence of five dots below it. There are two ways for a user to interact with this carousel: swiping it with the mouse or clicking on the dots below. Both methods are unexpected and challenging for users to understand, leading them to often ignore the carousel and miss the content on other slides. If you intend to showcase testimonials to users, consider highlighting only three or a maximum of four items. Allow users to decide whether they want to view the next one by adding arrows on the sides of the carousel.

The second example is a carousel on the cover of your website that automatically slides between multiple news items. This type is commonly used on many blogs and news websites. Each news item is displayed for about five seconds before transitioning to the next one. By the time you can click on a news item you want to read, it has already moved on to the next slide. In the worst case, the user may open the wrong item because the carousel has advanced to the next slide. Personally, I think you should never use this type of carousel.

The third example is a carousel designed to display more product items. This section is primarily used at the end of a content page to show users additional items within the same content group. While I don't think you should use it in the style shown above, as it resembles an advertisement, I believe this approach might work well for news or vacancy items. Even if the user doesn't understand or use the carousel, they can still see that there are more options to view. It might be even better to display three or four block items and include a button that directs users to the overview page of that category.

Final word

Most websites don’t benefit from carousels as they are mostly used incorrectly. They are just added to make a website more lively, making it less static. As described in this blog post, there might be a few cases where carousels work. But it is better to just not use them, except for a product display in a webshop.

Looking at myself, I will minimize the usage of carousels on the website. The biggest issue is the client or the designer who wants to use carousels on their website. So I have to use them, but if I had a choice, I would go against it. But hey, you can't ignore the wish of a paying customer.

「こんな私でも輝けるかも。」— Maybe even someone like me can shine. - Hitori Gotoh, Bocchi the Rock!