You’re reading our thoughts on design, a publication about UI, UX and product management by +SixZero Design Agency.

Tweet
Share on Facebook
Share On LinkedIn
Email to your friend

Sliders are like fake tits.

Sliders totally suck and no one should ever use it. It’s like fake tits. It looks good from far but the experience is totally horrible. Just avoid it! There are hundreds of other ways to design your site without sliders and get way better conversion! 

That was my response to one of my clients who runs a legal firm who wanted a slider on his homepage.

” Why do you like sliders?,” I asked him.

“The transition animation looked cool.. I saw them in some of our competitor sites.”  He replied.

“Sure, it looks cool. But cool doesn’t mean it’ll make money for you,” I replied with discontentment.

Why Web Sliders Suck And 5 Ways To Fix Them 1 +SixZero

Why sliders are evil?

I think sliders are distracting. It’s a way to put extra crap on a page that’s typically not best for visitors. If it’s important in most cases you should just put it on the page without sliders or extra clicks.

Hiten Shah, Co-Founder of Crazyegg and KISSMetrics

Companies use sliders as a compromise between internal departments compared to making the tough decisions that need prioritisation of conversion goals. They merely represent an easy way to deal with internal inter-departmental bickering about who gets to put their banner front and centre on the homepage.

Lets start with some Malaysian(local) websites that use sliders. You will notice that they look good but kill conversion.

Digi’s Homepage (www.digi.com.my)

Why Web Sliders Suck And 5 Ways To Fix Them 2 +SixZero
First slider: new deals feature within their MyDigi app (This is a message from the partnership/business development unit)
Why Web Sliders Suck And 5 Ways To Fix Them 3 +SixZero
Second slider: Message by MyDigi product team to get their downloads up as it mentions the app with download links.
Why Web Sliders Suck And 5 Ways To Fix Them 4 +SixZero
Third slider: This is definitely by the sales team. We have to show the latest Apple iPhone! (Notice that the circle navigation in the slider is completely invisible here? So, if the users land on this slider, they won’t even know that it’s a slider.)

RHB Group’s Homepage (https://www.rhbgroup.com/)

Why Web Sliders Suck And 5 Ways To Fix Them 5 +SixZero
RHB have the worst slider I have seen in a long time cause they have a slider on slider! Notice the small box inside the hero slider? That’s sliders within sliders – sliderception? More like stupid.

Domino’s Homepage (www.dominos.com.my)

Why Web Sliders Suck And 5 Ways To Fix Them 6 +SixZero
Dominos slider is not bad as it shows pictures of nice looking pizza. The big problem here is that there’s no call to action.

Nope, this is not me throwing a hissy fit over an UI element that I don’t like.

Lets look at some reasons to why they are bad from UX and SEO perspective:

Sliders are bad for UX

  • Very few users interact with sliders. Often the sliders are so fast that people are not even able to finish reading them (even if they want to).
  • They look like adverts and causes banner blindness as users tend to skip ahead of them.
  • Sliders are bad for accessibility e.g. users with low literacy or international users. Sliders move fast and don’t get recognised by Google Translate. Now, what does it tell about you as a brand when you ignore your own users’ needs?

Sliders are toxic for SEO

  • Sliders and carousels actually slow down your site. (Slow sites are bad for SEO).
  • Homepage sliders push the rest of the page way down the page. (Pushing your content down will de-rank you in your organic search results).
  • Sliders don’t show well on mobile devices. Image sliders tend to load desktop site image which are not optimized for mobile speed. (Google de-ranks sites with non-responsive elements).

“Sliders please the owner of the site, but they deliver little to no value to the customers. The reason is that we are not going to sit there and wait for your ‘movie’ to play out. I’m also not a fan of sliders because for most businesses they provide an excuse not to think about personalization and being good at giving the customer the right answer, right away.

Avinash Kaushik, Digital Marketing Evangelist for Google, Author of Web Analytics 2.0 (Also available on Kindle)

Avoid sliders as much as possible. Use the reasons above to convince your clients to not use it.

If your clients are being stubborn about using sliders, use these steps.

1. Convince the client to not use hero sliders (sliders that expand across left to right of the homepage). Instead convince them to use a slider like this:

Why Web Sliders Suck And 5 Ways To Fix Them 7
Example of Slider UI Design that works. 

This type of sliders allow the users to read the words clearly (as its not on an image), with obvious call-to-action. It’s easy for Google bots to read them. On mobile screens, you can move the images to the top, followed by the headings, subheadings and action button with swipe gestures.

Note that with this design, you can use sliders to reduce the length of the homepage and clearly communicate the message within the sliders.

Note: You can download the above design here to edit with Adobe XD.

2. The sequence of the slides is important as the initial slides will get more exposure than later ones. Urge your client to prioritise. I tend to force them to decide to keep the sliders below three and to always use the most important one as the first one.

3. Stop the auto-rotation. Let users click the buttons or the arrow to see the next slides. This allows users to have the control. The slider is not going to switch to the next one while the user is reading or milliseconds before they click it.

4. Do keep in mind that on mobile users are using touch and they are not using mouse hover. Hence, your slider must be touch friendly – hence allow them to swipe. Reduce the size of your image to show on the mobile i.e. Create many sizes for the image. Use lazy load by loading some of the later slides in the background since many users will not get to them.

5. Introduce A/B testing to your site. This allows the clients to optimise their copy and artwork – instead of just compromising. Most of the time when I reach a situation where the departments can’t decide what should be the first slide, I suggest conducting a split test for 2 weeks. This puts the attention back on data and creative execution. Let the data decide instead of the egos in the room (or the loudest).

Tweet
Share on Facebook
Share On LinkedIn
Email to your friend

Since you’re here …

… we have a small favour to ask.

We don’t do any ads or promoted content to make sure we stay free from commercial bias and not influenced by any companies. Unlike many content sites, we haven’t put up a paywall – we want to keep our articles as widely available as we can. So you can see why we need to ask for your help.

If everyone who reads our articles, who likes it, helps to support it, our future would be much more secure. For as little as $1, you can support Dconstrct – and it only takes a minute. Thank you.

Sathyvelu Kunashegaran

Sathyvelu Kunashegaran

I don’t know 99.9% of things out there, but the 0.1% that I do know — I am world class at it. My current 1% is entrepreneurship, product design (UI,UX) and non-fiction books.

If you liked this article, you’ll probably like reading these articles too.

Like what you read, want more?

Subscribe to our weekly design newsletter.

We hate spam as much as you do, so we’ll never send you more emails than you want, and you can unsubscribe at any time.