The Only Seven Ways Homepage Carousels Work — Or Bust

By: Jared Wright

In many UX circles carousels may be considered long dead. They’ve been replaced with alternatives like tiles or separate content sections on the homepage.

The latest in UX research, however, shows that carousels can still be an effective use* (Caveat: *Only when applying the following seven guidelines). Of the top 60 US and European eCommerce sites 32% of these sites still have a carousel, this stat is down from 52% in 2013. For the rest of the sites that don’t know to follow the seven guidelines [using a scale of Interruptive at the low end, to Disruptive in the middle, and Harmful at the high end] those sites risk causing disruptive issues to their visitors and this, unfortunately, occurs with the most frequency.

The following seven guidelines may be somewhat complex, but adhering closely to their implementation proves carousels work much more effectively.

1. Never make a carousel the only path to content. Or let’s put it a positive way: Always provide another way to content in addition to the carousel. Users rarely see all the slides of a carousel on a site visit so it’s imperative that content reserved for a carousel slide also be searchable in the navigation or other areas of the homepage. That said, a carousel is only as good as its relevant, well curated, and high quality content. Identifying what “high quality” means is a topic for another post, nevertheless, there are guidelines to help companies maintain standards for their carousels.
   
   

This Nike example shows how key content should never be accessible only from the homepage carousel, because many users will never see it.

This not so good eBags example shows a ‘Sale’ slide but the flower image can be misleading or confusing to users that have no idea what eBags offers. This homepage attempts to offset the possible confusion with image tiles below displaying bags, but the primary carousel slide should showcase primary products.

2. Rotation time between slides should be 5-7 seconds for the images to be reliable in their effect. People are scanning sites so quickly that if a slide catches their attention, they need time to: a) register its relevance to them, b) read the offer, and c) make a decision to click the slide. All of that can happen in the space of 5-7 seconds, that’s the sweet spot.

3. Always pause the auto-rotation on mouse over. This is the most important of the guidelines. (42% of sites don’t get this right). Mouse over indicates a user’s interest, so the auto rotation needs to pause.

This not so good example from BestBuy shows a timer on the slide which makes the user click the pause button instead of auto pausing on mouse over.

4. When users change slides themselves – Stop rotation permanently on slide change. A user’s control of the slide rotation also means they’re fully confident and capable to take it over. To do otherwise tends to create user frustration and impatience.

5. This one has two parts:

(a) Use overly clear carousel controls. This means having a dedicated next button (this also means being aware of contrast issues and background checks so the next button is noticeable), i.e. Arrows. Just using small dots is not enough to help users.

This somewhat good example from Walmart shows clear arrows to navigate the slides, nav dots at the bottom that indicate a reference point, and a pause button — although the pause button makes it clear to the user how to pause the slides, this still puts the burden of action on the user to click a pause button instead of pausing on mouse over.

This bad example from Newegg is very difficult to tell there are control arrows available to use, the arrow contrast is so low on the background they get lost.

OR

(b) design ‘Table of Contents’ (TOC) Carousel tabs’ inside the carousel real estate area instead.

Amazon displays a TOC on the right hand side to indicate the carousel slide reference point.

This other Amazon example illustrates the TOC solution on the right hand side.

6. On Mobile: disable auto-rotation altogether (31% sites don’t get this right either). Because there is no mouse over ability on mobile, users risk going to the wrong page if the slide flips. Prevent this frustration by disabling the auto-rotation on mobile.

This mobile example from HomeGoods shows how the TOC and swipe gestures eliminate autorotation for users.

7. Be very careful of any embedded text or buttons in the image of the carousel. On Mobile what typically happens is that the graphic usually gets designed for desktop and then scaled down for mobile. This tends to make the Call To Action (CTA) too small to read and, therefore, compromises the image’s purpose. It’s necessary to either design at least two static sized versions of the graphic: one for desktop, one for mobile, or design an HTML responsive version with any text offers coded as a layer over the image. This coded version ensures that text will be legible on mobile screen sizes.

This bad example from HP shows that the main carousel image was originally designed for desktop and scaled down for mobile. The problem is when the CTA text is so small it loses legibility.

A word to the wise: If these seven guidelines are not used — its simple really, a carousel should not be used. Instead, reference the above alternatives and this should keep your site out of UX trouble.

This Gilt example uses tile sections in lieu of a carousel.

After all, no one wants any users abandoning your site when we know better. And when we know better we do better. Happy UXing out there.