Carousels are declining in popularity on e-commerce sites, especially on the homepage. Our most recent UX benchmark reveals that only 28% of the top US and European e-commerce desktop sites have a carousel — down from 32% when we measured it in 2016 and 52% in 2013.
While our large-scale usability testing reveals that users generally like the large imagery of carousels, a homepage carousel can cause more harm than good if the inherent serious usability pitfalls aren’t addressed. In short; we do find that homepage carousels can work with users, but in practice almost all carousels don’t, and the list of detailed requirements is long.
Indeed, our UX benchmark reveals that only 41% of the sites that have a homepage carousel have an implementation that’s largely free from usability issues.
Furthermore, during our usability testing we also observed an alternative homepage design pattern that technically is vastly simpler to get right than a perfectly implemented homepage carousel and that performs well with users.
Carousel UX Findings from Our Usability Studies
In this article, we’ll discuss the test findings from our e-commerce Homepage & Category and Mobile usability studies related to homepage carousels. In particular, we’ll discuss and show our test findings on:
- Deciding whether having a homepage carousel is even the right choice
- Why autorotating carousels are problematic on mobile sites
- 3 UX requirements for designing a user-friendly homepage carousel for both desktop and mobile sites
- 3 additional UX requirements for desktop carousel autorotation
- 3 additional UX requirements for mobile carousels
Deciding Whether Having a Homepage Carousel Is Even the Right Choice
If we set all the commonly observed and quite severe website usability issues aside for a second, we do find, that if implemented with great care, a homepage carousel can be a useful way to promote features, offers, and product-finding wizards. Mainly as many users are enticed by the typically large images and autorotation helps expose a variety of content without cluttering up the entire homepage.
Carousels therefore can perform decently — as long as the implementation itself and carousel content is crafted very carefully (most aren’t).
Static homepage sections (as seen here at Gilt) is a well-performing alternative to a homepage carousel, which is technically vastly simpler than a “well implemented” homepage carousel.
That said, we’ve observed in testing a well-performing alternative to homepage carousels that’s technically vastly simpler, and which can be employed on both desktop and mobile sites. This alternative is to simply use static content sections scattered throughout the homepage in combination with featured categories.
This static content sections design alternative relies on users simply vertically scrolling the webpage. It’s a vastly simpler UX design, offering a more ingrained web interaction than interacting with a site-specific carousel.
Therefore, before implementing a carousel on the homepage, consider whether it may be better to simply use static content sections — and avoid the headaches that can occur when trying to implement and maintain a homepage carousel perfectly. For most e-commerce sites choosing the static content sections and then spending the tech resources a carousel implementation would have required on other UX issues will be a better tradeoff.
When first landing at eBags’ homepage and seeing the “Spring Sale” flower slide, a subject thought eBags was a clothing store, despite its name (first image). However, after a bit of scrolling and seeing the next slide with travel bags, the subject concluded that it was probably a store dedicated to only bags (second image). Carousels are only as good as their content — misleading or confusing content will end up affecting many users given the prime placement carousels often enjoy on the homepage.
Furthermore, a carousel is never better than its content — if the content isn’t relevant, well-curated, high-quality, and mobile optimized, the experience will never be good. Additionally, our usability testing revealed that carousel content can mislead users as well if it’s not carefully chosen — to the extent that some users misunderstand the type of site they’ve landed on.
Therefore, another requirement when deciding whether to implement a carousel on the homepage is to ensure there’s high-quality content for the carousel slides (although static content sections will suffer from poor content as well).
If you, or someone else in your organization, have a very strong preference for using a homepage carousel, and also have the needed resources, then read the rest of this article, as the rest will outline the 9 requirements for making homepage carousels perform ok that our large-scale mobile and desktop usability testing have revealed:
Why Autorotating Carousel Design Is Problematic on Mobile Sites
In general, on desktop sites autorotation of slides is a very good idea as it helps spread exposure across slides and clarifies that it is indeed a carousel and not a single static homepage banner.
On mobile sites, however, the story is different. The key difference between mobile and desktop sites, when it comes to autorotating carousels, is the lack of mouse hover on mobile.
On desktop a user’s intentions can be inferred when they’re hovering a carousel image with their mouse cursor — that is, it’s very likely that they’re reading the slide content and we can therefore pause the autorotation. On mobile sites, however, the lack of a hover state means this crucial insight into likely user intent can’t be gleaned.
Even during our earliest rounds of mobile usability testing, we observed the issues users have interacting with autorotating carousels on mobile. Here, the carousel slide changed the very second this user tapped it and instead of registering a tap for the “Mega Sale” that she wanted (first image), it registered a tap for the “Bike Blast” (second image). She never noticed and thought “Bike Blast” was the sale (third image)
Consequently, during mobile testing users viewing content in an autorotating carousel were often distressed to have the slide change before they’d finished reading. Or, worse, some users attempted to tap a slide to learn more about what was featured — only to have the slide change at the last second, resulting in an unintended detour to a random landing page.
When this detour is noticed by users it’s often “just” an unnecessary frustration, as nearly all users during testing quickly recovered.
However, for the smaller sub-group of users who do not notice it, it will result in these users misunderstanding the content they view after they’ve tapped the carousel slide, as the content is likely to not seem very relevant to the slide they tapped.
Since there’s currently no way to technically avoid such untimely slide changes, carousel autorotation should be avoided on mobile sites. The downside of a carousel that abrupt most mobile users reading a slide, and causing some users to also open a wrong slide, far outweighs the upside of spreading exposure across the carousel’s slides.
This in practice means that mobile carousels are deprived of their main benefit (providing exposure to a variety of content through autorotation), and designers and managers have to always assume that all mobile carousel slides, beyond the first, will in practice never be viewed by the vast, vast majority of mobile users.
Instead of autorotating carousels, provide manual carousels on mobile sites that users can change by swiping (seen here at Walgreens). Note however that this gives vastly more exposure to the first slide, meaning subsequent slides will in practice not really be viewed by mobile users.
Displaying the slides as static content sections on the homepage, instead of using a carousel, is a well-performing alternative that’s much easier to implement (seen here at Williams-Sonoma). This also makes the need for tight curation of the homepage content more apparent.
As on desktop sites, static context sections can be considered as a design alternative to a carousel, especially since autorotation should be avoided. If the carousel design must be implemented, then the carousel should be manual, and it should adhere to the UX principles discussed below (ignoring the design requirements for autorotation, of course).
3 UX Requirements for a User-Friendly Homepage Carousel Web Design on Both Desktop and Mobile
If it’s determined that a homepage carousel is still the preferred choice compared to using static content sections, whether on a desktop or mobile site, then it’s important to get the following 3 UX requirements right when implementing a homepage carousel.
Note: these requirements are completely platform agnostic and apply equally to desktop and mobile sites.
1) The Slide Sequence Should Be Chosen Carefully
The initial slide in a carousel is hugely important, as it will receive much more exposure than the subsequent slides. It should obviously contain the most important content of the carousel. Here at Foot Locker, the featured shoe is much more likely to be viewed by more users than the content in the other two slides of the carousel.
Similarly, at Nike’s mobile site the first slide will receive more exposure than the other slides in the carousel.
Most users won’t see all the slides in a homepage carousel, even if it autorotates. They simply don’t stick around the homepage for that long, and certainly not at the top of the homepage.
During testing, users would typically click onto another page or scroll past the carousel long before a full rotation of the slides had commenced. And that was in the case of autorotating carousels — obviously “fully manual” carousels only reveal the first slide until users decide they want to see another slide.
This means the sequence of the slides in the carousel is incredibly important, as the initial slide will get vastly more exposure than later ones.
(Tip: see our article “42% of Mobile Homepages Risk Setting Wrong Expectations for Their Users” for more on how users generally behave when landing on a homepage)
2) Carousel Slides Should Never Be the Only Route to Features or Content
Beyond the initial slide getting the most exposure, it can be assumed that some users won’t see any slides.
At Tiger Direct, the carousel content “Graduation Gift Guide” will likely be overlooked by many users, who will perceive it “as an ad”. Furthermore, the “Graduation Gift Guide” is only accessible through the carousel — meaning that many of the users who could have found this content valuable will never see it.
During desktop (and especially during mobile) testing, many users immediately embarked on a product-finding strategy (e.g. using search, opening the main navigation, etc.) sometimes before the page had even finished loading. Consequently, these users likely never saw the carousel content.
Additionally, there’s a high risk of some carousel slides suffering from banner blindness: users skipping the carousel content, despite its prime placement, simply because it resembles an ad.
Key content — such as gift guides — should never be accessible only from the homepage carousel, as many users will never see it (this issue is mitigated somewhat at Nike by placing the gift guide in the first slide of the carousel, but many users will still skip the carousel entirely).
Therefore, vital site features should never be accessible only from a carousel slide, given that many users will never see it.
For example, a product finder should never be linked to only from a carousel slide. Instead, it should also have a permanent link in the navigation or a block on the homepage, as the product finder slide in the carousel won’t be seen by a large number of users, especially if it’s not the first slide in the carousel.
3) Manual Controls Should Be Completely Clear
It’s very difficult to tell that there are control arrows available for the carousel at Newegg, as they almost completely blend into the background of most of the carousel images.
Having carousel controls (which for most sites are indicator dots) that are highly visible is crucial. Otherwise, it can be as bad as not having them in the first place, as some users will simply not know they’re there.
Others who spot the controls may have difficulty interacting with them if they have small hit areas.
At Wayfair indicator dots are quite small and blend into the background imagery. They’ll go completely unnoticed by some users.
While indicator dots at Hayneedle are also small, because they don’t overlay the slides there is a high contrast between the selected dot and the white background, ensuring they’re highly visible.
Attention should be paid to both the size of the dots and whether they’re visible when overlaid on top of the slide content. As the carousel slides are dynamic and will change over time, testing for high-contrast should be part of the slide content creation quality assurance process, or automated. If the dots often tend to fade into the background imagery consider separating the dots from the slide content and placing them in their own section directly below the slides.
Lastly, in addition to indicator dots, consider also using arrows in the left-hand and right-hand side of the image. The next and previous arrows have the upside of being simpler to understand for more novice users.
3 Additional Requirements for Carousel Autorotation on Desktop Sites
Carousel slides should autorotate on desktop sites. However, there are three implementation details specific to autorotation that must be adhered to to ensure a well-performing autorotation.
1) Carousel Slides Shouldn’t Rotate too Quickly or too Slowly
When slides autorotate too quickly, users feel they have too little time to be enticed by the slide and properly evaluate the slide they might find interesting.
Conversely, if slides change too slowly, users grow impatient if the active slide doesn’t grab their attention and move on.
Depending on how much text the slides include, a good rotation time often seems to be around 5–7 seconds for slides with just a header and a few tags or labels, while more text-heavy slides may demand as much as 10 seconds.
2) Autorotation Should Be Paused on Hover
When the user hovers the carousel with the mouse cursor, autorotation should pause so the user can focus on the slide for as long as they’d like, and, more importantly, so the slide doesn’t change just as the user decides to click.
During testing, carousel slides were often observed changing just milliseconds before a subject clicked — causing the wrong page to be loaded. Obviously this is a frustrating experience, and, in some cases, it can be downright harmful if the user doesn’t realize what happened and instead begins browsing a completely irrelevant page until they either start over or abandon the site.
“If my mouse is above this, then it should really pause,” a subject explained at Blue Nile, “because otherwise I risk clicking the wrong slide just as it changes, like it just did, and I’ll get the wrong page. So, pause.” At Blue Nile the carousel failed to pause when this user hovered it with the mouse cursor. Users who have hovered a carousel slide are generally indicating an interest in the content — they’re likely reading it or considering whether to click — and therefore the carousel should pause until they’ve moved their mouse so that it no longer hovers the carousel.
It is therefore absolutely critical to pause the slides on mouse hover — an important feature currently missing from 18% of all benchmarked sites that have a homepage carousel (making it no wonder that most report poor performances on their carousels implementations).
The autorotation can begin again once the user’s cursor leaves the carousel if the user hasn’t otherwise interacted with the carousel — after all, the hover could just be temporary, with the user moving the mouse across the screen to get to another element on the homepage. In these cases, starting the autorotation again helps spread exposure across the slides, which is typically desirable.
3) Autorotation Should Be Stopped after Any Active User Interaction with the Carousel
However, we observe an exception to restarting the autorotation.
If the user has interacted with the carousel beyond hover (e.g. actively changed a slide), the autorotation should be permanently paused — even when the user isn’t hovering the carousel.
When the user has actively changed the slide by clicking the “next” or “previous” buttons or slide indicators, the selection is likely to be intentional and should not be changed just because the user decides to check out other parts of the homepage (before potentially returning to their selected slide).
3 Additional Requirements for Mobile Carousels
For mobile sites, a manual carousel should be implemented instead of an autorotating carousel (if not just using static content sections). However, we observe that are an additional three mobile-specific design implementations that must be adhered to, to ensure a well-performing manual carousel on mobile.
1) Mobile Gestures Must Be Supported
In general mobile users have come to expect to be able to use mobile gestures — for example, the “swipe” gesture to change to the next slide — when interacting with websites on mobile devices.
On a category page, a user at Newegg attempts to zoom to see the original price of a featured item in the carousel but is unable to use pinch to zoom. Users will expect that mobile gestures such as pinching and swiping will work when trying to interact with carousels.
This doesn’t mean traditional carousel controls such as “next” or “previous” buttons and slide indicators can’t be implemented, but testing showed that these should be provided in addition to supporting the swipe and pinch gestures.
2) Slide Text Must Be Legible
We frequently observe, when auditing mobile sites that feature a carousel, that the carousel artwork is reused directly from desktop.
Neiman Marcus reuses carousel artwork on their mobile site. Unfortunately this renders some of the slide text barely legible, as slide 1 (first image) and slide 2 (second image) of the carousel show. (Note the size of the text compared to the main navigation or the slide indicator dots, for example).
This isn’t a major problem so long as one is careful in ensuring that any text in the slides remains legible when scaled all the way down to a tiny mobile screen held in portrait mode. Ideally any text in the carousel slide is real HTML text and not embedded in the image (this is typically also better for accessibility and SEO).
3) Carousel Content Must Be Able to Load Quickly
In general, users tend to have less patience for slow-loading content on mobile devices.
This should be kept in mind when considering what content to include in carousels as users will quickly lose patience with content that takes more than a second to load (e.g. highly graphical or animated content).
As one user during testing put it while waiting for a page to load, “It’s just slow now. [Tapping fingers.] I don’t know whether that is my internet connection or my phone or whether it’s the website. So, who do I direct my impatience to? At this stage I would normally go okay. I’d go ‘no’ and go out of the website and go on to something else…the website should be faster…it’s bad for me personally because I just don’t have the patience…if it was going on too long, I would just go on and search for them somewhere else.”
Ensure Carousels Adhere to All the Implementation Details — Or Opt for Static Content Sections
A “Table Of Contents carousel” design could also be considered, where the different slides are previewed in clickable sections. This has the added benefit of providing users with some information scent so they can select the slides they find most interesting.
In the end, despite some users responding well to the large imagery found in carousels, they often end up doing more more harm than good due to the many nuances and implementation required to achieve a decent carousel performance. Again, even among the largest e-commerce sites, our benchmark reveals that of the 28% of sites that still use a carousel, 41% of the implementations have major usability issues.
To sum up, desktop and mobile sites must both adhere to the following 3 carousel implementation details:
- The slide sequence should be chosen carefully
- Carousel slides should never be the only route to features or content
- Manual controls should be completely clear
Desktop sites, with autorotating carousels, must adhere to the additional 3 implementation details:
- Carousel slides shouldn’t rotate too quickly or too slowly (around 5-10 sec.)
- Autorotation should be paused on mouse hover
- Autorotation should be stopped after any active user interaction with the carousel
Finally, mobile carousels should be manual (they shouldn’t autorotate), and must adhere to 3 additional implementation details:
- Mobile gestures must be supported
- Text must be legible, especially if reusing and scaling down artwork from the desktop site
- Carousel content must be able to load quickly
For most e-commerce sites static content sections will often be a better choice than a carousel, as they are vastly simpler to develop and maintain, and perform as well with users.
If adhering to these 9 implementation details across desktop and mobile sites is too difficult or resource intensive, we recommend implementing the simpler, but well-performing, static content sections on both the desktop and, especially, the mobile site.
This article presents the research findings from just 1 of the 650+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.
If you want to know how your website performs and compares, then learn more about getting Baymard to conduct a UX Audit of your site.
