Sliders, or as I like to call them, interactable ghost towns, are common in websites, especially ones built with WordPress because there so easy to add. But if they’re so modern and common, they have to be a good thing right?
Well, to get to the point, sliders are shit and you shouldn’t be using them and for multiple reasons.
But first, why are people using them? What are they good for?
Why sliders are good in web design
I’ve come up with 2 encapsulating reasons why people would want to use a slider:
The first encapsulating reason why people would want to use sliders and carousels on their website is they either don’t know the User Experience flaws or that they seem to follow a belief that UI is more important than UX, or in other words, inexperienced people put sliders on their website because they look pretty, which sure enough they can be if done correctly.
Another reason I think people use sliders is that people feel scrolling is scary, so they fit their website’s content into a slider to take up less space.
Which of course is ironic because sliders sort of fundamentally operate on scrolling which is the very thing you’re trying to reduce.
I think these 2 reasons encapsulate most of the reasons why anyone would want to use a slider.
For example, someone’s reason for using a slider (According to beaconfire-red.com/) [0] could be to “Promote important content and announcements” – well that’s just trying to save on space.
Or “Show off compelling, mission-related visuals” and “Establish a personality or aesthetic for the site” – that’s trying to make your website prettier.
Why sliders are bad in web design
First, let’s talk about the theory about why sliders aren’t good and then later explore the stats behind sliders that prove they make for bad web design.
As pretty as they are, sliders hurt more than they help a website, And it would be my absolute pleasure to tell you why. I don’t know if you can tell, but I fucking hate sliders.
The first reason why sliders are bad is that you cant count on someone to scroll through or interact with your slider, people just don’t do it (which we’ll back up later).
You have to remember, that time is precious when people are on a website. Visitors bounce off websites at a high rate [1], they usually skim over text instead of reading all of it [2], and the first 10 seconds are critical to if they’re going to stay or not [3].
And so, when you put your content into a slider – that’s a barrier to entry. That’s you, making it harder and more time-consuming for a user to get at the content of your website.
The next reason is that sliders are the spawn of satan, is that people often have something called “banner blindness”, especially the image sliders.
With banner blindness, because people are so used to seeing ads and large banners on websites, users ignore and scroll past them. So if your slider looks roughly like a banner, there’s a good chance people are unconsciously scrolling right past.
Next, sliders often take control away from users. Not only people use sliders to make their websites worse, but they take this further by making them autoplaying.
The problem with autoplaying sliders is that they’re very annoying. If web design was around in the 15th century, autoplaying sliders would be the 8th deadly sin just like center-aligned text.
Users should have complete control of the website. Nothing should be moving around or changing. Websites aren’t a slideshow presentation so stop treating it like one.
Another reason why sliders suck more than vacuums is that they tend to slow down websites, particularly WordPress websites. With WordPress websites, it’s so easy to add in sliders with the click of a button with plugins.
2 plugins in particular, Slider revolution and Smart Slider 3 have big negative impacts on the speed of your website:
- I ran a test on a WordPress website and ran a Google speed audit of the before and after speed score of having and not having slider revolution activated. After having Slider Revolution activated, the audit score jumped 10 points and increased the speed index by 1.7 seconds.
- With smart slider activating it had no impact, but when you put a slider on the page it impacted the audit score by 20 on mobile and 3 on desktop and increased the speed index by 1.4 seconds.
So those are 2 good and 4 bad reasons to a slider, but what’s the data behind it?
The data behind sliders
I have 7 studies to backup how just ineffective sliders really are. I will talk about 3 of them but all 7 will be referenced [7].
The first study was by Erik Runyon at Notre Dame University. This test was to measure the distribution of clicks of the different slides in a slider. It showed that the first slide had the overwhelming majority of the clicks and conversions. He reviewed 5 sites; the first site had 84% of the clicks with slide 1 and the other slides having around 4% of the clicks. His other 4 sites showed that 48%-62% of the total clicks in the sliders were from the first slide, and the rest of the clicks evenly distributing among the rest of the other slides. [4]
The second study was by Conversionista, a Conversion Rate Optimization firm in Sweden. This test was to measure the difference in clicks for an image carousel vs a static image. They ran heat map testing that used eye-tracking technology and also measured clicks for each kind of slider. The results showed that users “seemed to avoid the slider and did not click on it.”, which was most likely due to banner blindness. It also showed that the static image was clicked 40% of the time, while the image slider was clicked only 2% of the time. [5]
The last study I will mention is by Blair Keen, an Adobe Optimization Manager. His study was to show the difference in conversions between having a slider and not having one at all. He found that when he removed the slider that was placed above the fold, that it leads to an increase of 23% in sales. [6]
So what’s this all mean?
It means 3 things:
- When it comes to sliders, the first slide will always out-perform the other slides. The other slides usually have around an equal CTR.
- Static images will always out-perform sliders. And sliders are sometimes seen as banners, which may cause banner blindness.
- Even just having the slider on your website in the above the fold section decreases conversions and sales. Though you can predict the same effect if placed anywhere else on the website.
How to make a slider more effective
But there’s good news! I can show you step by step on how to make a slider more effective:
- First, you should make sure it doesn’t autoplay. Because autoplaying takes control away from users and it’s really frustrating.
- Next, remove all the slides but the first one. There’s no point in having any more than one because people aren’t going to look at them.
- Then, you’ll want to remove the navigation arrows, we only have one slide so we won’t need those.
- Lastly, just remove the navigation bullets.
In conclusion, sliders shouldn’t be used. The only time they should be used is for product images on a product page. Other than that, sliders statistically don’t get interacted with. Not many people care enough to spend time clicking through your pretty PowerPoint presentation. If the design of your website requires you to use a slider then your design has failed.
Deactivate your 18 slider plugins, unlink your owl.js file, and STOP USING SLIDERS.
References
[0] https://beaconfire-red.com/insights/do-slideshows-work[1] https://cxl.com/guides/bounce-rate/benchmarks/
[2] https://www.nngroup.com/articles/how-users-read-on-the-web/
[3] https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/
[4] https://www.nngroup.com/articles/banner-blindness-old-and-new-findings/
[5] https://erikrunyon.com/2013/01/carousel-interaction-stats/
[6] https://angner.com/blog/will-front-page-carousels-improve-your-conversion-rate/
[7] https://econsultancy.com/three-ideas-that-convert-better-than-a-standard-carousel/
[8] https://www.orbitmedia.com/blog/rotating-sliders-hurt-website/
