A slider (( “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.)) 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:
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.
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. ((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.)) 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. ((When thought of this way, you might think of sliders as a cheap alternative to a video.)) An example of this is MmofraGhana.org, a site I built for an NGO in Accra, Ghana.
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.
Got a great slider to share? Think I overlooked a good use of sliders? I want to hear from you!