Is It Still OK To Have A Carousel On Your Website

Short answer — it’s risky, but it can also work depending on how you do it in terms of UX.

Website carousels have definitely decreased in popularity since a few years ago, but you can still find some here and there — most notably on e-commerce websites that avoid refreshing their UI very often.

Carousels used to be a pretty popular thing. It’s a way to cramp 3–5 (or more?) images in the same space by making them switch at an even interval. It adds some movement to a website, which makes it feel more alive, but if done incorrectly, which is often the case, they can cause real confusion for the user, not to mention — nausea.

Consider why you want to have a carousel at all

Having a carousel on your homepage, because other websites have it is not a good enough reason. Think about whether it adds any value to your website visitors, specifically to their user experience.

If done correctly, a carousel can promote your product features, inform your customers of current offers and help them navigate to a specific product. Consumers are generally attracted to large scale images, which normally go with a carousel and the auto-movement allows you to expose more information while preserving space from your homepage.

You should also carefully consider, whether an alternative to the carousel might be a far simpler and more elegant solution. An example would be to just use static images on your homepage in a preferred grid, containing all the information you want to show.

This is a simpler solution, which also works well on mobile (as opposed to a carousel). I’m using “simpler” since you won’t have to be careful about the pitfalls of having an auto-rotating container. If the content of the carousel is not very carefully curated to be relevant, high-quality and mobile-friendly, the user experience that comes with it will just be unpleasant.

Still, if you decide to go for the carousel, please consider the following.

The slide sequence

This one should be chosen very carefully. Imagine the carousel images like a funnel. The first image you chose will get the most views. Each next one will get significantly less noticed. Visitors simply don’t stick around at the top of the website to wait for all the photos of a carousel to autorotate.

They might see the first and the second one and immediately scroll down or click on a link to go to a different page. Consider this when you pick the sequence of your carousel images.

Website content paths

If you decide to have one (or all) of your carousel images to be placeholders for buttons that lead to a specific website feature or content, be sure to have the option to reach this same feature or content through another place as well.

Users often skip the carousel entirely, subconsciously ignoring it, especially if it resembles an ad too much (there’s actually something called “banner blindness”). Another use case is if the internet connection is too slow and the carousel doesn’t load fast enough. The user will immediately go looking for the content he’s interested in, and if the only path to it is in the carousel, she simply won’t find it.

Clear manual controls

This one should sound very straightforward, but it’s surprising how many websites get it wrong. Just be sure the manual controls are clearly visible. Sometimes they’re just little transparent dots somewhere on the side of the carousel that clash with the image in the background and it’s completely impossible to see them. Might as well not have controls at all.

Carousel rotation speed

This is a tricky one. If the rotation speed of the carousel slides is too fast, the users may feel like they don’t have enough time to see the content of each one. If, on the other hand, it’s too slow, they will lose patience waiting for the next image and will simply move on.

It really depends on how much text you have on each slide, but a good benchmark seems to be 5 to 7 seconds per slide for slides with just a few words.

Pause on autorotation

The user should have control over the carousel’s autorotation. A good practice is to do this on hover. That way, if the visitor decides to focus on a slide, they can just hover and spends as much time on it as they like.

Stop of autorotation

Another important carousel behaviour should be stopping the autorotation after any kind of interaction from the user. That means if a visitor uses the controls to switch to a different slide, the autorotation should stop. Otherwise, the user will change slides to focus on a specific one and the slide would change again automatically. Frustrating!

Mobile gestures

In a mobile context, the carousel should support screen gestures. Simple as that! People are used to pinching and swiping on their phone so the carousel should take this into consideration — specifically the swiping part to change slides.

Legible slide text

Be wary when directly transferring a website carousel into mobile. If there’s a lot of text on a certain slide, that same text will not be legible on a smaller screen. Either adjust the slide’s text to accommodate for the smaller screen, or create a different slide for the mobile version with less text.

Carousel content load speed

Users have even less patience when it comes to content being loaded on a mobile device. If the carousel takes more than a second or two to load it will be entirely ignored. When choosing the content of your slides, consider how fast it loads not only for web but for mobile as well. If it seems slow on web it’ll feel like it’s taking ages on mobile.

Conclusion

As one of the leading design agencies in Singapore, we’ve had a lot of discussions with clients who want to have a carousel on their homepage.

Although we’re not entirely against it, it’s sometimes questionable what the added value would be and often times it seems like an unnecessary complication, compared to using static images with content.

Always consider why you want to include a certain element on your homepage and what its effect might be for your user’s experience.

Source: Insights taken from research performed by Baymard Institute