Against image sliders

Website image sliders: a long standing irritation has cankered into virulent dislike this year.

Before I seek to insert the knife let me acknowledge that this is a complex world, and there are sliders and there are sliders. I do see an occasional use for simple little slideshows where images fade in and out, perhaps with a caption: the kind of effect generated by excellent lightweight ResponsiveSlides.js plugin. That kind of thing can be helpful when screen space is limited and there are a number of images to show.

No, what I have in mind is things like this -

Apple home page

- or this:

BBC home page

I've chosen these examples because the designers at the BBC and Apple know what they are doing and have implemented complex sliders pretty much as well as it's possible to do. But they cannot evade the fundamental problems with sliders:

  • The essential information the user might be looking for isn't available at a glance through simply scrolling the page: it is embedded at an unknown depth within a slider with controls that have to be learnt.
  • The sliders add considerably to page weight. Each slide typically consists of one large or several small images. And all but the simplest sliders require complex JavaScript libraries to ensure basic functionality and cross-browser consistency. Time consuming to build and test.
  • They give rise to all kinds of accessibility issues that can be extremely time consuming for developers to address.

BBC and Apple will have thought about these issues and dedicated the considerable resources at their disposal to address them as best as possible. Unfortunately it is all too easy for developers who don't have those resources to implement sliders using off-the-shelf resources such as SlideDeck or LayerSlider:

SlideDeck example
LayerSlide example

These services can be hard for designers and their clients to resist because they seem to provide a cheap and easy way of adding spice to a home page, providing a plug-in-and-play slideshow overflowing with fancy transitions and flying captions. They can be integrated easily with popular content management systems making it relatively straightforward for clients to populate them with suitable images and text.

That siren call should be resisted. Fully featured sliders like these rely on extremely complex bandwidth-heavy code that is exceptionally difficult to implement across different browsing devices. I wonder how many developers using these services take the time to verify - through testing - that they do indeed work as claimed.

And I have concerns about giving non-technical clients control over the population of slider content. Slider images are typically large, spanning the full width of a screen, and need to be carefully optimised before upload. That's something that busy clients often don't take the time to do. And slider typography requires discipline: captions usually need to be carefully crafted to be of similar length from slide to slide. Again, not something non-experts can take the time to do with sufficient care.

The invisible washing machine

This post was prompted by a tweet I spotted earlier this week referencing a piece by the Nielsen Group, unambiguously titled Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility. It's a good little polemic backed with hard evidence, the most powerful I've yet read about the ills of image sliders.

The article references a usability test in which a user was set the task of finding out whether a well known manufacturer of domestic appliances was offering any special deals on washing machines. A simple task one might have thought given that the biggest item on the home page was a promotional feature in prime spot at the top of the page declaring a current offer of £100 off selected appliances, next to a large photo of a washing machine.

But the promo wasn't a static image: it was the first slide in an auto-rotating carousel which the user simply ignored because she thought the moving content signified an advert. In any case, she said, it moved too quickly and there wasn't enough time to read the content of each slide. So she skipped the slider altogether and spent several minutes scanning the rest of the page before concluding that the company wasn't offering any special offers at that time. Quite a sobering conclusion given that the offer was the very thing the company's home page was seeking to highlight.

The clear conclusion here is that if a website is going to have a slider it should, at the very least, be static, giving the user control over slide paging. And you better make sure that the essential information to be communicated appears in the first slide because it's unlikely the user will page through the others.

End it now

I'd like to see an end to home page sliders altogether, automated or otherwise. The web has been around for nearly 20 years now. Users know that web pages scroll. It makes more sense to present important information as a series of stacked design elements rather than tucking it away in a slider in an effort to conserve screen space. So rather than presenting information in this pattern -

Slider wireframe

- we might display it like this -

Standard layout

- or if we want each element to span the full width of the screen, like this -

Stacked page elements

I confess to hypocrisy. If you look at my portfolio you'll see that many of the websites I've developed over the past couple of years feature home page sliders. Where possible I have sought to make them very simple: just a series of cross fading images overlaid by a single semi-transparent caption that doesn't change. But there are a number of sites with the very type of slider that I'm arguing against here. Let's just say that any residual tolerance I might have had for them has evaporated over the past few months, and that sliders remain very popular with clients. I'm only prepared to argue up to a point before conceding that it's their website and their decision.

Further reading

I highly recommend reading the Nielsen Group post I've referenced. Here are a few other useful resources discussing the ills of sliders:

Categories: