I’m sure you’re fairly familiar with content sliders. In short, it’s those things that clients always want on their sites to make them more “dynamic” and “alive.”
And sure, to some extend they do that. After all, sliders introduce movement, and movement means life. But are sliders actually any good? Should we use them on the sites we’re building just because clients ask us to? Should we use it on our own sites? Or maybe they’re just landfill.
Well, let’s find out.
Here are some of the downsides of sliders that you should keep in mind when building your next design.
Sliders and site speed
Sliders make your site load slower. Most of them rely on jQuery or other scripts. And even though jQuery is an extraordinary thing, we have to remember that it’s still code that’s additional, and it will take additional time to load.
Also, the problem with some sliders is that they load all the images (or other information) on the initial page load. So if your slider is 1000px by 600px, and you have four images in the rotation, you are loading four huge images on that one page load.
Unless that slider content is more valuable than gold, that’s a lot of wasted load time. And what happens when your page takes a long time to load? People leave before looking at anything, much less your slider.
Sliders and click through rate
First off, only 1% of visitors actually click on a slide. As it turns out, sliders are just fancy displays, but they don’t even do that job well.
What’s more interesting, people simply ignore sliders because they trigger banner blindness.
Think about how you use the web. Do you load a web page, and watch a slider scroll all the way through every item, and wait to click on the thing you like best? No. Most people want to be able to find what they’re looking for instantly. Using a slider is just more work. You either have to wait for what you’re looking for to show up and then click through to a destination URL, or you have to click through the slider to find what you’re looking for.
Sliders and the fold
The fold is an idea from print media. Basically content higher up the page gets more attention. Frankly, that’s not how it works on the web. Studies show that most users will scroll around.
Additionally, with sliders, users won’t see any real actionable content at first, so it usually makes them bounce.
Sliders and focus
Sliders are full of distractions – huge box shadows, crazy blocks that flip all over the page on rotation, and etc. Most of the time they just distract users from other, more actionable content.
Also, sliders tend to be just the easy way out. They’re like saying, “I don’t really know what to show here, so I’ll throw all of it into a slider” – which is never good.
“Okay” – says you – “But what should I use instead of sliders?”
Here are some possibilities:
Alternative #1 – Use a clever background slider
Let’s get straight to an example. Check out what’s going on on Wix’s homepage. In the center part, there’s only some good and short copy and a Start Now button. The text remains stationary at all times. However, the background slides around getting some additional user attention.
The page presents a minimal healthy amount of information, just enough to introduce the reader to the product and convince them to join the site.
Alternative #2 – Use a call-to-action with a static image
An awesome call-to-action (CTA) can do a lot more for your conversion rates than a slider. Additionally, a static image can help to get some more eyeballs, especially if it’s visually appealing. Overall, the combination can make an awesome homepage.
A great example of this can be found at teslamotors.com. They use an image of their Model S driving down the street with a couple of simple calls-to-action: “Order” and “Test Drive.”
Alternative #3 – Use a sign up form
Sign up forms are a great way to replace sliders on your homepage if one of the goals for the site is to get leads of some sort. In such a case, it’s best to put your sign up form right there on the top of the homepage, eliminating the need of a slider.
You don’t need to go far for an example. There’s one here on our blog homepage. The first thing you see is a sign up form for our newsletter, plus a nice interactive animation adds aesthetics to the page.
Alternative #4 – Use a video
You may say, “Wait a second! I thought the problem with sliders was that they moved! In that case, what’s the difference between sliders and videos?” Well, the fact is that unlike sliders, videos just convert really well. It may be that they give the user more control than sliders. But more importantly, videos focus the visitor’s attention on just one thing. They display just one story, while sliders are a jumble of many stories.
An awesome example of this can be found at VOTD.tv. VOTD puts the video right there in the center of the age, so it’s hard to miss. Everything’s simple, not that much text, so the video is the main focus. It looks attractive and puts their highlight right there for the user, so they don’t have to do a lot of work.
What if you still want to use sliders…
Really? After all this you’re still all for sliders? Well okay. Here’s the how-to:
- Sliders need substance. As explained before, users don’t use sliders to find important information. That won’t ever change. So here’s the first rule when designing a slider: Don’t put vital information in it, unless it’s on the very first slide. Don’t bury calls to action in your slider. People don’t want to use your slider as a navigation menu. If a section on your site is important enough to tease it on the homepage, give it proper space.
- Keep it consistent. When using a slider, remember, one slider, one content type. This is why sliders work well for portfolios. All the information is the same. You don’t want to show various different types of information all in one slider. The visitor simply wouldn’t be able to predict what they can find on the subsequent slides.
- Keep it simple. Don’t use more than one slider on one page. Don’t use sliders that have more than two buttons. Don’t use complicated transitions. Basically, don’t over-complicate things.
As you’ve seen, most of the time, sliders don’t work well. With some dedication, you can make them work a little better, but you’d probably be better off just using an alternative.
We’d love to hear if you guys have any other creative ideas on how to use sliders in a way that works, or awesome alternatives for sliders. Please leave them in the comments below.