Category: UX advice / Ecommerce guides
The carousel has a bad reputation. They were once a common part of the internet landscape and seen as a solution to the challenges of fitting all of your content on a page. Can’t agree what content to put on an important page? Stick it all in a carousel and hey presto, everyone’s happy!
Except that doesn’t really solve anything. Studies have shown that most people only view the items visible by default in a carousel and the subsequent items don’t get clicked on. This realisation combined with the rise of mobile usage (where users don’t want fiddly things to tap through) means they’re gradually dying out as a way to house content.
Below is an example of a website using carousels to squeeze lots of products onto a homepage on desktop and mobile. It’s a particularly bad use of the carousel because there’s no clue as to how many products there are in total and the control arrows are pretty subtle. This makes it very hard for users to know what they can’t see.
However there is one place I think they still provide a valuable service, particularly for ecommerce websites.
The specific use case that still works is the when they sit at the top of landing pages, mostly showcasing big images and are set to autoplay. This works for two reasons, which I’ll delve into in this article: 1, they can explain concepts quickly and 2, they save the user from scrolling.
When users first land on your site there’s a need to quickly tell them what you offer and why you’re different. The autoplaying carousel can do this by scrolling through a few images, which visually provide a lot of information.
During my time at holiday rental company onefinestay we consistently had a carousel on the homepage and I watched many user tests where I saw its benefits. Within 20 seconds and without the user touching their mouse, the carousel used four large images to tell the story of what the company offered.
Mainly they displayed a selection of homes, which helped explain that this wasn’t a hotel site but a service offering a range of different properties to book. This was something that was hard to sum up in a single image. We were also able to put an offer or promotion on the first slide, giving it importance without losing the home shots that explain the concept to first time visitors.
You can think of these carousels more like video, where the content works together to tell a story.
Why not use an actual video? Of course short autoplaying looped videos can also work but to get this involves a lot more expense and effort and not every site has the budget. In addition videos tend to mean large file sizes, which your mobile users on data connections aren’t likely to appreciate.
Of course users do scroll, and the the importance of placing things above the page fold has been largely overblown. However ideas like the fold persist because there is truth in it, particularly on landing pages.
I’ve looked at the heatmaps of many ecommerce homepages and landing pages, and the majority of users tend to leave these pages without scrolling. When users are new to a site their tolerance is low, and if it doesn’t immediately show them what they want, they’re more likely to go back than scroll down. Whilst returning users are more likely to go straight to the menu to navigate to their area of interest.
This reality is shown by big brands such as YSL and ASOS who make their homepages incredibly short and focus on only one or two actions for the user to click. Chanel also have a short homepage that doesn’t require scrolling but they utilise an autoplaying carousel to fit a lot more content onto it.
The space above the fold offers the only opportunity to communicate with both sets of users. As a result the autoplaying carousel can provide information about what the site is about and inform returning users of new products and offers.
Of course even if you’re just sticking to the one type of carousel on landing pages, they can be used badly. There are a few ground rules that I follow to get the most out of them:
– – –
Main image by CHUHAN Z. on Unsplash