Introduction
If you've been on any website in the last couple of years, you've likely seen a growing trend in Hero Carousels - a slideshow of images which is placed right at the top of the page. The idea behind these was to surface a variety of high quality content to users immediately upon landing on a page. Seems like a good idea, right? Well it turns out, they did not have the desired outcome.Not only did the hero carousels not have the desired effect of the user seeing a variety of options, it also created usability issues for the customer. What was a good idea in theory didn't materialize in the real word.
There are a lot reasons that hero carousels don't offer a good user experience (banner blindness to name the most popular), but here are my top 3 reasons to ditch the hero carousel on your e-commerce site:
1. Even if people stop to look at your hero carousel, they likely won't make it past the first couple of pictures.
The human attention span is already pretty limited, but the more information a person has to take in and the longer they have to wait for it seriously reduces the likelihood that they will see and/or comprehend a piece of information. It's possible that you have curated the 10 most stunning images of a product the world has ever seen, but that is not likely to change the behavior of the user.On an e-commerce site, the intention of the user is to usually to shop and, hopefully, buy. If they have to sift through information or wait for it to arrive (like in a hero carousel), they generally just won't do it.
2. They can be hard to navigate
When hero carousels first became a trend, they typically autorotated. Autorotation creates a lot of accessibility issues for just about everyone - if the slides change too fast, people with limited language ability or reading comprehension might not be able to read the slides fast enough. Users who utilize screen readers don't have control over autorotating content, which is a need. If a user has limited dexterity, they might not be able to click on the action featured in the image fast enough. If the picture transitions too fast, the motion can be jarring for some users.The alternative became to build in controls to move back and forth through the pictures. While this is better, it still creates usability issues.
If we look at our Beloved Sam's Club, you can see a hero carousel image
Circled in red, you can see an indicator, alerting the user that the carousel is autoplaying, gives them ability to pause it, and shows them what image they're on. It's pretty easy to miss, but it's there.
There are built in controls to move through the images yourself, but you have have to interact with pictures first before these appear, which creates a usability issue.
A user also needs to be able to target and click on the arrow to get to the next picture. If they click too far in either direction, they click on the actual image which will take them to a new page. This can become even more problematic on mobile where the screen is smaller and everything is condensed.
3. They can really slow things down
Having your largest pieces of content load right at the top of the page can be problematic because it can take the page itself longer to load. Users want to be able to interact on your website, but if they have to wait for the images to load then they can't meet their goal.
What if you (or someone you work with) is really committed to a carousel?
If you and your brand are committed to carousels (and for some industries, carousels can be useful), then consider these questions before using:
- What value does this bring to my customers?
- Where can these images go so that they will not impede the user (for example, perhaps further down on the page)?
- How can this be implemented in a way that will be as accessible and inclusive as possible?
Conclusion
While hero carousels have soared in popularity, that is not an indication of their usability and functionality. Overall, the research is pretty clear that in most instances (e-comm specific), hero carousels do not tend to provide the value that most merchants are hoping for. Better options exist to promote your products that will also provide for a more positive user experience.
Resources
Yale University - Hero Images/Carousels
Baymard Institute - 9 UX Requirements for a User-Friendly Hompage Carousel Design (If You Need One)
Nielsen Norman Group - Banner Blindness