Can your carousel succeed on your homepage ?

Can your carousel succeed on your homepage ?

The old carousel controversy

According to a 2013 study of Eric Runyon, the total amount of Web users clicking on a carousel does not reach 10%. Jakob Nielsen, main specialist in ergonomics and UX, had launched the debate a few months earlier, pointing out that carousels were, at best, ignored. Yet carousel is a trend that lots of famous brands still appreciate and display on their homepages. Criticized, the auto-forwarding widget survives despite the controversy.

What is a carousel?

A carousel is a functional block that displays several products, services or new content. The elements slide one after the other, automatically  or when users roll over it.

Is accumulating user clicks your objective?

Studies reveal a low click rate on carousels. This is even more true on the sliders, particularly on the last images displayed on the slideshows.  Users don’t interact much with the sliders and their content. However, a lack of clicks does not mean they’re not taken into account. Seeing and clicking are two different things: not clicking on a content does not mean not seeing it. A good carousel passes on a message. Users might not be interested but the important fact is that they got the information, whether they click or not. And that information can eventually return to mind later.

Carousels are also a good way to present several products or messages on the same space. Movement attracts the eye: as auto-forwarding widgets, they gain the users’ attention. A dynamic carousel calls out more for visual attention than interaction. The content changes and by so catches your attention.

Moreover, carousels provide a content that users might otherwise have not seen, for example, because they did not intend to check on the category that the presented product belongs to. This factor is an asset to increase the conversion rate. While working with our clients, we analysed that the average conversion rate after clicking on a carousel is about 3%. It might sound like a very low result, but that 3% still represent a part of the sales.

Another very important role that carousels fulfill is the atmosphere they create on the website. They are the dynamic element of the homepage. It’s especially important on this page because it usually contains a lot of different information. As a dynamic element, carousels represent an immersive element contributing to give users an overview of the brand’s world. Is that not exactly the main role of the homepage? In general, visual parts will help with the content’s visibility as they “break the reading’s rhythm”. Sliders break  this rhythm as they fill the page’s width. A broken rhythm injects some dynamism into the reading so that the attention is more focused.

homepage carousel 1

Example: Lacoste’s carousel

Brandalley's carousel

Example: Brandalley’s carousel

Example: L'occitane's carousel

Example: L’occitane’s carousel

User Experience: the real weakness of carousels?

So carousels represent a natural eye-catching element. And not only because of their auto-forwarding function; very often, they are big enough to fill most of the space above the fold. Their presence can therefore, be perceived as pushy by users. They also take more space than other more important elements such as the navigation bar. Web users might be distracted from a content that is more important. Sometimes, the carousels’ size is not proportional to their importance.

Despite their eye-catching dimension, carousels are not always seen. Jakob Nielsen observed a “banner blindness” syndrome: people don’t even see the carousel’s message because they take it for an advertising that they just ignore. Sometimes invisible and sometimes too pushy, carousels still look for a visibility balance.

Carousels’ forwarding speed is also a big issue. They can be too slow – which is irritating – or too fast – which is even more irritating. Everyone has their own reading speed and there is not much chance that your homepage carousel satisfies them all unless they have a control over it.

The carousels’ message often meets difficulties into making its way to Web users: even when the reading speed is adapted, they sometimes gather too much information on each slide. Ideally, your carousels should always be made up of one unique message with one CTA. As for the number of pages, it should not exceed 3 or 4. More is just too much content and no user is going to check them all.

Simplify browsing behaviour

First of all, make the content as accessible as possible. A lot of users try to click on a slider area that is not clickable: everything should be clickable on the sliders!

Thus, try the best to get in your users shoes and to understand how they interact with your content. The whole problem of carousels is the fact that users don’t have any control over them. Without control, especially on the sliding speed, the user experience and browsing will get damaged.

Different functions enable the carousels’ slides to scroll: dot navigation, arrows, and thumbnails. All these functionalities help your users with browsing the carousel. With dots, users know exactly how many sliders you have on it and can also easily navigate from one to another. Only featuring arrows might be weak as this functionality does not allow users to know what’s coming next! We advise providing a double browsing with both arrows and dots. From our point of view, thumbnails are a great feature, as the user directly knows the topics of the sliders, and how many they are.

Also work on your texts and pictures in the slides. Your legends should be clear and favour a fast browsing so that Web users easily remember the content and want to click on your calls to action.

Apple's carousel

Example: Apple’s dot navigation

Arrow carousel

Adidas’s arrows carousel

Yves Rocher's thumbnail carousel

Yves Rocher’s thumbnail carousel

So, should I use a carousel or not?

The homepage greets users from a direct traffic, which implies that branding and marketing are crucial there. Carousels can be great representatives of the brand’s core values, they fulfill many objectives – like branding or corporate ones – among which conversion is not always the most important.

But it all depends on the brands’ nature and the desired effect. Some key players chose to use different alternatives to carousels that better serve their website’s interests. For example, Asos preferred a mood-board to present its clothes in a fashion magazine style, which lends itself well to a fashion website. This solution is also very efficient to present different kinds of products on your homepage. There too, pictures are eye-catching, break the rhythm and facilitate the content’s understanding.

Example: Asos' moodboard

Example: Asos’ moodboard

On the contrary, carousels are more appropriate for some websites such as the PSG’s online ticketing, where the content is complex and the carousel enables to reduce the page’s vertical height.

Example: PSG's thumbnail carousel

Example: PSG’s thumbnail carousel

Carousels’ presence is absolutely not incoherent. The conversion rate issue is more focused on product pages. Those are the key conversion points, mainly because half of the visitors arrive first on those pages of the Website. So, though current carousels display many defaults, that does not have to mean they should disappear.

Actually, it is more important to wonder if the provided content is relevant on the carousel. The content is also displayed elsewhere on the Website, but differently. This important content should then be displayed elsewhere, in a different way. It’s actually like a staging. The different kind of presented products on sliders should also change: provide an entry by product categories, then by products, then by offers (for example 20% sales for Mother’s Day), by a reassurance product (free delivery for example).

To strengthen the carousel’s conversion rate, we recommend you to put push products within. For instance, PSG’s carousel allows you to access the direct match offer, which makes it more efficient.

In conclusion, the carousel is mainly an original way to stage your important content. Contents of all kinds (price, product, reassurance, etc.) addressed to several kinds of users arriving on the homepage (new visitors, returning, or varying ages, or expectations, etc.). Even if users don’t click, they see the content. What matters is to work on the user experience: browsing with arrows, dot navigation and clear and precise contents. To increase your conversion, you must work on the content’s relevance. As every website is unique, it actually means we should work on carousels’ UX design and test them with A/B tests solutions to optimize them.

Authored by: Marine Hortemel

Head of Marketing & Communication