Whenever we talk about carousels or sliders, the controversy arises about whether they are really useful, if it is worth occupying such an important space of your website or online store for this type of visual resource and conversion.
Some people love them, others hate them, and they are one of the main design elements that are always highlighted by the most popular visual layout designers such as Divi or Elementor to show their visual potential.
But what is the truth in all this controversy? are carousels good or bad? are they really effective? are there any data or studies on the matter?
Let’s try to put some order in this debate, analyzing the pros, cons, and also data, something that is usually missing in this kind of discussions.
But first …
What is a carousel or slider?
A carousel, slider or slider is a slideshow of images, video and/or text on a website. An example would be a rotating carousel that displays products or photos.
Web designers can incorporate carousels or sliders in all sorts of locations.
Many companies use them to display relevant content or different services and/or products.
When a designer wants to quickly display several options and help users select them, a carousel helps narrow down the choices.
Love and hate carousels or sliders
You only have to ask several designers, developers or web administrators to get a wide range of arguments for and against carousels or sliders.
The most critical will argue that carousels are confusing because they show users several options at once, and all of them have the same weight or importance.
From a usability point of view it’s all about providing clear choices, the most logical counterargument is that anything that creates confusion should be avoided.
But there are many other reasons why carousels or sliders would create a bad user experience:
- Visitors often see carousels or sliders as if they were ads and skip them.
- Carousels or sliders slow down pages, which affects SEO, key web metrics and, consequently, conversion rates.
- Some carousels or sliders do not adapt well to mobile devices.
- The space they take up reduces the space available for other content that could be generating direct conversion.
- Carousels or sliders can give the impression that you are not clear about what to highlight, so you chose to show all options at the same time.
Some even say that a moving carousel can have the same negative impact as an autoplay video. Instead of carousels, critics will always recommend using static images, good text with a call-to-action button.
If we go to the complete opposite side, some designers love carousels or sliders and argue just as vehemently in favor of their use.
Here are some of the arguments why carousels or sliders, used properly, can generate a good user experience:
- They save space: they unify content so that more can be seen on a single screen.
- Users are more engaged: Visitors spend more time viewing the content and images in the carousel, getting a general idea of the offer, before visiting the rest of the site.
- Carousels focus on the image: While different images or videos on the page can divert attention from the text, carousels put everything in one place to avoid distractions.
- Users control the content: Whether you allow users to advance through the different slides at their own pace, or you omit the controls altogether.
Summarizing both points of view, we could say that yes, it is true that if your web carousel looks like an ad, users are likely to ignore it due to banner blindness.
However, web carousels have evolved, and the most current ones feature beautiful, high-quality images, well-targeted copywriting and well-placed calls to action.
In the end, any design element must ensure that the information is available to the user at the right time and place, so that they can consume the web content correctly, either through a static element or several slides, increasing their time spent on the web, and above all the conversion into leads and sales.
Whether we achieve this depends on the good use of design resources, and in the case of carousels or sliders, we should know their main problems to avoid.
Shall we continue?
Why you should not use carousels or sliders
Let’s start with the reasons that play against the use of carousels, sliders or slider controls, which are a few…
The human eye reacts to movement and will miss important things
Our brain has 3 layers. The oldest part is the one we share with reptiles. It is primarily concerned with survival. A sudden change in the horizon could be a matter of life and death.
This is why the human eye reacts to motion, including sliders and carousels of constantly moving images or video.
So it’s a good thing, right? Well, not exactly.
Unless the image carousel is the only thing on your website, and that would be a very bad idea, it’s not a good thing.
The carousel draws attention away from everything else: what really matters, like what you add value to, the content of your site, your products, and so on.
Too many messages equals no message
Image carousels fall victim to the banner blindness I was telling you about earlier, and most people don’t pay attention to them, but even those who do may miss the message.
Focusing on one main message and one main action is always more effective.
A visitor comes to your website, sees a message on the carousel and starts to read “Grow your business, let it…” SWOOP! It disappears and moves on to the next one.
Often, carousels move so fast that people can’t finish reading them, even if they want to.
Many carousels rotate too fast or too slow
If a carousel rotates too fast or too slow, users do not have time to view each slide properly or get bored.
The amount of text on a slide should determine how long it is visible. A different rotation time may be necessary for each slide.
A slide with a lot of text should be visible for longer, but 4 or 5 seconds is probably enough for a slide with a simple title.
Many online stores use auto-rotating carousels, and this can often be due to hive mind mentality (if others have it why not us?) rather than actual testing.
These types of online stores generally advertise “special offers” and “new products” in their carousels that appear frequently and, very often, what is being advertised is not even relevant to what users are looking for and may cause them to leave.
Most users will not see all the slides in a carousel.
During many tests (we will see this at the end) individuals would scroll past an auto-rotating carousel long before it had gone through all the slides or moved to another page.
It may not be a problem if a user does not see all the slides, as long as the carousel is not the only way to access some of the content or products, because there are times when the only way to access the search engine or other important content is from a slide in the carousel, and this is a usability disaster.
What you should do if you use a carousel is to make sure that the most important and highest performing slide is the first one because most people will never see the second one.
The user should be in control
Carousels often have a horrible user experience. They move automatically (often too fast) and have small, if any, navigation icons.
A key rule of UI design is that users should always be in control and I think we can agree on that, can’t we?
Nowadays there are many online stores that occupy the main part, the first thing you see, of their e-commerce with a carousel with rotating offers, not because they have tried it, but because of the hive mind mentality we talked about before.
If the user doesn’t like the first offer they see, what if they wait for the next one to rotate? And if they don’t like any of the ones in the carousel, is the offer over?
And that’s if every time they touch the arrows on the carousel the automatic rotation stops, something that doesn’t always happen.
But not only that, but when they come back to your website again, which slide will they see? the one they have already discarded? another one at random? didn’t this website learn that I don’t want to see that slide?
Many auto-rotating carousels do not stop on hovering
When a user passes the cursor of their device (usually a computer mouse or trackpad) over a slide, it indicates interest and the automatic rotation should stop, something that very often does not happen.
By the same token, when a user scrolls over a slide, they are also indicating their intent. If the auto-rotation stops at this point, it prevents the carousel from moving to the next slide just when a user may be about to click on a slide.
Often in usability testing, users would try to click on a slide and the carousel would rotate just before the click, opening the wrong page.
Auto-rotating carousels do not stop when the user takes action
Just contrary to the previous problem, users are often frustrated with automatic rotation when they want to navigate manually.
Auto-rotation should not only stop, but stop permanently after active user interaction because that click gives a strong indication of the user’s intent.
Many companies use image carousels, but they do not auto-rotate, which gives users more control, a critical factor, as I discussed earlier.
Carousels are not sufficiently visible
Slider controls must perform two functions: indicate the current slide in the set and allow users to easily navigate forward and backward.
Most conventional slide control designs use a series of dots to show the current slide among the set and arrows to move forward and backward.
Sometimes the dots are so small that they make navigation difficult, and the arrows are also small and do not contrast enough with the background image to be easily seen.
If a carousel has more than four slides users should be able to easily navigate between slides. An intuitive and user-friendly way to do this is, for example, to add thumbnails of each slide, so they can preview them all and find the exact slide they need with a single click.
Carousels have different requirements on mobile devices
Did you know that approximately 60% of web traffic comes from mobile devices? More than half of your visitors will view the carousel on a mobile device.
Auto-rotating sliders are not at all suitable for touch devices because they lack the scroll state and knowing whether users are about to click on a current slide or not is impossible.
A slide change may even occur just before the user clicks, causing them to open the wrong page.
Mobile device users expect to navigate “galleries” on mobile devices using touch gestures, mostly swiping, and many mobile websites do not support swiping.
Slides created for desktop computers should not only be scaled down and used differently on mobile devices to make the text unreadable.
Another issue to keep in mind is that mobile device users have even less patience with slow loading carousels. You must ensure readability at all times, and that the weight of slide images is optimized for the bandwidth of mobile devices.
Many carousels are active for the wrong reasons
Carousels make using a website more complex. Instead of simply viewing the content, users must understand how they work.
Large, full-screen carousels are annoying to users and often cause them to skip highlighted areas, which is almost the opposite of the desired effect.
There is often a desire to implement technological advances without thinking about how they affect the type of people using the web.
A company’s home page is like an attractive website selling apartments, with several villas competing for the user’s attention.
Carousels can be seen as a way to keep everyone happy, but in the long run they are counterproductive in terms of conversion.
Sliders are often thought of as a way to provide better navigation to important offers, but very often the data shows otherwise.
When should you use carousels or sliders?
If, as we have seen, carousels are not suitable for all websites, there are some that could be improved with a good use of this design resource.
The first thing is to analyze what your visitors are looking for, and how each page of your site can help them get it.
If carousels strengthen your brand and improve visitor confidence, they can be a fundamental part of the user experience. If they create distraction and confusion, they will negatively affect conversions.
Every organization is unique, so what works perfectly for some may have a detrimental effect on others.
There are a few premises that can help your carousels succeed:
- Keep carousels from being distracting by minimizing transitions and choosing smooth fades rather than sharp horizontal slides.
- Always have the automatic movement stop if the user has the cursor over the carousel.
- Facilitate navigation with visible arrow buttons for forward and backward.
- Allow mobile device users to swipe slides with their finger.
- Displays thumbnails of available slides to facilitate quick navigation to the slide the user wants to view.
- Optimizes page load time by using the smallest possible image size and waits for slides to load later in the carousel, as visitors may not need them.
The consulting firm Conversion Sciences found that unoptimized carousels hurt conversion rates, but optimized ones can improve conversions. This company ran several tests and found that when they optimized the order of the slides, the page out converted any static image by 61%.
Microsoft is one company that uses a carousel on its home page effectively. It presents only two slides containing minimal text. The pause button is highly visible and users immediately see that there are only two slides, each showing one of the company’s latest successful products.
Another company that uses sliders in a clever way is Adobe, showing various videos, images and animations, but keeping the same text and call to action. With this “trick” it manages to attract a lot of attention to the quality of its products while not confusing users with several buttons or texts.
Use carousels for product galleries and step-by-step processes
When visitors to a website see large amounts of information it can be overwhelming. If you offer several products in the same category or several steps in the same process, use carousels to show the whole process and make it easy for the user to navigate through them.
For example, a payment gateway company can include a carousel on its website that shows, step by step, how the customer achieves his goal of completing the purchase easily, using slides with manual or automatic logical steps.
What would have taken the user several minutes to read the text, he will quickly understand through a carousel in just a few seconds. The same type of strategy can be adapted for user registration on a membership website, training courses, etc.
Highlights new content
First-time visitors to a website often want to know what their options are and what the website offers. Home page content carousels provide a brief overview and allow visitors to make a decision quickly.
If you update your site regularly, carousels can highlight what’s new. On news sites or blogs, the latest and most eye-catching material is often the focus of your content carousel.
Users will know at a glance what and when content has changed.
Updated photo galleries
Sometimes all it takes is one image to highlight the virtues of your brand. Other times, a collection of images that each showcase the quality, value and relevance of your brand will be more useful.
A carousel can go beyond simply displaying images. It organizes and displays images regardless of whether you choose a photo gallery with several small images or display after display of high-quality, full-page graphics.
Photo galleries can be indispensable for companies selling high-priced products, such as real estate or vehicles. Homebuyers, especially, want to see several photos of a house before they go to see it in person or make an offer, and carousels allow them to take a quick look.
Automobile manufacturers often show screen after screen of the luxury, design and innovation features of their vehicles to interest buyers with the details.
Instead of having to select individual images, shoppers can quickly see all the highlights.
Show portfolios
Artists, graphic designers and web developers are often looking for a way to showcase their projects, skills and experience. Clients want to have a close-up or brief description that allows them to evaluate the overall quality and results of the professional’s work before hiring.
A carousel with a catalog of products, services or results allows designers to showcase work in a flexible format. Visitors can see as much or as little as they wish, but even if they don’t stop for long, they leave with an overall impression.
What do studies say about the effectiveness of carousels or sliders?
As I said earlier, especially on the downside of carousels, there are professionals and studies that talk about how infrequently people see and interact with carousels.
There are some studies available that support this idea. These studies look at how often users click on sliders or even look at them, and which slides they interact with the most.
Notre Dame University
Some of the most detailed data comes from a study conducted by University of Notre Dame web developer Erik Runyon. The nd.edu website ran a slider during the study that received a click-through rate of just 1%.
Moreover, 84% of those clicks were on the first element of the rotation.
In the University of Notre Dame study, nearly 90% of slider clicks were on the first image in the rotation.
The study also included tracking sliders on four other sites that fared slightly better, one with an overall click-through rate of 8.8% and the others between 1.7% and 2.3%.
Erik, the developer who did the study, mentions that he expected these sites to have a higher CTR due to the more targeted nature of the sites’ visitors. But still, the clicks were always in favor of the first slide.
Click-through data on four other sites in the Notre Dame study showed higher click-through rates, but the first item in the rotation still received clicks much more frequently than the rest.
Beaconfire testing on non-profit websites
Beaconfire, a digital agency that focuses on non-profit clients, NGO websites, conducted a similar study with the websites of four different clients.
In Beaconfire’s study of these 4 NGO sites, the overall click-through rate was again very low, below 1%, and the first item in the rotation was again the most frequently clicked item.
What conclusions did Beaconfire draw from all this:
People may notice the first couple of slides, but they are not likely to click, and beyond that, no one sees them.
Grizzly Zoo Study
Conversionista is a conversion rate optimization company based in Sweden. They ran a test with one of their clients, Grizzly Zoo, a small online pet store also based in Sweden.
The test compared a home page with a large image carousel versus one with a static image. In addition to measuring clicks and usage, they used eye-tracking technology to see which areas users paid more attention to.
In the version with the carousel, users “seemed to avoid the carousel and did not click on it.” In the test version with the static image the eye-tracking data showed “drastically improved interest in the top area and a substantial number of users also chose to click on the new version.”
The numbers also showed this. The static image version was clicked more than 40% of the time, while the carousel version was clicked only 2% of the time.
The heat map of user attention showed that the carousel was virtually ignored (the attention points that appear to be in the carousel were actually in drop-down submenus of the main navigation menu).
York university
When he saw the Notre Dame study above, Paul Kelly of York University decided to track interactions with the carousel on this website.
Unfortunately, the results of this experiment include a breakdown of clicks per slide, but not an overall click-through rate for the carousel. However, the results reiterate that the first slide receives the most clicks (and presumably attention). In this experiment, approximately half of the clicks were on the first slide.
The York University study again showed that by far the most attention is paid to the first slide in the rotation.
In addition, it found that when it reduced the number of slides in the carousel from eight to a maximum of five, the carousel was clicked on more frequently.
However, since the content of the slides was different from the previous collections, it is not certain whether the increase in clicks was due to the fewer slides or simply more engaging content on the slides.
MWI Data
Harrison Jones of digital marketing firm MWI reported click data for three different websites his company worked with, each with a home page carousel for different purposes. All three had very low click-through rates, ranging from 0.65% to 0.16%.
MWI’s study of these three different sites with different strategies for homepage carousels showed that in all three cases, clicks on the carousel were, to say the least, low.
Mobify Studio
Mobify published the results of a study of several mobile-oriented online stores that each had at least US$20 million in Ecommerce sales per year.
In all of these cases, there was no carousel on the site’s home page, but instead sliders were used on the product detail pages of these stores, such as in image galleries.
In addition, these sliders did not advance on their own; they only moved with the user’s taps or swipes.
In this type of implementation, the interaction numbers were much better. During the eleven-month study of over 7.5 million interactions with sliders, users chose to advance a slider 72% of the time and zoomed in (the same as clicking on a homepage carousel) 23% of the time.
In addition, while the first slide of the slider was still the one they interacted with the most, the drop-off for successive slides was not as great as in other studies.
In the Mobify study, of all the people who zoomed into the slider, 54% zoomed into the first slide and 16% zoomed into the second slide. This is a much smaller drop-off from slide to slide than shown by previous studies with homepage carousels on desktop computers.
The decrease in interaction from the first slide to successive slides was not as drastic in Mobify’s study of sliders on product detail pages as in the other previous studies.
This information speaks volumes. It says that carousels can be a useful part of the user experience. It shows that using sliders to show details, such as different angles of a product photo, and in a more specific context, such as on a product detail page, can be much more engaging than a carousel on the home page that spits out offer after offer.
Okay, lots of data on clicks, but what about conversions?
Companies do not usually make public the data of the A/B tests they have performed. However, some conversion rate optimization experts have spoken about the tests they have performed. While they can’t give client details, their comments are certainly worthy of attention.
Chris Goward, founder of conversion rate optimization company WiderFunnel had this to say about carousel offers:
At WiderFunnel, we have tested rotating offers many times and have found it to be a poor way of presenting home page content.
Site Tuners CEO Tim Ash, who also wrote the book “Landing Page Optimization”, has helped over 1250 companies improve their website conversion. Few have been as outspoken as Tim about the evils of rotating carousels.
Finally, usability consultant Craig Tomlin, who has been practicing user experience consulting since 1996 and has worked with clients such as IBM, Kodak and Disney, wrote an article where he referenced a series of tests.
Craig found that the average click-through rate among hundreds of sites he had tracked was less than 1% and conversions were suffering.
Finally, Adobe’s head of optimization, Blair Keen, referred to a test conducted for a financial services client.
Instead of replacing the carousel with a static image, Blair removed the carousel altogether, simply uploading all the content underneath it. He found that the carousel-free version resulted in a 23% increase in sales.
ServerTastic
SSL reseller ServerTastic conducted a series of A/B tests on their website’s home page regarding the use of image sliders. The versions without sliders outperformed those with sliders by an average of 16.48% in terms of revenue per visitor.
However, the slider was not a total failure. ServerTastic also tracked the number of people who signed up for its reseller program, another type of conversion.
Here, the number of signups actually decreased for the sliderless versions of the site by 29%. Registration is free and therefore does not guarantee revenue for ServerTastic, so it’s more of a micro-conversion. But reseller registrations represent the opportunity for more revenue in the future.
In the end, these numbers, along with declining slider click-through rates, caused ServerTastic to abandon the slider altogether.
A win for image sliders!
Brian Massey of CRO consulting firm Conversion Sciences shared his company’s experiences with optimizing sites with image sliders.
Brian agrees that, in general, unoptimized sliders are likely to hurt conversion rates, but he also believes that if implemented correctly, they can improve a site’s results. And he has data to back that up!
His initial efforts tested each of the images in the slider as a static image, compared to a version that used them all as a carousel. Surprisingly, only a static image version outperformed the carousel version.
So they tried setting up the slider with a specific order based on what they learned in that first round of testing.
By optimizing the order of the slides in the slider, Conversion Sciences was able to create a page with a slider that outperformed any static image by 61%.
I recommend you read Brian’s full post, with tips on how to optimize sliders for the best possible performance.
Device Magic video test
Mobile forms provider Device Magic also ran an A/B test in which they had a slider. Their existing home page showed a video that they thought might be too low quality and too technical, so they tested with a carousel that tried to communicate the same message in five slides.
The full test showed that the carousel version experienced 35% more conversions (registrations to the service) than the video version. So another winning test for sliders!
However, you should keep in mind that beating a poorly done video is not the same as beating a quality full-screen image.
But more importantly, it shows that there can be different uses for carousels, and one that is used to tell a story and engage the user is a better use than a slider that rotates through four or five conflicting offers.
So where does that leave us? Are carousels and sliders good or bad?
As you will have seen there are many opinions and data on both sides. But in the end, as with most other decisions the answer is to set goals and test.
Every website is different, as are the visitors you are targeting.
The only way to know what works best is to test different versions and targets. In the successful, albeit few, examples we have seen above you have some idea of how meticulous analysis can lead you to the right conclusion and be able to effectively use carousels in certain situations and conditions.
If you can’t A/B test your site, at least try to measure views and clicks on each part of the carousel with tracking links, so you can determine what attracts users and what they ignore.
And if you decide to use a carousel, let’s review some of the things we can learn from the studies seen above:
- Put your most important and highest performing slide first in the rotation. Many people will never see the second slide.
- Make the length of each slide long enough so that even slow readers have enough time to understand the content.
- Use a smooth fade for transitions instead of a more animated horizontal slide. More motion distracts your users.
- Make it easier to navigate the carousel. Show large “Previous” and “Next” arrows that are clearly visible. Use buttons to navigate to other slides in the set that are large enough to click/tap easily or even thumbnails. Bonus prize for incorporating swipe capabilities for mobile users.
- Optimize carousel load times. Make images as small as you can, and load some of the later slides in the background, as many users won’t even get to see them.
- Most importantly, use content that works for your carousel and its purpose. If your main call to action is only on one of the five slides in a carousel, it will be seen very few times. Carousels are best for telling a story, building your brand or showing different images related to the same concept.
What is your experience with carousels or sliders?
And you, what do you think about all this? Do you have a carousel on your website or online store? Does it work for you? or have you tested if it works? Do you have it because it came with the theme template or by your own conviction? Do you have data on clicks and conversions you want to share? Tell us in the comments below.
