Laura Diane Hamilton

CEO and Founder of Additive Analytics

Resumé

Should you use an auto-advancing carousel on your home page?

You have six key stakeholders, each of whom wants a prominent home-page banner displaying his pet project. Oh, and it has to be above the fold. Aha! Why not use an automatically advancing carousel?



A Usability Nightmare

Automatic or "auto-forwarding" carousels cause several key usability issues:

  • The user loses control of the user interface — which should never happen.
  • There is a low probability that the user will read and understand the most important piece of information in the carousel, because the most important message is displayed once for 5 seconds and then 4 other banners are displayed.
  • Users who are browsing in their second or third language may have a hard time reading the content before it changes.
  • Moving UI elements reduce accessibility, for example for users who may have difficulty clicking a call-to-action button before it flashes away.



Users cannot find key information

Jakob Nielsen ran a usability study in the U.K. to see whether auto-forwarding carousels are a good way to present key information.

It turns out they are not.

Here is how their usability study worked. They asked the user to determine whether Siemens had any special deals on washing machines by looking at the Siemens website.

The biggest item on the home page, both in terms of screen space and font size, was a £100 cashback offer on Siemens appliances. The giant "£100" letters were next to a sizeable picture of a washing machine.

According to the poor user:

I didn't have time to read it. It kept flashing too quickly.



Moving banners get ignored

Take a look at this heatmap study from Sociala Medier. The moving banner is that black section in the top half — that part that nobody is clicking on. (Image credit: James Royal-Lawson)



Carousels increase page load times

Typically, you'll need to load jQuery (and a slider script) in order to display a carousel. That alone will increase your page load times. On top of that, you may have large, high-resolution banners demonstrating your services or displaying your wares. All-in-all, carousels add between 0.4 seconds and 5 seconds to your page-load times. Don't forget, Google incorporates page speeds into search engine rankings, so if your site is slow, you're going to get punished.



Carousels won't work properly on mobile phones

It will take forever to load the carousels on a 3G network. And once it loads, it will be virtually impossible to navigate on a mobile phone. It's hard enough to click on those tiny little navigation circles on a desktop computer with the aid of a mouse. It may actually be impossible on a mobile phone. (I've never tried.)



Quotes from usability experts

From Brad Frost:

Carousels introduce a level of complexity to an interface. Instead of simply looking at content on a page, users are burdened with having to identify the carousel and then learning its controls, conventions and behaviors.


From WiderFunnel:

When organizational politics, inter-departmental jockeying for position and lack of customer-orientation trump Clarity of your Value Proposition, an offer gallery emerges.


From Tim Ash at ClickZ:

Rotating banners are a bad idea because you have basically abdicated your responsibility for curating and editing the content on your page. You have thrown up your hands and said, "I'm not sure what is important, so I am going to throw it all up against the wall and see what sticks."


From Adam Fellowes on StackExchange:

Almost all of the testing I've managed has proven content delivered via carousels to be missed by users. Few interact with them and many comment that they look like adverts and so we've witnessed the banner blindness concept in full effect. In terms of space saving and content promotion a lot of competing messages get delivered in a single position that can lead to focus being lost. I'm quite certain that they are indeed a UI cliche borne out of their inclusion in wire framing apps and being part of javaScript frameworks.


From James Royal-Lawson:

That big sliding banner? Yeah, it’s rubbish.


From ConversionXL:

I’m sure you’ve come across dozens, if not hundreds of image sliders or carousels (also called ‘rotating offers’). You might even like them. But the truth is that they’re conversion killers.


So what should I use instead?

It is fine to use a static carousel — one that doesn't advance on its own. The user should always be in control of what's happening on his screen. So if you are working on a retailer's site, for example, it's fine to give the user the option to flip through multiple offers.

First, though, figure out what your number one most important marketing message is. Then make sure that one message is the most prominently displayed one.

Amazon has two prominent carousels — one promoting the Kindle and the other promoting fall coats. Users can flip through the banners if they like, but the carousels do not auto-advance.

Lauradhamilton.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com.