Should I use a carousel on my website?
September 4, 2019
Carousels (also known as sliders) on websites are popular, but are known to have issues with accessibility, user experience and SEO. Some studies have also shown that they aren’t as effective as we might think. Here’s some things you should consider when you’re deciding if a carousel will work for your website…
We hope that users would notice a carousel, interact with it, see and read every slide (or at least every slide up to the one they want to use) and click on what interests them, if possible. Some research shows that many users don’t react to carousels in this way.
One study placed the main offer for a company on the front page carousel, and asked users to look at the website and identify what the main offer was. The users didn’t succeed in the task and couldn’t find the offer. Another study showed that only 1% of users clicked a feature on a carousel, of which 89% clicked the first slide and didn’t see the rest. In a study of home page carousels on B2B sites with calls to action, the carousel achieved only 32 clicks out of almost 5,000 visits.
Carousels often function just like ad banners. Many look like, are similar size to and positioned like traditional ad banners, and auto-playing ones mimic animated adverts. Heat map studies have shown that most users have developed ‘banner blindness’ to carousels, and often skip straight past them, mentally blocking them out. Those with certain ad blocking plugins, especially those with custom settings, will also not see some carousels.
Accessibility and user experience
The file size bulk that comes with a front page carousel, often with multiple large images, can cause a slower load speed for the first landing of a website. Research suggests that any additional time over 2 seconds for a site to load contributes to greater levels of users dropping off.
Carousels pose accessibility issues for keyboard and screen reader users that can’t be fixed elegantly. For auto-playing carousels, having content automatically disappear can cause loss of focus for screen reader and keyboard users that are reading or have keyboard focus on that content when it animates away. This can force the user back to the top of the page. There’s also an issue with semantically or programmatically associating the controls for a carousel with its content.
Low-literacy users, such as those with English at a non-native level, may not be able to understand a slide before it rotates to the next. Moving UI elements also reduce accessibility for users who have difficulty clicking something before it’s taken away. The cognitive load and distraction caused by auto-playing carousels can also be difficult for some users.
Load speed also affects SEO, as Google will penalise search rankings for any slow websites, and additionally penalise those that are slow on mobile devices.
No hierarchy, and an over-saturation of headings and content at the top of the page can lead to confusion for search engine spiders. SEO best practices state that there should only be one h1 tag per page, and it should appear before any other heading tag. The problem with using h1 or any heading tag in the carousel is that every time the slide changes, the h1 tag changes. A page with five slides in the carousel will have 5 h1 tags, which devalues the keyword relevance.
Alternatives to carousels
If you’ve read this far and decided you don’t want to use a carousel anymore, what are your options for something to replace it with?
The most simple alternative is a static splash page that consists of multiple blocks or pieces, or just select your most important promo and present it in a clear and attractive way.
If interactivity or wow-factor is the most important consideration when replacing a main carousel, then a background splash video may be a better compromise. This option still has issues with load speed and mobile experience, and not everyone will watch until the end.
Another alternative for carousels, when multiple pieces of content taking up the full splash area is required, is to randomly load a different piece of content on landing, and do not show the others without a new page load. We can even build this so it’s weighted, so that a certain piece of content is shown more often than the others. This ensures that the right amount of users will see each content piece, and does away with most other issues. However, this option is still not perfect for SEO.
Or take a novel approach and drop the promotional splash entirely, and go straight to the content…