Please rethink Sliders in 2023

    1. 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.

    1. 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.

      • Sliders In 2023

    The data and sources

    1. 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
      • ND.edu Carousel Click through rates
    1. 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:

    1. 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!


    1. So what are the issues with Sliders?

    2. 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.

    3. 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.

    4. 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. 

    5. “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.

    6. 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.

    7. 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.

    8. 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. 


    1. 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.

    1. 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
      • Slider Alternative - Call-to-action
    2. 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
      • Slider Alternative - Call-to-action Group
    3. 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
      • Slider Alternative - Call-to-action Grid
    4. 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
      • Slider Alternative - Static Image

    1. 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.