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.