In today's digital world, websites have become an essential tool for businesses to reach out to their customers. With the increasing use of website building tools, such as VB Media, many websites have incorporated sliders (also known as a Carousel) as a means of presenting their products, services, or information. After-all they are an easy way to convey a visually impactful message.
Sliders in 2023
- Thursday 13th April 2023
- 5 mins read
Please rethink Sliders in 2023
However, it is often overlooked (or unknown) that sliders are not performant and can create several issues. Including accessibility, "banner blindness", and poor conversion rates.
In this blog post, we will discuss why using sliders on a website may cause these problems and what can be done to overcome them.
The data and sources
It has been almost 10 years since Erik Runyon and the University of Notre Dame published their Carousel Interaction Stats.
They went some way to document what many web-developers had already suspected.
- ND.edu Carousel Click through rates
This has spurred many to blog about Sliders and question if they were actually accessible and performant. As recent as February this year Erik's' study continues to be citied as a source on many of those.
Here are just some posts worth a read:
Our own data
Our data very much mirrors that of the study above.
VB Media measured click through rates across 600+ websites over a 6 year period. We found that past slider position 2, you have less than a 0.01% chance of someone clicking it!
So what are the issues with Sliders?
They’re not accessible
The primary concern with sliders is their impact on website accessibility. The use of sliders can make it difficult for users with disabilities to access the content of a website. For example, visually impaired users who rely on screen readers may not be able to navigate through the slider content. Additionally, users with motor disabilities may have difficulty using the slider controls, such as clicking on small buttons or swiping to scroll through the content.
Moreover, sliders can also cause issues with keyboard navigation. Some sliders require users to use a mouse to scroll through the content, which can be a problem for users who prefer to navigate through the website using the keyboard. It is essential to ensure that the sliders are accessible and can be navigated using a keyboard or assistive technology.
They do not convert
Sliders are designed to encourage a user to click them, which in turn should take them to a page relating to the sliders content.
The above research has shown that past the first slider you are very unlikely to have a visitor click your slider or even see it at all
Given they are most commonly used atop a homepage to convey important messages they become completely counter-intuitive.
They’re distracting
The human eye is trained to be distracted by movement (a left over relic from a time when movement might have meant life or death) and so they might be so distracted that they miss the actual message all together.
“Banner blindness”
We tend to ignore sliders these days because they rarely contain anything we want to look at so we skip past that bit even if they’re fighting for attention with all the movement.
Sometimes banners look like ads and eye-tracking studies have shown that people turn away from anything that looks like an ad. Read more about that study by Neilson Norman Group here.
They do not add weight or give focus
What you’re saying with a slider is basically: "I don’t know which product or picture I should put on display, so I’ll just show you a bunch".
By occupying the same space they do not give the user the ability to discern any form of "weighting" across the messages. Nor can they quickly make a decision or compare as they only occupy said space one at a time.
You really need to add focus. If you don’t know what to choose, how would your visitors?
Remember, when you highlight everything you emphasise nothing.They (can) kill your pages loading times
We know that not all sliders are created equal and some may perform, from a loading perspective, better than others. But a large majority rely on all on the images/content being loaded before the slider can function and the page is fully rendered.
So including large carousel images can slow your page significantly. This in-turn can negatively affect your SEO and the users experience.
They can be Illegible on mobile devices
It takes a lot of faffing (technical word) to get a slider looking nice on both desktop and mobile devices.
This usually involves recreating all the images specifically for smaller devices. Considering all the other points, it’s really not worth putting in the time and effort for this? And, they will potentially sap the website users’ data just loading them up if they’re not on WiFi.
Solutions to these issues
Despite all the issues raised, sliders are still popular among website owners. Mainly because they give you a very easy way to add content to a site with little web-design knowledge required. This is why they are still so often included in "themes" for other web-building systems.
We are gradually replacing sliders in all of our standard themes (at least those used at the top of the homepage) and instead urge you to consider some better alternatives.
One large call to action
If you have one main focus on your website, say you want them to buy something, then use that all important above-the-fold space on your homepage to instantly direct them to your shop.
- Slider Alternative - Call-to-action
A call to action group
Have more than one message? Perhaps you need to offer Buy Online but also direct to a contact page. Then use a group of call-to-actions to display all options in one go.
- Slider Alternative - Call-to-action Group
A call-to-action grid
Really this is another style of call-to-action group, but arranged in a grid. This gives you the ability to "weight" the different options presented.
- Slider Alternative - Call-to-action Grid
Static image or video
Another alternative to sliders is to use static images or videos. These can still be visually appealing, but they do not require any navigation, making them accessible and user-friendly.
- Slider Alternative - Static Image
In conclusion
Sliders may seem like an excellent way to present content on your website, but they can cause significant issues.
As a website owner, it is essential to consider these issues and choose an alternative that will provide a better user experience for all users.
By doing so, you can ensure that your website remains engaging but is also accessible and user-friendly for all visitors, regardless of their abilities or devices.