Carousels are everywhere, and they have been around for a while. There is a reason behind that: they are practical, allowing you to display many pieces of content in a single section, making your content very organized. Let’s not forget that they are also easy to develop.
You will normally see carousels being used to highlight specific content, such as products, promotions, and images in slides that you can interact with.
However, research by Baymard Institute shows that the use of carousels is decreasing year after year between top U.S. and European ecommerce sites.
And do you know the reasons behind that?
Today we will discuss the main reason why the designer community is discouraging the use of carousels and whether you can still use them safely.
To understand why carousels become a major concern for UX designers in recent years. and how to use them effectively, it’s important to first understand their UI composition and be aware of specific components that require attention.
I will give you a list and divide it into three main sections: first, the components that you will see in most of the carousels around the internet; next, the components that are important and that depend on the context of your carousel; and to finalize, the components that you should avoid at all costs.
- Essential carousel components
- Context-dependent carousel components
- Components to avoid
- Can modern carousels still be effective?
- UX best practices to design an effective carousel
Essential carousel components
Effective carousels need these components:
- Container element: This is the main element that holds all of the items in the carousel. It is usually a
divor other type of container that is set to a specific width and height - Items: These are the individual elements that will rotate inside the carousel, such as images, text, or other types of content. They are typically arranged horizontally, one after the other, within the container element
- Text describing what the carousel is about: This component might be important if you don’t have text inside the carousel, or only the images won’t be enough to tell the user what is the section all about
- Navigation buttons: These buttons, such as “next” and “previous,” sometimes represented with an arrow, allow the user to manually move through the carousel
- Play/pause buttons: Buttons that allow users to stop or start the automated rotation of the carousel — very important to have if you are using automatic rotation
A website that makes use of these elements is Deposit Photos. It doesn’t use automatic rotation and makes it clear which side you can start scrolling on by showing only one arrow at first and displaying the next one once you have started the rotation.
The number of images can be almost imitated on sections like that and the intention of the website is only to give you a taste of what is inside the section.
But later in this article, you will see that for most of the websites, you don’t need carousels like that and that the number of slides will work better if limited.
You are free to break rules, as long as you have knowledge about them and can tell exactly why and based on which user’s behavior you are breaking them.
Context-dependent carousel components
These components can make a carousel easier to navigate, but depending on the context, may be overwhelming to your user:
- Indicators: Small dots or other visual elements that indicate the current item being displayed in the carousel; you will see an example in the image below
- Captions: Short text or labels used to describe the items being displayed; be strategic about any writing that you use on your interface
- Call to action: A call to action button should be used carefully because if you have too many on the same page, the user might few confused and end up not picking any action
- Pagination: This is the number of dots that allow users to jump to a specific slide in the carousel
One example of that is Alibaba, which makes use of the components present in both sections discussed, as you can see below:
It is composed of a static carousel, which allows users to rotate it at their own pace. Additionally, it uses a container, items, text, calls to action, dots to indicate how many items it has, and navigation buttons.
The same happens to Mercedez Benz. You will see these components like title, text, call to action, dots, and navigation button always being used around the web:
Components to avoid
Some components make a user experience plain bad.
For example, take automatic rotation. This is a feature that automatically rotates through the items in the carousel at a set interval.
Learn more →This means that once users open the website, they have no control over what is displayed, and that behavior can trigger human subconscious reactions.
Although we no longer live in the jungle, our human brain is naturally inclined to pay attention to moving objects because they may be potential sources of danger or opportunity. So, it is something that we are naturally wired to do.
If the user is turning their attention to the carousel it may seem like a positive reaction, right?
Wrong! This is not good for your website at all.
Here we encounter a problem called banner blindness, which means that most users tend to perceive moving elements on a page as advertisements and their tendency is to ignore them.
Another issue is that users’ attention is directed to the carousel, and in case they do not find it interesting, they may leave the website before bringing attention back to other areas of your website.
Research by Nielsen Norman Group found a few behaviors in users while interacting with carousels: only 1 percent of the users will interact with it, and most of them will try to hide the moving content by scrolling down before even looking at it or by leaving the page earlier.
These are just a few examples of how carousels can have negative effects on a website if not used strategically.
Can modern carousels still be effective?
Let’s start from here: another study by NN/g found that, on average, people normally only look at the first slide of a carousel and ignored the rest, regardless of the length of the carousel.
The primary takeaway from this study is that important information should not be hidden behind a carousel, and if it is really needed, the information should also be repeated in another location on the website.
Examples of carousels across the web
Let’s explore how carousels are used on the web to gain further insight.
Airbnb is well-known for its outstanding user experience, and as you can see, it is using dozens of carousels in the same section of its website.
To be honest, I don’t see a better way for a website such as Airbnb, which has dozens of users with different intentions, to be able to captivate everyone on its first page.
The fact is that in this case, the carousels are making more information accessible to users in a very minimalist way.
Airbnb found a way to use carousels without overwhelming users. One key aspect is that they don’t use automatic rotation, giving users full control over the page.
The second lesson is that the carousel has a specific and well-thought-out purpose to be there, and its appearance doesn’t look like an advertisement, which could cause banner blindness.
On Airbnb, the user can decide to rotate the carousels, and they will still show the relevant information in a static way. But if the user is interested, they can always see more without having to leave the page.
It makes sense to use carousels with the right timing. But we should have in mind that without carefully adding the information, these carousels would be scaring customers away from the Airbnb website.
This demonstrates that the success of carousels depends on the context and how they are used more than any rule itself.
Carousels can still be effective in certain situations. For example, a carousel may be useful for showcasing a variety of products or services on a home page, or for highlighting promotions or events.
What about conversion rates with carousels?
Amazon is well known in ecommerce for turning hard-to-convert users into buyers, but why does it use the carousels if they are considered conversion killers?
Do you really believe that Amazon designers don’t know this and are just being silly?
Amazon does not just makes use of carousels, but it uses our biggest enemy: the auto-rotation feature. How could that be right?
I would say that only research focused on specific website users would be able to tell you.
Even though there are best practices when it comes to UX, it’s important to remember that every decision should be validated through user research.
But I have a few guesses. In this case, we could think about the hypothesis that Amazon users are accustomed to finding site promotions on the top of the website in a carousel.
So, maybe Amazon prefers to be conservative so the users can still identify their product, but again, it is just a possibility.
I just want to demonstrate that many factories should be analyzed while designing a product, you can not just take into consideration the UX design rules.
That’s why I can not just tell you to use or not use the carousel. First you need to know your users, their context, and your business expectations.
UX best practices to design an effective carousel
In summary, the key takeaway from this article is that the design of the carousel should make it easy for users to access and interact with the content, and here is how you can do that.
Design an easy functionality
The UI of a carousel should be accessible and easy to play with. Your users should be able to understand how it works; I have seen beautiful carousels out there that most users won’t figure out how to interact with.
To design an accessible UI, include clear navigation indicators, such as arrows or dots, and don’t play too fancy, only simple and practical.
And don’t forget, just in case: never hide important information behind the carousel. Make sure to display the information somewhere else on your website.
Even the simplest interaction might be hard for some users and they won’t play around with your carousels at all.
Give the user control over the interface
The automatic animation on sliders leads to banner blindness. So, be careful with that.
A very well-established best practice in UX design is to give users control over whatever is happening on their screens, and carousels should not be an exception to this rule.
So, depending on the context, don’t set the carousel animation to play automatically — let the user scroll through the items without setting a time for that.
Let the user know how many slides you have in the carousels
We already know that users don’t interact that much with secondary slides on carousels, but it is always better to let them know how many are left.
And if possible, keep this number to a minimum, because too many items may discourage users even more.
Use clear and concise labels
Your labels should be carefully analyzed to be clear and easy to read.
Responsiveness
It can be challenging on carousels since they normally don’t transition well on different screen sizes, so be careful and don’t forget to test your carousels on mobile.
Conclusion
Your user will always be the best person to tell whether carousels will be an effective choice or not on your website.
But now, we know that carousels should be carefully analyzed because while they can be a great solution to your product like Airbnb, they can also scare users away (as we learned through the NNG research).
The truth is that for most websites, carousels aren’t really needed. But if you decide to have them, be aware of the best practices, and don’t forget to run tests to understand whether your users are interacting with the carousels and whether they are really being effective.
LogRocket: Analytics that give you UX insights without the need for interviews
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — try LogRocket today.
