Carousels are hugely popular on e-commerce sites. Especially on the homepage. In fact, 52% of the top US e-commerce sites have a carousel on the homepage (of their “desktop” site). While we have yet to finish our benchmark of mobile e-commerce sites, initial benchmarking shows that carousels are popular on mobile sites too.
But are homepage carousels actually helpful to users, or do they merely represent an easy way to deal with internal inter-departmental bickering about who gets to put their banner front and center on the homepage? The short answer: homepage carousels can work well, but in practice most carousels don’t. Our usability research shows that homepage carousels can be helpful to users if they adhere to a 8 key implementation details, and that these vary from desktop and mobile sites. In this article we’ll go over these 8 implementation details and outline how and why mobile and desktop differs.
It should be stressed that the focus of this article is on the design and interactive features of homepage carousels and not their content. In other words, for the purposes of this text we will assume the content is good and instead investigate how to make the carousel features user-friendly. If the content of a carousel isn’t relevant, well-curated and of high quality the user experience will be bad, regardless of how easy it is for the user to interact with. And if the content is ad-looking, most users will simply ignore it due to banner blindness, regardless of how relevant it might be to them. Inferior and misleading content is always a bad idea regardless of how it is presented.
During our usability tests we frequently observe the test subjects being enticed by the type of large and bespoke imagery often found in homepage carousels. Yet we also observe how seemingly minor implementation details can transform this piqued interest into a frustrating and potentially harmful user experience that irritates and misleads users. The three key elements to consider are the slide sequence, auto-rotation and device context (i.e. mobile vs tablet vs desktop).
Most users won’t see all the slides in a homepage carousel, even if it auto-rotates. They simply don’t stick around the homepage for that long, and certainly not at the top of the page.
During testing, the subjects would typically click on to another page or scroll past the carousel long before a full rotation of the slides had commenced. And that was in the case of auto-rotating carousels – obviously “fully manual” carousels only revealed the first slide, until the test subjects actively changed slides.
This means the sequence of the slides in the carousel is incredibly important as the initial slides will get vastly more exposure than later ones. Another crucial implication is that one can’t assume that users will see any particular slide. Though on “desktop” layouts the first slide will naturally get more exposure than subsequent ones granted that the carousel is placed above the fold.
On mobile, however, the carousel will often not be above the fold or the user may scroll past it while the image finishes loading because there’s nothing else to catch their attention on the screen (unlike on desktop where users often read the navigational links in the 1-2 seconds it typically takes for the initial carousel slide to load).
Now, none of this is a problem in and of itself – any particular user not seeing all of the carousel slides isn’t an issue so long as the carousel isn’t the only way to access certain site features or relied on to indicate the site’s product catalog diversity. However, many of the test sites during our Homepage & Category and Mobile E-Commerce usability studies only promoted certain offers and site features (product wizards, gift finders, etc) in the carousel slides, which proved highly problematic as most of the subjects never saw those slides (because they had moved on from the homepage already) and they therefore never learned about these otherwise helpful tools. So while it can of course be a great idea to also promote such features in carousel slides, it shouldn’t be the only way of accessing them.
In short: choose the slide sequence carefully and only use the carousel to highlight important site features and information (i.e. the slides should never ever be the only path to this content).
Auto-rotating the carousel can help spread exposure across its slides and underscore that it is in fact a carousel (rather than a static banner image). However, like any animating graphics it will take attention away from other more static content, hence auto-rotating slides sets the bar even higher for the quality and curation of the carousel content.
If – based on these considerations – auto-rotation is deemed appropriate, there’s a number of implementation details that are crucial in ensuring a good user experience.
The Importance of the Hover-State (Desktop vs Mobile)
First, it is only a good idea to have auto-rotating slides if the user’s device has a hover-state. The hover-state is crucial because it allows the site to infer the user’s potential interests and page focus.
If the user is hovering a slide, the site can use this information as a sign that the user might be interested in its content and might want to open it after reading the slide’s text – thus the auto-rotation should be temporarily paused to allow the user to finish reading its text and avoid accidental clicks on wrong slides.
In practice, this means auto-rotation isn’t appropriate for mobile sites because the devices that used to browse them are primarily touch-based and therefore lack hover. Without a way to infer the user’s focus on the page it is impossible for the site to know whether the user is about to click on the current slide or not, and auto-rotation may thus invoke a slide-change just milliseconds before the user clicks the carousel, causing them to open the wrong page – a scenario we observed numerous times during our mobile usability study.
Since there’s currently no way to avoid such untimely slide changes, auto-rotation should be avoided on mobile sites (where the majority of the visitors use devices without hover) because the downside of users potentially opening a wrong slide far outweighs the upside of spreading exposure across the carousel’s slides.
Three Details for Desktop Auto-Rotation
For auto-rotation to work well on desktop it requires careful implementation of three details (besides ensuring auto-rotation only happens on hover-capable devices, as per the above section):
- Slides shouldn’t rotate too quickly
- Auto-rotation should pause on hover
- Auto-rotation should permanently stop after any active user interaction
1) Slides shouldn’t rotate too quickly
When the carousel rotates too quickly users don’t have enough time to investigate interesting slides. This can make users feel uneasy as they try to rush through the slide’s text before it rotates. Of course auto-rotating too slowly will have the opposite effect, with users getting bored by slides that are of little interest to them.
The amount of text in each slide has a significant say in the duration a slide should be shown. If there’s just a short header, 5-7 seconds proved appropriate during test, while longer durations were needed for more text-heavy slides. One consequence of this is that slides may need to be assigned unique durations, with some slides being shown longer than others (due to additional text content) before auto-rotation kicks in.
2) Auto-rotation should pause on hover
There’s often a relation between the user’s mouse position and their focus on the page. (Indeed, there seems to be a fair degree of overlap between users’ eye- and mouse-gaze, Rodden K., et al, Google 2008, page 29.) Therefore, when a slide is hovered, it is certainly an indicator that the user might be interested in reading it and the carousel should pause so the current slide doesn’t suddenly change on the user.
An even more important reason to pause auto-rotation when the user’s mouse hovers a slide is to avoid the carousel rotating to the next slide just as the user clicks to open the current one. When conducting usability tests we time and again observe subjects reaching for a slide and clicking it only to have the carousel auto-rotate milliseconds earlier, causing them to end up on an entirely different page.
Now, in case the user notice that they’ve landed on a wrong page, this is just a little annoying, forcing them to go back to the homepage and re-find the slide they wanted to open and click again. However, we’ve also seen numerous instances where a subject didn’t realize what had happened and therefore began browsing the unintended landing page which they of course quickly deemed unhelpful.
It’s therefore crucial to pause auto-rotation on hover to avoid sending users on detours or potentially even misleading them. Unfortunately, the homepage carousels at 22% of top e-commerce sites currently don’t pause auto-rotation on hover.
Note: Auto-rotation may resume once the user’s mouse leaves the slide, i.e. no longer hovers the carousel, granted that the user hasn’t otherwise interacted with the carousel (as per next implementation detail). Hover can’t be interpreted as a user interaction because the user cannot not-hover with their mouse cursor. Hence the user might just be moving their cursor across the screen and in that process temporarily hover a slide. So while hover is a good way to gauge the user’s focus on the page it should in no way be interpreted as an active user request.
3) Auto-rotation should permanently stop after any active user interaction
If the user has interacted with the carousel beyond hover (e.g. actively changed a slide using the carousel controls), the auto-rotation should permanently stop – even when the user isn’t hovering the carousel.
When the user has actively changed slide by clicking the carousel’s next / 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.
A click is fundamentally different from hover, which at best can be used to gauge user focus. A click is an active user request and is a strong indicator of the user’s interests and intent. Therefore, permanently stop auto-rotation once the user begins actively interacting with the carousel, because they might have intentionally left the carousel at that particular slide.
Some Additional Mobile Considerations
As already mentioned, due to the widespread lack of hover on mobile devices (which are primarily touch-based), slides shouldn’t auto-rotate on mobile sites because it results in users accidentally opening wrong slides when the carousel auto-rotates just as they tap their screen. However, there are a few additional details to take into consideration when designing homepage carousels for mobile.
First, it’s important to support key mobile interaction modes. More specifically this means supporting swipe gestures as users have come to expect that this is how “galleries” are navigated on touch devices. This doesn’t mean traditional carousel controls such as next / previous buttons and slide indicators can’t be implemented, but during our Mobile Commerce usability study we found that these should be provided in addition to supporting swipe gestures.
One thing we frequently observe when reviewing mobile sites that feature a homepage carousel is that artwork is reused from the desktop site. This isn’t a problem so long as one is careful in ensuring that any text in the slides remain legible when scaled all the way down to a tiny mobile screen held in portrait mode. In short: be very cautious if reusing artwork that includes text.
Finally, users seem to have less patience for slow-loading carousels on mobile devices. This is likely because they often can’t see anything else than the carousel on their screen, as opposed to desktop where the user can typically scan navigation menus and other content while they wait for slide content to load.
A carousel is never better than its content – if the content isn’t relevant, well-curated and of high quality, the experience will never be good. However, if those criteria are met, carousels can be a decent way to highlight and expose users to topical site features and content.
Once a homepage carousel has been deemed appropriate, there are at least 8 implementation details to be mindful of:
- The slide sequence should be chosen carefully
- The carousel slides should never be the only way to access site features and content
- Only use auto-rotation when the attention-deflect caused by animating graphics is acceptable
- Never use auto-rotation for mobile sites (due to lack of mouse hover)
- Make sure slides don’t rotate too quickly or slowly (this possibly requires unique rotation times for each slide)
- Pause auto-rotation on hover to avoid changing slides the user is likely to be reading or are about to click
- Permanently stop auto-rotation after any active user interaction (i.e. click on carousel controls)
- On mobile, be sure to support swipe gestures and text legibility if reusing artwork from the desktop site
Yes, some users will still ignore the carousel due to banner blindness. And others may simply not like carousels. But adhering to all of the above will ensure the best possible homepage carousel user experience – with many users finding the slides enticing and the content they highlight helpful. However, if these 8 basic implementation details are too much work, don’t use a homepage carousel at all.