Dangers and problems when using sliders and carousels

I recently came across an interesting article (well, again) that described how sliders and carousels are nice to look at, but can still be a conversion killer. Sliders and carousels were dismissed here as a fad that needs to be questioned. Read the article: Don't Use Automatic Image Sliders or Carousels, Ignore the Fad

Since I'm not a big fan of sliders, carousels and other things that move around on websites, I'd like to take the article as an opportunity to look a little more closely at these advertising tools.

Sliders and carousels - they're everywhere... aren't they? #

Sliders and carousels are all the rage right now, and even large shopping sites are using these elements as advertising tools.

Examples include Baur, Bon Prix, Zalando and Mirapodo. The popular framework for responsive Websites Foundation also comes with a slider. Bootstrap is no exception here - I simply don't want to list them all.

However, other large sites such as Asos, H&M, Otto and Tchibo rely on static graphics. Even Amazon uses moving elements only very sparingly.

Are there any good reasons for the decision not to use sliders and carousels?

Obviously, opinions differ somewhat here, so let's just approach the topic analytically!

The advantages #

First, let's take a look at the advantages.

Obviously, you can fit a lot of content into a small space with the help of a slider. In this case, sliders are also often used as an argument for doing without various graphics and replacing them with a large slider. "If we play the content one after the other, we get an area for beautiful, large images!"

If we animate the slider, the page also looks extremely modern. At this point, the argument "movement generates attention" is often used. However, this only works to a limited extent - but we will come to that in a moment.

The drawbacks #

Now we come to the disadvantages of the sliders. Strictly speaking, the advantages of the sliders are also the biggest criticism of this element!

Several contents can be placed in one area, but in the end the contents are also hidden. The customer may only see a fraction of the content.

For this reason, sliders are often animated. At first, this sounds very good, but it has a decisive disadvantage: the slider can attract too much attention! This can go so far that customers no longer engage with the rest of the page. Of course, this also has the effect that the slider distracts or disturbs the customer - Let's put it simple, they are annoying!

Let me explain that briefly:

According to Susan M. Weinschenk, there are two types of vision. Central vision and peripheral vision. Through central vision, people catch things directly in the eye - they focus on something specific. Peripheral vision, on the other hand, takes place in the peripheral areas of the field of vision. It has been used since time immemorial to detect danger. If we perceive a movement in the edge of our field of vision, we can't help but focus on it, because it could represent a danger. We are then disturbed in our current action. This can be very annoying for users and becomes noticeable as follows:

The user has passed the slider and found it uninteresting. He now engages with the content elsewhere on the website. The slider is now in the user's peripheral field of vision and keeps drawing attention to itself through animation. This can be perceived as extremely annoying.

Between us: do you want to be disturbed in your concentration by an element on a website? Certainly not!

The issues #

Sliders and carousels can also cause problems. Let's go through these at this point as well:

Sliders and carousels currently (still) require Javascript. You may have to develop a fallback here if the Javascript fails - for whatever reason. A good fallback could be a div that has a scrollbar on the horizontal axis.

Several large images in a slider quickly lead to higher data volume, which can lead to longer loading times. Especially in the mobile sector, this can be very annoying! The customer should be able to work with the website as quickly as possible. So you definitely want to add loading="lazy" to your images.

The animations can also cause problems, because I have often seen that the phases in which the content of a slider is shown were far too short. In the worst case, the slider lacks controls, forcing the client to watch the entire run-through of a slider. The navigation of a slider or carousel is often displayed much too small in favour of the graphics - in this case, the operation of a slider is very tiring.

You would like to use sliders anyways? #

Then please note the following.

As you can see, there is a lot to consider when using a slider. Some points speak against a slider. However, if you still want to use sliders or a carousel on your website, please note or consider the following points:

• Several contents can be combined in one area in a slider. This means that content can easily be overlooked. Also, the customer does not know the content in the slider and does not wait until all have been shown! Prioritise the content. The first content should be your most important argument. Tell the customer the content of the slider from the beginning! Click areas or small banners, in which you briefly discuss the content, next to or below the slider would be a possibility!
• Sliders attract attention. Unfortunately, they may attract too much attention, so that they can be distracting! Don't let sliders play automatically and make sure the controls are understandable and appropriately sized. Give the user control over the slider!
• Sliders are (still) dependent on Javascript! Provide a fallback in case your Javascript does not work or the customer accesses your website without Javascript. Also avoid Flash! Flash and large amounts of Javascript can slow down smaller computers! In the worst case, your website will crash the browser. This can be very annoying when the shopping basket is full!
• Sliders make for a larger data volume! Load the hidden content of a slider after the page has been completely loaded. A static ad is better than a slow page! Load smaller images for mobile devices to present a fast page to the customer!
• Test, test, test Test in A/B tests whether your sliders are accepted by the customer. If your content is ignored, you may be giving away money! Please note: a long dwell time on a page may not be a positive sign! This can also indicate problems with your content. Measure the conversion of your content. Be sure to test a static version against your slider!