At face value, carousels appear to be a pragmatic solution for showcasing masses of content in a semi-dynamic way. However, beneath this surface-level appeal lies a plethora of issues that tend to undermine the user experience, website speed, and conversion rates.
Why Carousels Get Implemented
The allure of carousels often stems from their perceived ability to save space and offer an interactive experience. They are turned to as a solution that consolidate various pieces of content in an organised, visually appealing manner.
Moreover, carousels are believed to provide a platform for storytelling or sequential messaging, which can be particularly enticing for designers and clients looking to convey a narrative or highlight multiple offerings.
However, the reality of their implementation is quite different.
Space-Saving Illusion
One of the primary motivations behind carousel implementation is the notion of space-saving. In a bid to prevent a webpage from appearing overly cluttered, designers may resort to carousels to house various pieces of content. There is a fear of a page becoming 'too long', and therefore, thematically linked content is grouped together in a single component.
However, this perceived organisation is often a mere illusion. The reality is that only one piece of content within a carousel is visible at any given time, rendering the rest temporarily hidden from the user's view. This approach contradicts the principle of keeping important content immediately accessible and visible to users.
To put it another way: if there are multiple pieces of content effectively competiting for prominence, this can undermine any essence of importance. This is especially the case for auto-rotating carousels.
Perceived Interactivity
The interactive nature of carousels is another 'selling point'. The ability for users to click through a sequence of images or messages is believed to foster a sense of engagement and interactivity.
However, this interactivity is often superficial and fails to add substantial value to the user experience. Moreover, it imposes an additional task on the users, requiring them to actively interact to unveil the full spectrum of content.
This can actually ramp up feelings of frustration from the user, particularly if the carousel contains key information that the user then has to click (or even worse, wait) to discover.
Indicative of Indecisiveness
The decision to use a carousel often mirrors a level of indecisiveness either on the part of the designer or the client.
Essentially, it is a failure to prioritise one message or piece of content over another, stemming from a fear of potentially omitting crucial information. The reasons for this can be poor planning, design by committee, a failure to trust the designer, or simply inexperience.
Lack of Clear Focus
The inclusion of a carousel can signal a lack of clear focus regarding the core message or offering of a website. By attempting to showcase multiple messages or pieces of content concurrently, carousels dilute the emphasis on any single item.
This lack of focus can manifest as a confusing or overwhelming experience for users, who may struggle to discern the primary takeaway from the webpage.
Fear of Omission
The carousel appears as a solution to the fear of omitting any piece of content deemed important. However, this approach often backfires as it clutters the user's interface, making it harder for them to absorb and retain the information presented.
User Engagement with Carousels
Carousels, initially devised to enhance user engagement by showcasing a variety of content, frequently fall short of this aspiration. Their attractive design and dynamic presentation belie a different user reality, often leading to overlooked or ignored content.
Visibility and Attention
Carousels first face the hurdle of capturing user attention. Their movement can be more distracting than engaging, and many users mistake them for advertisements, leading to a phenomenon known as "banner blindness."
This automatic dismissal drastically diminishes the likelihood of user interaction with the carousel content.
Interaction and Usability
Even when carousels manage to garner attention, their interactive design often leaves much to be desired. The controls for navigating through the carousel are typically small and require precise clicking or tapping, which can be especially frustrating on mobile devices with limited screen real estate.
Automatic rotations can interrupt the user, creating a discordant experience as the speed of rotation often misaligns with the user's reading pace, causing them to miss vital information.
Accessibility Concerns
Carousels present significant accessibility challenges. Users with disabilities find carousels particularly difficult to interact with. Individuals with motor disabilities may struggle with the precise interactions required to navigate carousel content.
Additionally, carousels often lack the necessary semantic markup required for screen reader interpretation, rendering them inaccessible for visually impaired users.
It must be kept in mind that screen readers make sense of web pages by reading down the page in a linear fashion. There is no interactivity, and no way to clearly differentiate what is carousel content, and what isn't.
The result is a confusing dump of content, which in some cases, may not be thematically consistent. For example, imagine an ecommerce website with a carousel high on the page, which has the following:
- A slide that announces a sale
- A slide that promotes a new product launch
- A slide that highlights a 15% discount for new customers
The result is a disorientating wall of content that obscures the true, main content of the page, by effectively placing hurdles within the main content that visually impaired users have to navigate through.
Misplaced Heroes: Carousels in the Hero Section
Positioning a carousel in the hero section—the initial viewport of a webpage—can be a critical misstep. As problematic as carousels can be on any part of the page, to place them directly within the hero section is UX cardinal sin.
This prime digital real estate is crucial for conveying a clear, singular message to the visitors; however, a carousel muddles this clarity by rotating through different messages.
Confused Messaging
Having a carousel in the hero section is akin to a salesperson altering their pitch every few seconds—it's confusing and easy to tune out. Instead of presenting a clear value proposition, carousels introduce multiple, often unrelated messages, making it challenging for users to grasp the primary focus of the site.
Overwhelming First Impressions
The hero section is a user's first interaction with a webpage. An overwhelming carousel with rotating offers or messages can create a chaotic first impression, likely deterring users from delving deeper into the site.
Carousels and speed
The performance implications of carousels are a significant concern. Carousels, with their rotating images and transitions, can substantially slow down a website’s load time, which is a critical factor in user satisfaction and can also impact SEO in extreme cases.
Load Time Increase
Every image, text slide, and transition effect in a carousel requires additional data to be loaded, which prolongs the page's load time. In an era where users expect pages to load in two seconds or less, every additional second of waiting drastically increases the likelihood of users abandoning the site.
Resource Intensiveness
Carousels are resource-intensive, requiring additional JavaScript and CSS, which can bloat the website code, affecting not just the load time but also the overall performance and responsiveness of the site. If they're packed with high-resolution images, this will also significantly increase page load times.
And this overhead is being caused by a design pattern that is well-known to receive very little user engagement!
If You Must Use Carousels
Google have helpfully released some guidance on carousel best practices, through their web.dev platform.
It will also be useful to keep the following in mind:
- If you care about conversions, probably don't use carousels.
- Never use carousels in hero sections.
- The fewer slides and images you can use, the lighter your page load will be.
- Never include critical information in a carousel.
- Do not think carousels will engage the user or encourage interactions, because the chances are, they won't.
- You probably shouldn't be using auto rotating slides.