Skip to Main Content

Reconsidering the Slider

A slider1 is a method for displaying lots of information in a small space on a web page. Here’s what I think of them:

  • They’re overused.
  • I still use them.

The pros and cons of using sliders are important to understand for anyone building or maintaining a website. In this post, I’ll walk through the common problems with using sliders and how to do so successfully.

What is a slider?

Sliders come in many shapes and sizes, but they share some or all of these characteristics:

  • They use a “slideshow”-like format with a series of “slides.”
  • They contain a mixture of media including images, text, buttons, video, and audio.
  • They normally have at least some controls such as pause/play, forward/backward, and individual-slide navigation.
  • They use some type of visually pleasing transition between slides such as a fade-out or sliding animation (hence the name, “slider”).
  • They are normally found on home pages.

Sliders and slideshows look like this:

Sliders Don’t Measurably Engage

My opinion of sliders came together after reading the to-the-point “Do Slideshows Work?” post from the fine folks over at Beaconfire. They produced this fantastic graph with data from four clients sites:

Click rate per slide for seven sliders

Click Rate per Slide on four websites for the first seven slider slides. Credit: “Do slideshows work?”, BeaconFire, Jan. 19, 2011, http://www.beaconfire.com/blog/2011/01/do-slideshows-work/.

The graph shows the percentage of website visitors who clicked on a link in each slide of a slider. Take a look at left axis labeled “click rate.” The first slide barely tops 1% engagement in the very best case. Most sites don’t even top .5%. (That’s 1 out of every 200 visitors!) For each additional slide in a slider, the engagement is usually half of the already-small previous slide’s percentage. It’s a glum chart.

This data, even with its small sample size, makes a compelling case that sliders don’t reach most visitors if your goal is to get them to click on a button or link in a slide. With the average internet user viewing a website for mere seconds, they may never even see the important button on slide three, much less click it.

The Easy Way Out

People often view sliders as a way to put all of their most important content in the most prominent part of their site: the top left corner of the home page. This is a little like putting all your favorite art on the most-prominent part of your wall.

The tough decisions about what information is most important, how to draw people’s eyes through a design, and how best to communicate a message are ignored. So using a slider is an easy decision when politics and feelings are involved, but it’s not very effective for engaging website visitors.

Accessibility Downsides

Many implementations of sliders use a large image to create each slide. These images, with no selectable text, are inaccessible to anyone with impaired-vision.2 These techniques often affect Google as well. If Google can’t read the big bold text on your home page, reconsider the technique you’re using.

Another common accessibility problem comes from sliders that play automatically and do not have a stop button. This creates a distraction, and, in the case of people struggling with attention problems such as ADHD, this can make it almost impossible for them to read your site.

In another problem with slider controls, sliders without forward and back buttons may advance a slide that people were actively engaged with and give them no way to get back.

To use the principles of universal design, these issues may cause worse problems for people with certain different abilities, but by fixing the problems altogether, everyone on your site gets a better experience.

The Caveat: Why I Still Use Sliders

Having said all of this, there is still one time when I think sliders are appropriate: storytelling. Just like a video or a PowerPoint presentation, it may be the case that you have highly-visual, ordered information that forms a cohesive piece of content.3 An example of this is MmofraGhana.org, a site I built for an NGO in Accra, Ghana.

A screenshot of the slideshow on the Mmofra Foundation home page.

This slider for the Mmofra Foundation tells the story of what their organization does.

For the Mmofra Foundation’s site, we used an accessible slider to tell the story of their organization. This slider pairs a sentence about the organization with a strong image to illustrate the text. We were also careful to put an engaging and welcoming image as the first slide, so users who don’t engage with the slider still benefit from it.

Any of the images or statements in the slider would be less meaningful when standing alone, but when ordered and combined into a cohesive presentation, visitors get one option for engaging with and learn about Mmofra Foundation.

Pause. Rewind. Forward.

So to review and conclude:

  • Sliders are slideshow-like interfaces on websites.
  • Visitors rarely click on links embedded in sliders.
  • Sliders often are an easy way around the hard decisions about allocating space on a home page to different webpages/people/ideas.
  • Sliders are rife with accessibility problems.
  • Sliders still have a place when used responsibly to present a unified set of graphics and text.

If there is information that someone must know about your organization, a slider is probably the wrong place to put it. But if you can create an engaging slider that tells the story of your organization, you might be on to something.

Talk Back

Got a great slider to share? Think I overlooked a good use of sliders? I want to hear from you!

Footnotes

  1. “Sliders” are sometimes called “carousels” because they carry their contents ’round and ’round, but for this article, “slider” is shorter and more fun to say. [Back to spot ↩]
  2. This can be partly avoided by providing “Alternative Text” with the “alt” attribute on each images, but even then, certain common techniques of hiding text and images make them inaccessible to screen readers. [Back to spot ↩]
  3. When thought of this way, you might think of sliders as a cheap alternative to a video. [Back to spot ↩]

7 Responses

  1. Great article, that confirms my intuitions about the lack of efficiency of sliders, regarding user engagement. I also consider it a sign of a difficulty to make content priorities choices, which should ring a bell about the decision process in the project.
    On the accessibility front, an additional problem is that, too often, keyboard users are neglected. Sliders are not standard elements of HTML, so sliders designers have to cope with existing HTML, CSS and javascript code, creatively combining them to simulate this slideshow effect. Unfortunately, not all of them consider alternative uses, such as tabbing through the slides via the Tab key. Depending on the way it’s done, sometimes you can’t get focus on any element; and other times you do get focus, but on elements inside a given slide, like anchor links, and that can break the display in some situations, making it unusable.
    Another common issue is not having an adequate fallback when javascript is not supported. Whereas it’s pretty simple to achieve, as long as the slider has been built on appropriate HTML, that for instance shows all the slides as a list, by default.

    • Thanks for sharing your thoughts, Olivier,

      Your point about keyboard accessibility is really good. It’s an interesting issue considering that well-formed HTML still probably doesn’t completely take care of this issue (although it certainly gets you closer).

      Do you have any slider scripts you know of that are particularly good for keyboard accessibility? I’ve never found an accessible slider that I’m 100% happy with.

      • Thank you Mark, glad I could help!
        To find resources I’ve googled with the term “slider”, and discovered it’s a bit of a misnomer actually. Slider is generally used for another kind of UI component, something that I’d have called a cursor in other times and places. “Carousel” seems to be more relevant for a google search.I don’t know if this one would qualify as 100% satisfying for you, but the one in Yahoo UI is pretty close to it: http://j.mp/tr4lmG. Yahoo has put a lot of effort in making their library accessible by design. Here we have a two-stop navigation pattern. However, there’s still a display bug when you tab inside a slide and then onto the following or previous one. In some cases they are slightly shifted, masking a part of the text. The user has a way to work this around by using the control buttons on top.The Paciello Group has done a wealth of research around jQuery UI (and other libraries: http://j.mp/tRC6g1). Hans Hillen from the TPG maintains a demo suite on GitHub, that comprises a neat slider, though simpler, with advanced keyboard support: http://j.mp/rS6Gkv.Additionally, Everett Zufelt has done extensive accessibility tests on JQuery UI: http://j.mp/u2yzrT. Either the carousel hasn’t been tested yet, or there’s nothing wrong about it discovered so far, on the a11y front anyway.Come back to me if these still don’t work for you, I’m interested anyway in finding better solutions.

  2. Ian Dunn says:

    Looks like your “slider slider” is broken.

Collaboration