Ah, yes . . . the age-old question: should you or should you not use a homepage slider? While sliders (or “carousels”) are commonplace around the Internet their effectiveness is highly questionable.
For example, we replaced a homepage slider for one of our clients with a product checkout section and saw a 35.9% increase in conversions. (See this video for details.)
In this article, we’ll shed more light on the debate over whether or not to use a homepage slider on your store’s website.
The Experts Weigh In
If you Google “homepage sliders,” you’re sure to get more than your fair share of thoughts and feelings about them, mine included. But what do the experts that deal with this on a day-to-day basis have to say about the subject?
Lee Duddell, Founder and UX Director at WhatUsersDo, a London-based remote usability testing firm had this to say after spending hours observing thousands of tests on the issue.
“Carousels are effective at being able to tell people in marketing/senior management that their latest idea is now on the home page. They are next to useless for users and often “skipped” because they look like advertisements. Hence they are a good technique for getting useless information on a home page. In summary, use them to put content that users will ignore on your home page. Or, if you prefer, don’t use them. Ever.”
Pretty harsh words!
Accessibility Expert and WebAIM associate director Jared Smith said this:
“Carousels pose accessibility issues for keyboard and screen reader users that simply cannot be adequately addressed by markup or hacks. Carousels are this decade’s <blink> tag.”
I’m sure we’ve all tried to block blink tags from our memories by now.
Craig Kistler, Founder of the conversion rate optimization firm Strategy & Design, has more than 15 years experience observing usability tests and has plenty of experience analyzing home page sliders. He said:
“The chances that the information being displayed in the carousel matching what the visitor is looking for is very slim. So in that case the carousel becomes a very large banner that gets ignored. In test after test the first thing the visitor did when coming to a page with a large carousel is scroll right past it.”
Where’s the Beef? Or, in Our Case, Data.
So far, these quotes are just thoughts and opinions. Usability doesn’t necessarily equal bottom-line numbers. Where are the facts to back them up?
One study from Notre Dame analyzed how often visitors interact with sliders. They measured the number of times the feature (i.e. slider) was switched by users, total features clicked, and total clicks per position. Their findings showed that of the four sites featuring sliders, only 1% of visitors clicked a feature. Of those, 89% were in the first position!
This study was backed up by Paul Kelly, Web Content and Design Officer at the University of York. Kelly’s team showed a breakdown of clicks per slide, showing the first slide gets the most attention by far. He also found that if an auto-rotating slider was being used, having a pause/resume button had little no effect on clicks, suggesting that the majority of users ignored anything past the first slide.
But click through rates aren’t the only problem facing homepage sliders, as Harrison Jones of the digital marketing firm MWI found out. After evaluating 18 different websites with homepage sliders from across several industries, he found several recurring SEO issues caused by these sliders.
The implications of this means your homepage slider is actually making it harder for customers to find your website! On top of that, some of the websites he analyzed used full-width sliders packed with high-resolution images, slowing down the load time for the web page. A slow loading webpage = customer abandonment.
Those are some compelling facts on what it’s like to have a slider on your page, but what happens when you take away the homepage slider? Lucky for us, Blair Keen, Adobe’s Optimization Manager, tested just that. He analyzed the effects of removing the slider entirely and raising the content that was below it up.
When the two were compared, the version without the slider resulted in a 23% increase in sales. The reason was that it reduced distraction, while increasing the visibility and clarity of content.
Why Homepage Sliders Don’t Work
That was a lot of information and data to take in. So let’s step back and review the reasons why homepage sliders don’t work.
Homepage sliders often look like advertisements. They’re similar in size and shape and when combined with the fact that most sliders auto-rotate, they mimic animated advertisements. This results in “banner blindness,” meaning that even moderately skilled web users will tune out the content due to its similarities to ads.
Another problem that you run into with homepage sliders is navigation issues. Either the sliders move too fast to fully comprehend, or not fast enough for people to wait around to watch the next slide. Often times, to get around this issue, arrows or markers are used to show the slide order, but are so subtle they’re missed.
The largest problem that sliders have to overcome is the fact that more and more people are using their phones to browse and shop online, and sliders aren’t mobile friendly. Slider images get shrunk down, rendering your message virtually non-existent. Add to that the extra load time mentioned earlier by Harrison Jones and the strain it puts on mobile devices is a sure turn-off.
Solutions
So what, you might be asking, can you use on your webpage besides a homepage slider?
HOW WE TRIPLED ECOMMERCE REVENUE IN 18 MONTHS
By capitalizing on conversion-centric email marketing, social media, online giveaways, and abandoned cart emails, we significantly increased brand loyalty, awareness, and most importantly—eCommerce sales.
Well, if you must use a homepage slider on your website, be smart and learn from others’ mistakes by following these key rules:
- Clearly direct users to more content with an overhang, set of arrows, scrollbars, or gestural hints.
- Make sure your highest-performing/most important slide is placed in the first position.
- Make the duration of each slide long enough for slow readers to be able to read and comprehend. The Baymard Institute recommends 5-7 seconds for simple slides, and up to 10 seconds for text-heavy slides.
- Use a soft, fade-in transition. This helps the slider look less like an animated ad. Optimize images for load time.
- Use the slider to tell a story or build a cohesive concept.
- Bonus points if you include swipe capabilities for mobile.
Another great option is to do what Tyler said in our video and replace the slider with a checkout instead.
My top recommendation is to replace the homepage slider with a targeted static banner that changes based on the visitor’s website activity. For example, a new visitor lands on your page, they are greeted with a generic piece of content. However, the next time they return to your site, the behavioral profile of the visitor’s cookies will display products or offers that relate to them. Here’s an example:
In the end, the “answer” to what works best is in your hands. Chances are, if you’re reading this, you’re already using a slider on your website or are thinking of using one. The key is to establish objectives and test them. Everyone’s site is different, and so are the audiences you’re trying to attract. Find out what works and what doesn’t, and please share your experience with all of us here! Of course, if you need help redesigning your website or are ready for an upgrade, we’re here to help!
