The Slider of Sliders

How to Make Sliders Not Suck

If you haven’t heard, sliders (almost always) suck. As Brian Krogsgard talks about, there are many many reasons why sliders aren’t a good idea most of the time. But we, as designers, need to know where and when to use them so they don’t suck.

 

The Problem

It’s become the default layout. We have put them everywhere. We put them in our comps when we’re not really sure what else to do. We sell them to a client because we’re not sure what else will make them happy. Our clients come to us and say, “I saw this thing on this other site. Can you give me one of those?” For to long, we’ve used the slider to fill the gap. The problem is they aren’t providing value anymore. We’re not using them correctly.

Here’s three simple rules to follow when designing with sliders.

 

Sliders, Sliders everywhere but Not a Slide with Substance

As readers, we don’t search through a slider looking for important information. If’ we’re just browsing, we click a few times to see what’s there and then move on. If we’re hunting for something specific, we disregard the slider altogether.

When important information is needed, simple actions are taken. That won’t ever change. So that brings us to the first rule when designing with a slider. Don’t put vital information in a slider. 

When designing, I think to myself, if this page didn’t move, and there was no sliding, would it be complete? Would the viewer understand the purpose of this page? If not then there’s some vital information left out. Make sure it’s not buried in your slider. The worst thing I see a lot is burying your calls to action in your slider. People don’t want to use your slider like a navigation menu. If a section on your site is important enough to tease it on the home page, give it proper space.

This rule seems obvious but it’s worth stepping back and taking a look. If you think people are going to look through all your slides you’re wrong. Most won’t make it through the first 3.

 

Truly Illogical

When sliders are used to expand the content at the top of the page, they tend to be a mess. They have slides for featured services, recent news articles, top clients, company history, upcoming events, etc. All this information will exist within one slider and a reader won’t know what to expect next.

So rule number 2 is, one slider, one content type. This is why a slider works well in portfolio situations. All the information is the same. When they push that next button, they know the next thing will follow a certain format.

I think of it like each slide is iterating on a certain concept. Take for instance a travel website. A slider on the homepage could be full of different destinations with photos and captions about each place. Each one has the same types of information. They all follow the same format. It’s easy for the reader to browse through the slides thinking of all the places they could go. And it won’t matter if they see them all. The point was to inspire them.

 

Simple

There’s 1,000,001 plugins, scripts, snippets, git hubs, packets, extensions, widgets, add-ons, whatever out there all making it easier for you to add a slider to your site. But don’t be fooled, while the process might be simple to put it on there, adding sliders only adds complexity. So rule three is, keep it simple, stupid. Ok so I’m not the first person to use that line but stick with me.

This is more of a life lesson, but it’s important for sliders too. Don’t stack more than one slider on top of each other. Actually, just don’t have more than one on a page. Don’t use sliders that have more than 2 buttons. Don’t use a slider that has a transition more complicated than fade or slide left/right. In fact, don’t use sliders that move in more than one direction unless going back.

It’s simple. Don’t over complicate it.

 

I Don’t Want to See it Again

Stop it. We are the designers and we are the experts. Don’t default to putting a slider in all of your comps. Think about the most important elements and design with those. When talking to a client, don’t let them start throwing in useless elements into the design. Figure out what they aren’t happy with and fix it. The next time a client suggests a feature that looks cool, gain their trust by telling them the truth about sliders (read Brian Krogsgard’s article).

And don’t point that finger at me. Ok fine, time to come clean. I’ve broken these rules. All of them. Sometimes all three on one project. But that’s between me and my priest. I’ve stopped now.

For you, there’s no excuse anymore. You’ve read the article and your eyes have been opened. Now it’s your’s and my responsibility to bring back the good name of sliders before they go the way of the scrolling marquee.

 

Examples

So I started looking for examples of sliders that followed the rules, but disappointingly, gave up trying. I had a few I used as inspiration but they’re reverted back to sucking. So, I ask you. Have you seen any that exhibit these rules? Post them for the rest of us.

Comments

  1. Great post. The “one content type” is a really helpful rule-of-thumb, thanks!

  2. Sliders are one of those things that clients see and unfortunately thing are “necessary” for a homepage. It’s our job as designers to dissuade them if that’s not the case.

    • I so agree. I recently read a great book that basically said, it’s your job as the designer to lead the client in the right direction. It’s you’re fault if that doesn’t happen. The book goes into more detail but that’s the general message I got from it. Design is a Job by Mike Monteiro

    • Yes and yes. All that wowsliders and nivasliders with crazy transitions really blow my mind. But why almost every new client asks for it? – “It’s cool, I like it and I want it”… *facepalm*

  3. Thanks for pointing this out. I am also struggling with a slider on one of my sites. I am mostly concerned about performance. Loading and moving big images is a hassle. I have noticed that some bigger sites already skipped sliders and returned to a single simple image.

  4. Lately, I’ve tried to suggest a random static image on page load instead of a slider. It’s different everytime, but suffers on performance issues. It only suffers “Clients don’t think it’s flashy enough” syndrome.

  5. What do you think of the slider I use on the homepage of my wife’s blog ?
    Not vital, one content type, & simple, right ? http://dame-bio.fr/

    • I think a slider showing all delicious food photos with a link to the recipe is a home run. The Slider would be great if it didn’t have the random Magazine #X is online information in it. That piece of content doesn’t seem like it fits. Maybe it would be good to have a featured area in the sidebar that show the most recent issue of Yum magazine with a link to see the full issue.

      That’s how I would organize the content.

  6. maybe take a look on my super simple bracket_slider: https://github.com/ofcapl/bracket_slider (still in development – I want to add more options, but it works already)

  7. Really great article! I was starting to wonder myself if the whole “slider revolution” has been overplayed. I too am guilty of having broken those rules a time or so.

    While sliders might be the “hot” thing now… the web is always evolving. I can’t wait to see what comes up next!

    Kellie

Trackbacks

  1. [...] One of the commenters, Andy Searless, took his cue and wrote a follow up post titled “How to Make Sliders Not Suck“. [...]

  2. [...] How to Make Sliders Not Suck  il faut bien l’avouer, les sliders ne sont pas forcement la meilleur solution en terme de design, cet article plein de bon sens propose des conseils pour les utiliser à bon escient [...]

  3. [...] How to make sliders not suck [...]

  4. [...] How to make sliders no suck [...]

  5. [...] How to Make Sliders Not Suck – If you haven’t heard, sliders (almost always) suck. There are many many reasons why sliders aren’t a good idea most of the time. But we, as designers, need to know where and when to use them so they don’t suck. [...]

  6. […] Searles dans son article How to make sliders not suck (Comment rendre un slider intéressant), tient aussi un discours très proche […]

Leave a Reply

My name's Andrew. I like to make things. Better yet, design things. At the moment it’s websites for a company called Infomedia. I also take on a few freelance clients when I have a chance. WordPress is my main tool at the moment. These are all the places you’ll find me on the web.