Should I Use Sliders on My Website?

Like a bad dream, they came out of nowhere—Carousels, aka website sliders, suddenly took over the internet and have become one of the most overused and least useful features that marketing teams and customers think their website must have. And on the surface, they do sound like a pretty good idea, right? They let you feature some of your best content without giving up too much screen real estate. Everyone wants everything above the fold still. (Side note: above the fold is a myth.) So if these website sliders are great at showing off content without wasting much space, why are they so bad?

No One Sees or Uses Sliders

The most important reason to avoid a slider is that your users will skip right over them and even when they do see them, only about 1% of users will actually interact with any slide beyond the first one. That’s right. Almost all your users will only ever see the first slide. I personally think this is because they remind users of ads and users have become notoriously ad blind.

So instead of saving space, they are taking up space and adding bloat to a page for a feature no one really uses. To quote Nielsen Norman Group, “Whether looking at content on a 30-inch or 3-inch display, people often immediately scroll past these large images and miss all of the content within them, or at least the content that’s in any frame other than the first.”

And this is my number one reason for suggesting a hero block (large image with a clear call to action) instead. Less than 1% of users interact with sliders; so should you really bother with these? There are some specific cases where they might work but for the vast majority of sites, ask yourself, “Should I use a Carousel?” (Spoiler alert: the answer is no!)

Performance

Even with the most well behaving plugin, sliders add extra requirements to your page. Every image and bit of text is loaded into the page and on top of that requires code (JavaScript) in order to have the next/previous functionality, motion effects, etc. These JavaScript libraries can sometimes add quite a bit of load time to your site. That’s on top of the images themselves. With multiple sliders this can add up rather quickly. And if users don’t really use sliders then why add all this extra code? Is it worth it? Most of the time the answer is no. We’ll talk about an alternative a little later in this article.

Accessibility

To add insult to injury, sliders are a nightmare for those with disabilities that require screen readers or other alternative methods of using your website. Sliders quite often don’t pass usability standards and with them getting so little use from regular users why make it even harder for people with disabilities to enjoy your website as well? If you aren’t thinking about accessibility on your website, you should consider giving that some attention. It’s the law in many places that your site be accessible; it’s an investment in your own business or site. And, it’s not that much work. Everybody wins.

Sliders Are Confusing

As popular as sliders have become they still confuse users. Do I have to press play? Can I pause it? When I click into one of the slides and then go back, will it start over (usually yes)? This is not the kind of thing you want your visitors thinking about. You want to get them to your great content or products with as few clicks as possible. Every second a user has to think about something, they’ll also consider leaving the site for one that’s easier to find what they are looking for. This can increase your bounce rate and hurt your conversion.

Mobile Users

It’s 2019 and mobile is the dominant way in which most users view your site. You should already be thinking about “mobile first” when you make decisions about your site but even more so with things with complicated and/or small navigation elements. Sliders can be quite a pain to interact with on mobile and you also want to think about the size of the page a user has to download. Not everyone has high speed data on their phones or unlimited data plans. It’s worth thinking about your audience carefully and decide just how many images, videos, etc. that you want to use on a page. Then, multiply that by every slide you add, plus the code that powers the slider. And remember, 1% of people are going to see this nice slider you’ve spent money and time on, and you are now forcing them to download just so they can skip it.

What’s the Alternative? Hero Block to the Rescue!

Okay, I’ve just spent the entire article smack talking about sliders. Are they really all that bad? Most of the time, yes. There are a few cases where they can make sense though. For example, on a gallery page where a user would expect to browse through images, sliders are nearly perfect for that. But for your Home page where you are trying to grab a users attention, you might want to use the Hero Block.

The Hero Block serves a similar purpose as sliders. They use a large image with some text overlay and a clear call to action. And you aren’t limited to just one. One of my personal favorite ways to use them is to have them randomize on page load so your visitors see a different one each time the page is refreshed. These should still be used with thought and care as users associate them with ads and as such they may be skipped or ignored. But they look great and are user friendly. With just a little bit of care when creating them they are also easy to make usable for visitors with impairments.

You can use just about any kind of content in a Hero Block as well, like videos, animations, text, gifs, charts, etc. In short, Hero Blocks have the strengths of sliders with none of their weaknesses so you should definitely consider these versatile blocks for your own site. You can check out some great examples here.

If you have a slider on your site and would like to switch over to a Hero Block, we’d love to chat with you about your site. Contact us today.