UX Research Articles

Latest · Popular · See all

183 articles based on findings from our e-commerce usability research

8 UX Requirements for Designing a User-Friendly Homepage Carousel

Jamie Appleseed · January 13, 2015

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. And they are as popular on mobile sites; our mobile usability benchmark reveal that it’s 56% of mobile e-commerce sites that have a homepage carousel.

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 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.

“Woah.. that’s some pretty aggressive ads they show here,” a test subject complained when landing on Drugstore.com, “This disturbs my concentration.” Carousels can only ever be as good as their content.

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).

Slide Sequence

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).

The only way to access Toys’R’Us’ gift finder is through a slide in the homepage carousel, making it very unlikely that users will find it (especially since it wasn’t first in the slide sequence).

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 Slides

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.

Here a subject from one of our early mobile test sessions sees the “Spring Into Summer Mega Sale” slide and reaches out to tap the screen – unfortunately the carousel auto-rotated split-seconds earlier, causing him to end up at a “Bike Blast” sale instead of the intended summer sale.

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):

  1. Slides shouldn’t rotate too quickly
  2. Auto-rotation should pause on hover
  3. 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.

While the test subjects loved the large beautiful imagery in Pottery Barn’s homepage carousel, many of them felt the slides changed too quickly, giving them too little time to inspect the content.

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.

“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.”

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.

Neiman Marcus reuses carousel artwork on their mobile site. Unfortunately this renders some of the slide text barely legible.

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.

Implementation Checklist

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:

  1. The slide sequence should be chosen carefully
  2. The carousel slides should never be the only way to access site features and content
  3. Only use auto-rotation when the attention-deflect caused by animating graphics is acceptable
  4. Never use auto-rotation for mobile sites (due to lack of mouse hover)
  5. Make sure slides don’t rotate too quickly or slowly (this possibly requires unique rotation times for each slide)
  6. Pause auto-rotation on hover to avoid changing slides the user is likely to be reading or are about to click
  7. Permanently stop auto-rotation after any active user interaction (i.e. click on carousel controls)
  8. 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.

Post a comment or Share:

User experience research, delivered twice a month

Join 12,000+ readers and get Baymard’s research articles by RSS feed or e-mail:

Due to spam, you need JavaScript to do that.

(1-click unsubscribe at any time)

Chris Poteet January 13, 2015 Reply to this comment

Again, another disappointing article. Not that your guidance isn’t good IxD guidance, but you don’t deal with the bigger issues these things bring. Performance, banner blindness, and the fact that research has shown again and again most people don’t interact with them. The poor conversion rate alone would (I think) get you guys to dissuade the use of them.

http://shouldiuseacarousel.com
http://www.usefulusability.com/kill-conversion-killing-carousels-now/
http://thegood.com/insights/rotating-banners-they-are-never-a-good-idea/

Christian, Baymard Institute January 13, 2015 Reply to this comment

Hi Chris, as stated in the article if the content is no good (ad-looking) the carousel experience never can be either. Most carousels are in practice poorly implemented, and yes these doesn’t perform well. (e.g. the one in the NNG study you indirectly link to auto-rotates seemingly without pause – as we found in our studies as well, this will never ever work

That doesn’t mean they can’t be valid in select cases – with good content and proper attention to details. (a supplementary carousel of large bespoke imagery, article content, etc).

But again, as stated in the article, they’re not supposed to be the singular navigation path to any important features, etc. (which also align with the NNG findings you indirectly link to).

In can see how this article may at first look like a condolence of carousels. It’s not, is more a letter of warning of the many things that can go wrong – but also outlines, and confirm, that if enough attention is paid to details carousels can work for select purposes.

Nathanael Coyne (Boehm) January 15, 2015 Reply to this comment

In the spirit of “It depends” in the UX profession, we should not be dismissing carousels outright at a conceptual level. Done right they can be highly engaging even if, as you point out, people don’t directly “interact” with them by clicking through.

However unfortunately Christian whilst all the points you’ve raised in your article are valid, I wouldn’t rate them as the highest priority when it comes to designing a good carousel. Content first. Get the content right and fail half the requirements you stated and it can still whoop a carousel that is implemented technically correctly as per your requirements but just doesn’t expose engaging content.

Christian, Baymard Institute January 15, 2015 Reply to this comment

Hi Nathanael, we agree, as Jamie stated in the article intro:

“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.”

Ron McCranie January 13, 2015 Reply to this comment

Any slightly seasoned UX professional should already know what was covered in this article. How about some new data we could use when trying to improve the content with creative & marketing. I’m curious about things like number of CTAs, imagery vs graphics, etc.

Christian, Baymard Institute January 13, 2015 Reply to this comment

Hi Ron, completely agree that much of UX findings (in general) should already be known. But when the majority of carousels found at multi-million dollar e-commerce sites suffer from basic usability issues there’s still a clear need for improvement.

For example something as basic as auto-pause of the carousel on mouse-hover are missing on 22% of the carousels found at top 50 US e-commerce sites (all above 100million in sales).

If we get the opportunity for a more in-depth study specifically of the type of carousel content which work the best we’d be sure to publish an updated article. Thanks for the suggestion.

Šime Vidas January 14, 2015 Reply to this comment

Auto-rotate on mobile can be appropriate in cases where the content is short, e.g. a background image and a few words of text. This is what IGN’s mobile site does (ign.com) and I personally have no usability issues with that approach. When I open the site, I first look at the carousel and let it auto-rotate all its entries. Then, I move down the page normally.

testing January 14, 2015 Reply to this comment

auto rotate is too slow some times

William Blake January 18, 2015 Reply to this comment

Thanks for interesting insights!

I’m wondering if you can provide some reference/statistics for slider timing test: “5-7 seconds proved appropriate during test”

Kurt Mattes January 21, 2015 Reply to this comment

The article does not consider the users reading speed, cognitive abilities, or any disability. What if a mouse can’t be used? Consider an affordance that allows the user to control rotation.

Stomme poes January 27, 2015 Reply to this comment

It mentions reading speed a few times. People, without cognitive disabilities, had plenty of trouble reading carousels. However I agree there should have been some mention of :focus.

And while this isn’t an accessibility-oriented blog, I think some mention of WCAG (2.2 timed media: http://www.w3.org/WAI/WCAG20/quickref/#qr-time-limits-pause) guidelines could have been mentioned: that users always get an obvious method to pause/stop the carousel (if auto-running). The suggestion in the article that the auto-carouselling stop once the user begins to interact by intentional clicks already covers user-controlled speeds, if we assume these carousel all have proper controls and not merely changing clickable slides.

Stomme poes January 27, 2015 Reply to this comment

You could add “focus” to the “hover” rules— any carousel built decently needs to have not only separate linear controls (like left/right or forward/back) and position (dots or similar showing how many slides total and where in the slide deck you are now) but these things need to be keyboard-focusable without trapping. A user who lands their focus on a next/prev button OR a position button (if it’s a button, and they should be selectable if users want to jump to a slide non-linearly) should stop a carousel similar to mouse hover.

Since many browsers leave “focus” behind on clicked elements, this also doesn’t conflict with “stop the animation once the user has interacted”.

Jamie, Baymard Institute February 23, 2015 Reply to this comment

Good tip. Any and all indications of user interaction with the carousel should be utilized :)

KnowledgePower February 22, 2015 Reply to this comment

This is a wonderful article primarily because it provides strong opinions and a sufficient do-this, don’t-do-that checklist for everyone to follow that would definitely make websites better for the majority of users. The people who use sliders/carousels need to hear this, and the people trying to talk to the people using carousels need to have something categorical to show them to back up the argument. Go Baymard!

Mahya January 6, 2016 Reply to this comment

Hi there
i read this article but i didn’t get when the carousel auto rotate is stop because an active user interaction when it should resume?

Post a comment!

Close overlay