Is the ride over for carousels in web design?
There was a time when carousels were widely used and generally well-received on websites.
The ability to hold multiple content types in a single area was thought to be a good way to save space and minimise distractions before users continued down the page. Fast track to the current day, and there’s been a shift, with more and more experts arguing against the use of carousels in web design.
Our love affair with mobile
More people use their phones to browse and shop than ever before. The problem with hero carousels is they don’t tend to translate well to small screens.
Many carousels will load images from the desktop version, which can make pages slower to load. And, if your carousels aren’t responsive they frankly don’t look good on your otherwise fully responsive website.
Click through rates have also been documented to dramatically decrease between the first and second position, highlighted here: https://erikrunyon.com/2013/07/carousel-interaction-stats/
Compared to 89.1% of people clicking on position one, only 3.1% of people clicked on position 2. This means it’s likely that more users scroll vertically down a page than interact with a carousel. By vertically arranging your content it could be more visible and would encourage higher engagement.
It’s also worth mentioning that having content appear “below-the-fold” can lead to a negative user experience which will hurt your site’s ranking in search results. This was noted in a Google algorithm update from 2012. This means that any important, core messaging you want users to see should be visible and therefore not hidden in carousels.
As we’ve mentioned previously, we’ve heard complaints from users that if they click on a result and it’s difficult to find the actual content, they aren’t happy with the experience.Rather than scrolling down the page past a slew of ads, users want to see content right away. So sites that don’t have much content “above-the-fold” can be affected by this change. If you click on a website and the part of the website you see first either doesn’t have a lot of visible content above-the-fold or dedicates a large fraction of the site’s initial screen real estate to ads, that’s not a very good user experience. Such sites may not rank as highly going forward.”
Posted by Google on Thursday, January 19, 2012
It can be quite a difficult task to identify a brand’s core message/offerings and determine what users need to see first but a carousel shouldn’t be seen as a quick fix for these problems.In fact, if users only see the first rotation of your hero carousel, they are likely to assume that’s what your site is about. The content hierarchy process should run in parallel with user stories and happen before the design stage.
There’s also still the problem of bulk. Carousels with too many types of media can significantly slow down your website – leading impatient visitors to your competitors instead. Load times are so important that Google has used loading speed as a factor in mobile search results since July 2018.
To add to this, people are so used to being bombarded by promotions that they often mistake carousels for display ads. This means any messages in your carousels could be missed entirely.
So, what’s the alternative?
If you’re ready to drop your carousel but still want something to fill the hero section of your website, there are several alternatives that websites are now opting for.
Grids
Having different types of content appear in a grid format can be a great way to show off multiple promotions or messaging in the same space.
Static image & messaging
A static image used in conjunction with some clear and concise messaging (overlaid or not) can be more beneficial to the user. Removing movement removes distraction, meaning the user will be more focused on the content.
Video content
Another option is to use video content. Videos tend to convert better than carousels. By adding controls, you give the user the ability to pause, stop or scroll down if they want to. With carousels, users usually don’t have as much control and end up being distracted by too many moving objects.
Background image
You can also use a full-width background image with or without an overlay. As long as any copy over the top is legible this can be a great way to engage the user without distracting them with too much movement.
If you still have your heart set on using a carousel, keep these points in mind;
- Make it mobile-friendly
- Make sure it loads quickly
- Use the same messaging and themes to minimise distraction
- Give the user full control
- Don’t set to play automatically
Going round in circles with carousels?
We can help you figure out what’s holding your website back and how to get it firing on all cylinders. Just send an email to info@wehavezeal.com or call on 0113 887 3070.
Listen to ZealTalk. Our podcast on startups and their Zeal.
