You’ve seen them -- no doubt dozens or hundreds of times. In the past five years, they’ve become one of the foremost staples of a website’s user interface. Carousels, that is -- and not the kind you’d find at an amusement park -- the large, dominant visual-heavy blocks that automatically rotate through a list of any number of different items or messages, most often found on the homepage of a website.
They’re everywhere, but do they work?
Sure, carousels have been the “new black” of web design, but are they actually effective? Does the average website visitor leave with all the messages they’re shown on the homepage, or are these displaced amusement rides not so amusing after all?
According to numerous usability studies, their effectiveness might not match up to their hype.
Jakob Nielsen, the master of all things usability, recently published a study showing the pitfalls of auto-rotating carousels.
In the study, Nielsen asked a user to answer if global manufacturer Siemens had any specials on washing machines. The page in question, mind you, had a massive carousel slide on washing machine specials front-and-center in 98-point font. Still, the user failed the task and left the site despite scrutinizing several pages.
Why couldn’t the user answer the question? Nielsen determined it was the accordion-like carousel. Every five seconds, the slide on the page would rotate to a new message. There wasn’t enough time for the user to get the message.
The conclusion of the study:
Accordions and carousels should show a new panel only when users ask for it. Otherwise, it should stand still and let users read the information in peace, without having the rug yanked from under them. As our user said about Siemens' big rotating box: "I didn't have time to read it. It keeps flashing too quickly."
Nielsen’s study goes into more detail on why auto-rotating carousels are accessibility nightmares for many users (it’s a nice read -- check it out).
In the spirit of March Madness, another study was done on the University of Notre Dame website. The results of the study concluded that the click-through percentages on auto-rotating carousels are very low -- and items outside the first slide are often ignored entirely.
Others feel even more strongly -- Tim Ash of Site Tuners writes:
Rotating banners are absolutely evil and should be removed immediately.
If you shouldn’t use a carousel, then what should you use?
It’s simple. Showcase the most important message only, along with a supporting action.
MailChimp does an exceptional job of this. Instead of talking about all the great features found in its service, they get to the point and stick with one message: MailChimp provides easy email newsletters. (And you can learn about the rest if you sign up for free.)
If you have to use a carousel, use it correctly.
Carousels aren’t always bad. Sometimes, they can be a reasonable way of showing many different options that might be of interest to your visitors. To use an example from here at Liquid, we recently launched the new Mack Trucks homepage, which features a full-page, highly visual carousel featuring each of the main categories of trucks that Mack Trucks offers. The photos and scenes we’re using are almost as big and bad as the trucks on the screen. Each slide has a clear message and a plainly visible lead-in to the rest of the site.
If there’s a good reason to use a carousel, then at the very least, follow some basic usability guidelines:
Don’t keep auto-rotating the carousel once the user has taken control. That means if the user has clicked on something inside the carousel, it becomes a manually-activated carousel for the remainder of the time that page is open.
Even W3C’s Web Content Accessibility Guidelines (WCAG 2.0) make it explicitly clear that users must have control over timed content:
For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.
Let your users remain in control.
Make the click targets easy to click, tap, or scroll through. Nobody wants to try to click or tap a tiny circle or arrow to get to the next slide (or hunt for one on a highly visual background image). Carousels can be a nightmare on mobile devices where a slide button can be smaller than a fingertip.
Provide relevant content. It sounds like a no-brainer, but it is essential that feature items align with what users and customers are looking for -- not necessarily what someone inside some department wants to feature. While talking about upcoming events or company news might be interesting to people within your organization (you know who I’m talking about -- those who insist that what they’re doing must be featured on the homepage), it’s rare that a user visits a site with the intent of reading up on the company in the news.
Conversion experts agree -- satisfy the majority of your visitors, not a department within your organization.
Suggest more content. If you managed to engage a user with a slideshow, it’s a good opportunity to lead them into more supporting content within your website. Make sure each slide has a very clear call to action.
Keep your message the same. Too many messages means no message at all. It’s essential to focus on one single primary message. If a transition happens when a user is looking at your carousel, that message is lost. JJ Buckley’s site is a good example of using one message in a carousel. A user can spend just a few seconds on the site and know that they’re featuring their 2010 Bordeaux.
Don’t be lazy and settle for a carousel simply because it’s what everyone else is doing -- most content in carousels is skipped over completely. Make the homepage focused around your organization’s goals and messaging; tell users what you do (or what you need to say) and give them a clear action. If you do need to use a carousel, make it user-friendly. Just don’t say I didn’t try to warn you if the results aren’t what you’d hoped.
About Steve Luvender
Steve Luvender is a Senior User Experience Designer at Liquid Interactive, where he works with organizations to design and implement solutions that delight people and create business results.