Over the last few years there has been a backlash against using content carousels, or “sliders” on websites. In this post we’ll go over the pros and cons of implementing them. Many people have taken sides in this battle, mostly against them, but a few for.
Note that carousels are often referred to by similar terms, such as “image slider,” “feature-area carousel,” etc… I use the term “content carousel” because it encompasses all potential types of content, placement, and uses of a carousel.
Summary
Carousels are useful in some contexts, but need to be implemented with performance, usability, and website accessibility in mind. Think about the goal of the page carefully before using a carousel as a crutch. Use data to back up your decision.
Why do people use carousels?
Carousels are often implemented to appease multiple stakeholders
Most organizations have various stakeholders who have opinions about what is best for their website. Since many carousels are placed in prime real estate on the site (the top), there may be competition for what is displayed there. For example, a non-profit development director may want to encourage donations, while the volunteer coordinator may need to fill volunteer slots. Rather than think strategically about the information architecture of the page, a quick solution is to throw in multiple carousel slides to accomplish both goals.
In one particularly egregious example, we had a client who had two primary divisions in their organization who were competing for homepage real estate. Their solution was to insist on two side-by-side image carousels on their homepage. In addition they requested that the carousel auto-forward. As you can image the experience was confusing, to say the least.
Carousels allow content to be quickly added to a website
Have a sale but don’t have a spot to add it? An image carousel allows you to quickly add content without potentially rearchitecting your website or paying a developer. This is particularly true when the textual content of the slider is embedded into the image. A designer working with the marketing team could, for example, create an image slide that wouldn’t require any HTML coding to implement. This does have serious accessibility and SEO implications, however, as I’ll mention below.
Downsides of using a content carousel
Carousel conversion rates are often very low
In a frequently-cited test, Erik Runyon showed how carousel interaction drops off dramatically after the first slide. There were some caveats which he notes in the article, so it’s worth reading to understand the nuances of his test.
Carousel accessibility issues
Many implementations of carousels suffer from severe accessibility issues that prevent disabled users from accessing their content easily, or at all. For example:
- Carousels that auto-forward can be difficult to read before the new slide appears and / or it’s not possible to stop the carousel if you need more time to read it.
- Image carousels often contain a substantial amount of text that isn’t appropriate for the image alt text.
- The controls are small, hard-to-use, or even non-existent
- They don’t support assistive technologies
Carousel usability issues
User experience problems with carousels overlap with accessibility issues quite a bit. As we’ve noted before, for example, users on mobile devices may have trouble reading an image carousel that was designed for the desktop.
Carousel performance issues
By their nature, carousels require the loading of additional images and scripts to accomplish their goal. Since website performance (loading speed) is a key user experience and SEO metric, every second counts. Using a single static image with accompanying HTML text instead of multiple images and the required scripts to run a carousel will always perform better.
In particular, carousels use precious bandwidth on mobile devices on slower connections. We also often encounter “carousel creep,” a situation where content managers continue to add more and more slides without removing older, expired ones.
Carousel search engine optimization (SEO) issues
Often the textual component of a carousel is embedded into the image slide in a carousel. This means that a search bot can not read and understand the content and hierarchy of the content within the image. While you can (and should) always add alternative (alt) text to an image, this solution is less-than-ideal. Image alt text is intended and expected to describe an image, NOT replace HTML content. For example, in HTML content you can have headings, lists, formatting (bold, italics), etc… None of that is supported by alt text. Therefore, search engines (and visually-impaired users) could have a hard time understanding the structure and content of the slide.
Is it possible to solve the issues with carousels?
It is. However, often it requires tradeoffs that might not be worth it. For example, the American Foundation for the Blind, an organization that has a very accessible website, uses a carousel. Their carousel was thoughtfully designed and built to be accessible to visually-impaired users. Designers, clients, and stakeholders might not be happy sacrificing visual design to meet carousel accessibility requirements. Notice, for example, the numbered controls and the fact that the image is mostly presentational and there is HTML content that is NOT overlaid on the image (or worse, part of it).
In addition, performance issues can be mitigated using various techniques. Images can be optimized, scripts can be loaded differently, etc…
When is a carousel a good solution to a user-experience challenge?
Previously I mentioned that the mobile experience can suffer with carousels. However, in some cases it can solve UX issues. For example, amazon.com uses an image carousel to display multiple product images on mobile devices. This solves the problem of how to show multiple product images on smaller screens.
Of course, this needs to be balanced against other concerns such as accessibility and performance. In the amazon.com example, on desktop devices they do not use an image carousel for alternate product images in the same way. Rather, they show each thumbnail individually to the left of the main product photograph so you can view all of the alternate images available at once. As a matter of fact, Baymard, a well-regarded UX consultancy, found that using carousels for product images poorly leads to usability issues.
Sometimes, the content being presented is uniquely suited to a carousel format. For example, a slideshow presentation where a user might expect content to be presented in a carousel format. Again, however, if a carousel is used in this case it is important to make sure that it is accessible and performs well, especially on mobile devices.
Conclusion
We often find that the drawbacks of a carousel just aren’t worth the trade-offs. To know for sure if a carousel is right for given situation, it’s always best to test your ideas with real users or conduct an A/B test. Often this type of testing is outside the budget of an organization. In these cases, look for case studies and research done by other, reputable firms that might shed light on how you intend to use a carousel.
