Even though Total includes the ability to display images and cards in carousels, they may not always be the best choice for your site. Carousel support was added primarily due to customer demand, but in most cases, they offer little value to the end user. In fact, they may cause more “harm” than good.
In this article I will explain some reasons why not to use carousels along with some alternative solutions. Feel free to share this article with your client that insists on using Carousels for their site!
Reasons Why You Shouldn’t use Carousels
Here are some of the reasons you may want to avoid using carousels on your website.
Hidden Content
When using carousels, part of your content will be hidden, requiring the user to interact with the element to reveal the hidden content. Most people won’t bother clicking through the slides, especially if they’re not immediately interested. This means important information could get missed. When content is hidden behind clicks or swipes, users are less likely to engage with it, leading to missed chances to capture their attention.
On top of that, hiding content like this is generally bad for SEO. Google doesn’t favor hidden content, as it could be viewed as potentially deceptive or manipulative. When valuable content is hidden in a carousel, it could potentially impact your site’s ranking and visibility.
Mobile & Accessibility Issues
On mobile devices, carousels can be difficult to navigate due to small touch targets or the risk of accidental swipes. Additionally, users who rely on accessibility tools such as screen readers or keyboard navigation may find it challenging to interact with carousels, leading to frustration and potentially excluding a portion of your audience.
While we try and make the carousels as user-friendly as possible, alternative solutions will always be superior. It’s much easier for all users to navigate a simple grid/list then swipe through carousel slides.
Page Speed
Carousels require added scripts (CSS & Javascript) and complex loading mechanisms which can slow down page load times. Since website speed is crucial for both user experience and SEO, added carousels can negatively impact your rankings and more importantly frustrate visitors, driving them away before the content even fully loads.
Additionally, if you are displaying image based carousels (especially with large images) this can really slow down your website. In order for the carousel to properly render it has to preload the images in the carousel. This means any image added inside a carousel won’t be lazy loaded.
Would you rather have a fancy carousel or a faster website?
Lost User Focus
When content rotates in a carousel, it’s harder for users to focus on a single, clear message. With so much information cycling through, it becomes challenging to highlight your most important points, leading to confusion or missed opportunities. As a result, users may not absorb the key details you want them to, reducing the overall effectiveness of your messaging.
Consider displaying only your most crucial content with the ability for users to click to view further information on a separate page. If you are using carousels, you are most likely presenting too much information at once, rather than focusing on the most important points.
Higher Bounce Rate
Carousels can be a major distraction that can drive visitors away quickly. If users don’t engage with the carousel or find it difficult to interact with, they may leave your site sooner. This can result in a higher bounce rates (aka people leaving your site) and lower conversions. Consider presenting your content in a way that is easy and captivating without requiring the user to interact with it.
No one wants to sit there and click next buttons and wait for content to load, just to learn about your product or service. People get fed up and will simply leave your site.
Lower Conversion Rates
Carousels can obscure important content that users might need to see in order to fully understand your product or service. Since only a portion of the carousel is visible at any given time, users may miss key information that could influence their decision to purchase your product or service.
For instance, if your product’s features or benefits are hidden in a carousel, visitors may leave without ever discovering what sets you apart from the competition. Make sure all the information you want your visitors to read is visible by simply scrolling down the page.
Overused Design Trend
Carousels have become a staple of web design, often included out of habit rather than necessity. Many websites use them because they’re trendy, not because they enhance the user experience. Choosing a more thoughtful and user-centered design can often lead to better results than relying on an overused design pattern.
If you’ve received a design from your client that you are expected to replicate and it includes a carousel, I encourage you to talk to your client and explain why using carousels may not be ideal. Their designer should be able to provide a good alternative solution.
Often carousels are a go-to for designers as it makes it easy to display multiple pieces of content in a limited space and they look modern and trendy. But designers aren’t always front end developers and don’t understand the negative impacts these elements can have.
Carousel Alternatives – What Should You Use Instead?
Now that you understand why carousels aren’t the best choice, you might be wondering what to use in their place. Here are some alternatives that will deliver a smoother user experience and boost engagement, ultimately making your site more effective at converting visitors into customers.
Static Images: Display key content clearly and without rotation, allowing users to engage with what’s most important without distractions.
Cards Layout: Use a grid of cards to showcase various products or features. This provides an organized and visually appealing way to present content, making it easy for users to focus on what interests them.
Show More Buttons: Instead of hiding content behind a carousel, display a few items followed by a “show more” button that will take the user to a separate page with all items (cards). This is a great solution for sections such as services where you can highlight your crucial services while providing a link to view all of them for customers that want to learn more.
Grid or List Layouts: Present content in an easily digestible format, such as grids or lists, where users can easily navigate and focus on individual pieces of information.
Tab-Based Navigation: Use tabs to let users switch between different sections of content, keeping the experience interactive while ensuring the focus remains on one piece of content at a time. Generally tabs aren’t recommended either, but they are often better than carousels. Especially when set up using the theme’s toggle element functionality.
Single Featured Section: Highlight your most important content in a single, static section without rotation, ensuring users see and engage with the key information immediately.
Horizontal Scrollbars: While hiding content isn’t ideal, using a horizontal scrollbar is a better alternative. Since horizontal scrollbars are a native browser functionality it won’t require any added scripts and it will be more mobile friendly and accessible.
You can use the theme’s Post Cards element to display content hidden by a horizontal scrollbar. Just make sure to set up your horizontal scrollbar section where the last item is cut-off, this will be a clear indication to the end user that they can scroll to reveal more content.