Conversion Optimization

eCommerce image carousels: The good, the bad, and the ugly

Confused about whether to use image carousels or not? Here are 11 ways to use carousel banners better + 7 alternatives to use instead

eCommerce image carousels: The good, the bad, and the ugly

There was a time when image carousels carried a wow factor. 

The idea wasn’t too bad: using carousel sliders to promote your latest eCommerce offerings and deals. Seemed like a huge sales booster.

Unfortunately, not so in reality. 

Research has proven time and again that image carousels have abysmal clickthrough rates. More about that a little later, first let’s take a quick look at what image carousels really are. 

What is an image carousel?

There are various names used for image carousels such as web sliders and sliding banners. These are usually placed above the fold. 

Based on their movement, image carousels can be static or auto-rotating. Static carousel display comes with indications for navigation, for example, arrows on the left and right. Auto-rotating carousel images move on their own, without manual intervention by the visitor.

Are image carousels dead? 

Do carousel banners work in today’s eCommerce sites?

Most tests done by CRO experts prove otherwise. 

Eric Runyon carried out a study to discover how image carousels performed on the Notre Dame website. His study revealed that only 1% of visitors clicked on web sliders, be it static or rotating. 

Chart from Erik Runyon’s research showing poor clickthrough rates of eCommerce image carousels
Source


Out of this, almost 84% of them clicked on the first carousel banner slider. The rest 16% was divided among the other 4 sliders (roughly 4% each in that case). 

Nielsen Norman Group’s research also revealed something similar. They carried out a usability test where they asked a user to spot a special deal on washing machines on the Siemens homepage. 

The result: the user failed to spot the offer in spite of the offer being placed in a prominent position i.e. the first slider in the image carousel.

Norman Nielsen Group’s research on eCommerce image carousels
Source


There are several other experiments that have been carried out to test the effectiveness of rotating banners. 

Every single one of them points to the following challenges users face while navigating eCommerce image carousels: 

a) They’re too fast - Psychologically, the eye is receptive to movements. Thus rapid movements can distract the eye from registering messages. So, auto-moving sliders increase the chance of the message getting missed. Even if a user is interested in the information on one slide, it changes so fast that they may end up failing to register the information. The auto-rotating sliders can also pose a challenge for people with disabilities. This hampers carousel usability to a great extent.

b) They’re too many - As the research points out, most often it’s the first image slider that gets the most clicks and views. Using multiple sliders on your eCommerce websites can also lead to decision paralysis for users. Too many competing messages can compel the user to be overwhelmed and choose nothing in the end. 

c) They’re confusing - It’s easy for users to miss them since they look like ads—this is known as banner blindness. Moreover, automated sliders can also shock users since they’re not aware of when the sliders will switch. Carousel navigation can also get difficult when there are no specific arrows pointing towards a movement. This makes users feel a lack of control and ends up in poor carousel interaction. Almost all slider images for eCommerce websites have call-to-action (CTA) buttons. However, they may be placed in different locations in different slides. This can severely impact the image carousel conversion rate. 

d) They’re bad for site speed - If you have about 4–5 high-quality image sliders, it may get difficult for users to load the page. Even a 1-second delay in page speed can lead to a 7% decrease in conversions. Hence large-sized eCommerce carousels are bad news for conversions. 

e) They’re not responsive - Image carousels that are created for desktop work poorly on mobile devices since they’re not customized for vertical viewing. This is again an example of a faulty carousel UX design since users will have to pinch and zoom to view the sliders. Or for the worst part, ignore them altogether. 

11 friendly reminders for eCommerce image carousels

Now that you’re aware of the problems associated with using image carousels, let’s look at some reminders of how to use them better—if you feel you just have to use them.

1. When to use carousel sliders (and when not to)

You can refer to this checklist if you’re unsure about when to use carousel images on your eCommerce site, and when to give them a miss.

When to use:

  • When there’s a design need. A carousel display makes sense if the existing web design format is in alignment. For example, if you’re already following a format that resembles a timeline, a presentation, or a slideshow, you can go for a slider. 
  • When it saves time and effort. If you’re using carousel images to save visitors time to explore the whole website, then you’re on the right track. Here’s an example of how Mercedes Benz uses their rotating banner—it comes with ample manual control and features precise product information. The side buttons—featuring the configurator, the product page, and a share button—enhances the banner experience a little more than usual. 
Example of how to use a carousel banner the right way by Mercedes Benz


  • When it helps users compare products. If the carousel banner enables viewing a range quickly where products are showcased in a way comparison becomes easy, then that’s great. Showcasing specifications, technicalities and other product information is a good enough reason. 
  • When the layout is mostly visual. Adding rotating images to your website can be an advantage when there’s not much text and users can simply focus on the visual element. Check out this carousel example from Reebok. It has ample manual control apart from being largely visual with minimal text. 
Example of a visual carousel banner from Reebok


  • When it helps in cross-selling. Want to suggest complementary products to customers to increase their average order value? This is how Amazon use carousel banners to offer relevant product recommendations.
Example of cross-selling through carousel banners by Amazon


When not to use:

  • When it’s central to the homepage. It’s often not a good idea to make an image carousel the hero of your homepage. Users find accessibility and readability a challenge. Image carousels can cause brand confusion on top of that. 
  • When you’re featuring an article. Too many sites that rely on the click-bait approach have articles lined up in the form of a carousel. And you don’t want to be known for something like that. 
  • When you’re making your business your priority. And when you’re less interested in what your users will experience in the process. Meeting just your business needs through an image carousel is a bad idea. 
  • When you’re creating a repository of all your products. There are other ways to do this. An endless rotating banner where all your products are dumped could lead to a negative carousel interaction you wouldn’t want to be known for. 

2. Don’t autoplay image sliders

Automated image sliders may not be as full-proof as you thought them to be. Science has proven that the human eye involuntarily reacts to any form of movement—this results in distraction. 

Interestingly, the US Army funded a research that tried to analyze the extent to which motion distracted people from focusing on a task. Psychology terms this inattentional blindness

The end result: people miss the original message. Suppose a visitor lands on your website and pauses on the carousel display. Just when they’re trying to focus on the offer or the promotion, the carousel slider moves. Hence their attention focuses more on the movement than on the message.

In the following example, Home Depot eliminates this problem by offering complete manual control to users with the arrows and the small dots. 

Example of manual control in carousel banners by Home Depot


3.Offer them slider control instead

Now you know how frustrating autoplay sliders can be. Offering them manual control is the ideal antidote for the annoyance that auto-moving sliders can cause. 

Here are a few ways to offer carousel slider control to users:

  • Use right and left-pointing arrows indicating the direction in which the sliders move. These may be placed either on the sides or below the carousel display.
  • Create dot navigation that visitors can use to choose which slide they want to view. They can be hollow by default and be filled to indicate the current slide. Dot navigation also helps in indicating the number of slides present.

Want to choose something even more creative while still offering control to users? Check out this carousel UX design example from Harvard's Graduate School of Design

Example of carousel UX design by Harvard’s Graduate School of Design


Offering control back to your customers bodes well for your business. When users have higher control, they can take more time to absorb information and take decisive action.  

4. Touch-friendly sliders are a thing now

When it comes to mobile image carousels, responsive design is a must. This is essential because you’re trying to put the user at the center of the browsing experience. 

Here are a few points to remember when going for a responsive mobile carousel design:

  • Make manual control the focus once the user is already scrolling through the carousel. 
  • Introduce new items in batches one row after another so that the user has to click less. 
  • Make the process of browsing intuitive for the user—showing the number of rows on the carousel and where the user is currently, helps. 
Example of mobile image carousel responsive design
Source


5. Switch to .SVG graphic files

When talking about mobile carousels, it’s impossible to miss the file formats. If you want to achieve shorter loading times and faster selling, .SVG files is the way to go. 

There are a bunch of reasons what makes .SVG files a preferred format for mobile carousel design. For one, the file sizes are small which makes them automatically easy to load. 

.SVG files are also interactive making it easy for developers to introduce complex animation. 

Finally, the vector nature of .SVG files ensures they are not resolution dependent, making them ideal from standard monitors to swanky smartphones. 

With progressive web apps slowly gaining popularity, using .SVG files for mobile image carousels can be ideal.

6. Avoid banner blindness with visual clarity

Even if you’re choosing to go with an image carousel, make sure you make visual clarity the top priority. 

Remember that the human eye can focus on only a few elements. Hence toning down visual clutter can help visitors focus on the action more. 

Keep your content ultra-specific and your UX design less flashy. Making it more interactive also has proven to increase engagement. 

Finally, keep an eye on the size. Ensure that the product images, fonts, and widgets are smaller in size, otherwise, they may take up too much space and look cluttered. 

Here are a few tips to keep in mind:

  • Strike a balance between visual and text
  • Make sure the text is stating what it really means
  • Limit the number of features per slide
  • Stick to one message per slide
  • Ensure your bigger brand idea gets built across the carousel

Check out how Neiman Marcus cuts down its desktop elements on mobile for a better responsive experience. 

Example of improving visual clarity on carousel images by Neiman Marcus


7. Use 5 or fewer slides

When you limit the number of slides on your rotating banner, it ensures chances of higher engagement from users. 

The reason is simple: beyond 5 slides, people will begin to lose the narrative that you’re trying to create through the slider. If the slides can repeat all over again after a point, then that’s the best-case scenario. 

Take a look at how Ralph Lauren does it—combining video and image in a carousel with just 3 elements playing back to back and then repeating. The bars at the bottom of the carousel indicate the user’s progress and the pause button on the left allows the user to stop at any time. 

Example of improving visual clarity on carousel images by Neiman Marcus


8. Consider carousel slider SEO

Carousel sliders are also important areas that Google crawls. Ignore this and you may lose out on coveted search positions. 

2 aspects of image carousel SEO that you should consider are H1 tags and readability. 

Considering the H1 tags are the most visible title on a page, it’s important that your rotating banners carry distinct tags. Google reads these tags and then decides page rankings. This means if your H1 tag is duplicated across a single slide, the search engine won’t know which to pick for efficacy. 

And then there’s readability. The point is to keep the text crisp so that it’s understandable and actionable. Anything more could be potentially annoying for the user. Using clear CTAs that indicate the next steps without confusion is a good idea. 

Here’s an example from Williams-Sonoma. See how the font size is way above normal that makes it difficult to read? Moreover, the proportion of the text to the banner is skewed. The font size is also bigger than the CTA which doesn’t help. All in all, there’s too much happening in the banner for the visitor to register any information. 

Example of cluttered text on carousel images by Williams-Sonoma


9. Show a progress bar

Introducing a progress bar into your carousel design can turn out to be lucrative. It makes sure the user is not left hanging or wondering what is coming up next. 

A progress bar offers more control to the user, provided it’s displayed in an intuitive way. For example, you should avoid displaying how many items are there in total (as in displaying 1-5 of 20). Instead, you can simply display the number of rows and which of them the visitor is on (as in 1 of 10). 

Check out the Toyota Brazil homepage example. Apart from distinct scroll buttons, the website also features a numbered system for easier recognition. 

Example of cluttered text on carousel images by Williams-Sonoma


10. Some more points for mobile image carousels

It’s important to remember carousels don’t behave on mobile sites the way they do on desktop sites. This will need you to make space for certain factors that work differently in mobile factor, and these include:

  • Choose gestural control over pagination control, leaving out start/end and next buttons. 
  • Employ the partially visible feature so that users know something is coming up next, whether your carousel is vertical or horizontal. 
  • Use special care to decide what should feature around the carousel so that users find navigation easy. 
  • Make sure labels are easily readable, especially when they feature beneath thumbnail images. 

See how ToysRUs clearly labels navigation instructions below the carousel? 

Example of readable instructions below carousels by ToysRUs


11. Use large scroll buttons

Even if you’ve designed a rotating banner with all the right elements, without large-enough scroll buttons it might not fly. A simple yet distinctive scroll feature can easily indicate to users that there’s more they can discover if they keep going. 

You can use them to various ends like tell a story or lead them to a CTA. 

Just as Ikea does it.

Example of large scroll buttons by Ikea

It maintains a certain continuity with its distinct scroll buttons that match the slide design. 

free conversion rate optimization audit


If not carousel banners, then what? Here are 7 alternatives

Well, now that it’s proven that image carousels can have a bad effect on user experience, let’s look at their alternatives: 

1. Using content smartly

There’s a number of other ways to bring sharp focus to what you’re trying to sell. One of them is to use your content to speak directly to your target audience. 

This especially works if you’re catering to multiple personas. It not only offers a clear messaging but also leads to customer satisfaction. 

Here’s how Nike does it. They use the primary section of their website to build social proof

Example of using homepage for social proof as an alternative to carousel banners

2. Use the space to communicate your value proposition

When you do away with carousel banners, you also do away with the need to cram all your information above the fold

Check out the Lighthouse Brewing Co.’s homepage and you’ll realize how they best utilize space to communicate their USP and entice visitors to read ahead. 

Example of homepage alternative to carousel images


Why should the hero of the homepage only be an image carousel? What if you used the space effectively to bring your brand’s or a specific product’s value proposition a little more alive? 

Check out what Frank Body does to know what we’re talking about. 

Example of a value proposition as an alternative to carousel images


The product benefit is highlighted in simple and clear language with a compelling CTA. 

3. Build content blocks that lead to separate segmented homepages

Considering image carousels don’t really do justice to elaborate textual content, content blocks are an option. When clicked, these could lead to separate homepages for different segments of your audience. 

A great example of this is when your customers hail from different countries. You can use the content blocks to lead them to their local sites. 

A great way to attract as well as track website traffic!

A FOUNDER’S GUIDE: Sales Secrets from 15 High-Converting Websites

4. Experiment with video

Want to add some interactivity and motion to your site? You can experiment with video and GIFs in that case. 

They not only grab your visitor’s attention but also add more perspective to your product offerings. 

This is how CarLens uses its space to communicate product features with video animation. 

Example of using video instead of carousels in homepage


5. Promote your offers

Have some recent offers you’re running? Then your homepage is the best place to showcase them. 

You can promote your year-long discount or the latest offers here. You can also keep updating the section to include special seasonal offers such as holiday season discounts or Black Friday deals. 

Make sure it doesn’t clash and multiple offers don’t end up confusing the visitor. 

Example of promoting offers on the homepage instead of carousel banners


6. Showcase your products

Want to showcase your top-selling products? That’s a great option for this section. Instead of waiting for your visitors to discover them through navigation, why not feature them right where they see it first?

Check out Tesla Motors keeps its homepage section focused to promote its latest car model.

Example of showcasing products on homepage instead of carousel banners


7. Add some personalization

Personalizing your visitor’s experience will always lead to positive conversions. There are several ways you can add personalization to your homepage section instead of image carousels. 

For example, you can add a hero image that features your latest collection. Like H&M does. 

Example of using hero image instead of carousel banners


You can also add some personalization with site search. Replacing carousel banners with a search option is a great way to personalize the visitor’s shopping experience right from the start. 

Here’s an example of how Koke Inc. does it. 

example of using site search instead of carousel banners


You may also like

x
A FOUNDER’S GUIDE: Sales Secrets from 15 High-Converting Websites
Get the guide
Sent to your inbox
OK