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
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.
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 James Royal-Lawson:
That big sliding banner? Yeah, it’s rubbish.
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.