HubSpot COS FAQ: Can I Use an Image Slider?

This is another in our series of  HubSpot COS FAQ’s based on questions we get asked a lot by HubSpot customers who are interested in migrating their website and blog to the Content Optimization System (COS).

Can I use an image slider in the HubSpot COS?

Yes! You can use sliders in the COS — in fact, there is already a slider module in the COS templates just waiting for you to use. You can even use multiple instances of a slider on the same page, with each set to it’s own width, timing, and type of transition. And this image slider modules is 100% mobile compatible.

If you prefer a different kind of slider, your designer can specify any JQuery slider and it will work perfectly in the COS.

What you didn’t know about auto-forwarding sliders

According to Jakob Nielsen, accordions and carousels should show a new panel only when users ask for it. Otherwise, it  should stand still and let users read the information in peace, without having the rug yanked from under them. As our user said about Siemens’ big rotating box: “I didn’t have time to read it. It keeps flashing too quickly.”

Auto-forwarding causes many usability problems:

• Moving elements usually reduce accessibility, particularly for users with motor skill issues who have difficulty clicking something before it’s taken away.
• Low-literacy users often don’t have enough time to read the information before it’s removed.
• International users also read more slowly if your site is not in their native language, and thus won’t be able to understand a panel if it’s displayed only briefly.
• The probability that users will spot the item they want is drastically reduced when only one thing is displayed at any given time.
• It’s just plain annoying for users to lose control of the user interface when things move around of their own accord.

Most important, because it moves, users automatically assume that it might be an advertisement, which makes them more likely to ignore it. (source: Jakob Nielsen)

But wait, you CAN use auto-forwarding sliders effectively!

There is a case to be made for using auto-forwarding sliders as a display gallery for photos. Let’s say you run a summer camp and want to showcase how much fun kids have at camp. A big slider near the top of the page is perfect for this. It makes sense to auto-forward these very few seconds as they don’t require any reading or decision-making and set an emotional tone for the page.

Just don’t ask your site visitors to read anything on an auto-forwarding slider.

I want to use a slider for my calls-to-action

The data says that this is a bad idea. Notre Dame did a study on this and found that only 1% of web visitors clicked on CTA’s in a slider. Ouch! That’s way too low. It’s better to take your highest converting offer and make it a static image near the top of your page, with some additional static CTA’s elsewhere on the page (above the fold, please!). Then feel free to change out the static banner as often as you wish.

I know that many websites use auto-forwarding sliders for their CTAs, but it simply doesn’t convert visitors well.

In summary, the HubSpot COS has a built-in slider module that works well and let’s you customize the type of transition and the frequency of the transition. If you want more control or a slider that works differently, your designer can easily add any JQery slider (there are 100’s of them).

Be sure you think about when to use a slider vs. a static image, and don’t put your valuable CTA’s in sliders.