Designers regularly get asked to create carousels for web pages, often because the image sliders are flashy and can communicate lots of information without taking up too much vertical space. But using carousels is not a best practice — they provide a poor user experience, poor accessibility, and low overall effectiveness. So why do stakeholders ask for them so often?
There are three main reasons stakeholders like carousels:
- They allow for high information density
- They provide a lot of control over content hierarchy
- They allow for animations that can give the page some pizzazz
But none of these make up for the many issues that result from carousels. That high information density that stakeholders love is likely to overwhelm visitors (especially when there are multiple calls to action, which can be easily forgotten or ignored). But more often, visitors will skip over carousels entirely because they resemble advertisements (a phenomenon called "banner blindness"), especially if they automatically cycle between slides. In fact, only around 1% of users will interact a carousel at all.
Here's Why Using Carousels on Your Local Pages Is Not a Best Practice
Poor User Experience
Auto-cycling carousels deliver a poor user experience because they take away user control and freedom, violating Jakob Nielson's usability heuristics. And sudden stimulation within a user's line of sight is often ignored, or can distract the visitor and slow them down, preventing them from accomplishing their goal. Even without auto-cycling, carousels take up a lot of space on the page and they don't yield strong engagement results.
Case Study: The Invisible Gorilla Test
Subjects watched a video in which people pass a basketball back and forth while a woman dressed as a gorilla walks through the scene. They were asked to count the number of times the basketball was passed, and about half of participants did not see the gorilla at all. This is called inattentional blindness.
Takeaway: When users are focused on a task or important information, they may not even notice a carousel, even if there is movement.
Carousels are more complex for screen readers to translate to users that are blind or visually impaired. They also do not accommodate users with motor skill or language issues, who may find it difficult to transition between slides or read them quickly enough as they auto-cycle. To meet accessibility standards, carousels must be doctored so that all users can access the content through screen readers and keyboard-only navigation.
A user was asked to find whether Siemens Appliances had any special deals on washing machines. Despite the information being in 98pt font and at the top of the page, because it was in an auto-cycling accordion, the user was unable to find the information at all.
Takeaway: Even when the most important content is at the top of the page, in the largest font size, on a flashy image, and the visitor is specifically looking for it, it can become almost invisible on the webpage if it is contained within a carousel.
Despite popular belief, bright, moving carousels do not entice users and will attract little if any user engagement. They may also diminish the visitor's first impression of your brand.
Carousels also reduce page loading speeds, due to an increase in bandwidth, which can prevent the images from loading at all — or may cause the average visitor to abandon the site. This impact is magnified on mobile, where on-the-go users have a lower tolerance for slow-loading pages. Mobile screen sizes can also distort carousel images or make it impossible to interact with the controls. Also, keep in mind that text on carousel images is not indexed by search engines, meaning it can't impact SEO or your search rankings.
Case Study: Notre Dame Site Study
Of nearly four million visits on the Notre Dame site, only 1% of visitors clicked on a feature in a carousel, 89% of which clicked on the first feature out of five total. Does your business stand out in local search? Take our quiz to find out.