Carousels, image rotators, sliders, featured content modules, whatever you want to call them — they’re everywhere on the web. Carousels are hugely popular on e-commerce sites, especially on the homepage. Most of e-commerce sites have a carousel on the homepage of their desktop site:

But are homepage carousels actually helpful to users, or do they merely represent an easy way to deal with content?

Ask anyone this question and they’ll tell you that carousels are an anti-pattern. There have been a few contributors to carousels’ bad reputation. Research by Erik Runyon revealed that only 1% of site visitors clicked on the carousel feature — and 84% of those were clicks on the first slide. On his site Should I use a carousel?, Jared Smith states that, given the choice, you should not use a carousel. Perhaps, the best statement at Jared’s site comes from Lee Duddell who summed up a common carousel problem:

“Carousels are effective at being able to tell people in Marketing/Senior Management that their latest idea is on the Home Page. Use them to put content that users will ignore on your Home Page. Or, if you prefer, don’t use them. Ever.”

Actually, homepage carousels can work well and be helpful to users if they adhere to a few key implementation details. In this article we’ll go over effective carousel implementation details and outline how to design a good carousel.

What is a Carousel

Carousels are a method of displaying marketing information on a homepage. Designers use carousels to maximize the information density without forcing the user to scroll further down the page. Carousels come in many shapes and sizes, but usually a carousel (as discussed in this article) possesses the following traits:

• It appears toward the top of the homepage and occupies a substantial section of the “above the fold” area.
• More than one piece of content appears in the same place, though only one actually displays at a time; each piece contains images and a small amount of text.
• It offers some indication that there is more than one piece of featured content within the carousel.
  

##Benefits of Carousel * Carousels make it possible to show more than one piece of content at the same *piece of prime screen estate* on the homepage. * More information appears near the top of the page, there may be greater opportunity for people to actually see it. ##Drawbacks of Carousel * *People frequently overlook carousels*, together with all or some of the content within them (even if carousel auto-rotates) —  visitors simply don’t stick at the top of the page for too long. Thus, you can’t count on people seeing all information in carousels. * Designers usually *consider the carousel as a collection of images*, but users often *considers just the one image they see*. A set of images in a carousel can provide an accurate impression of what services or products you offer, but if a person sees only one image in that set he may get the wrong idea about your business. #Guidelines for Good Carousel Design ##Content First We’ve heard it a thousand times: *content is king.* Carousels can only ever be as good as their content. If the content of a carousel isn’t relevant the user experience will be bad, regardless of how easy it is for the user to interact with. There are a few important rules that should be mentioned here:

• Don’t use a carousel if the content isn’t interesting or useful for your visitors (e.g. promotional information they don’t care about). Such carousels only distract people most of time rather than guiding them to a single clear call to action.
• Content in your carousel should’t look like an ad (formatted in the same way as advertisement). If the content is ad-looking, most users will simply ignore it due to banner blindness. That’s why it’s essential to choose the typeface and images to match those used in the rest of the site, so the slide appears to be part of the site content rather than a pushy advertisement.
  

• The slide sequence should be chosen carefully. Keep in mind that the initial slides will get vastly more exposure the than later ones. Thus, the first slide should always show the most important piece of content and has to sell the next slide to the user. Next slides should all be ordered by importance.
• The carousel slides should never be the only way to access site features and content. It’s a good idea to put any important information that appears in a carousel also somewhere else in the page, so the visitors who interact with the site have a good chance of seeing it.
• Don’t use a carousel if you need the user to see all of the content. Even if your carousel is effective, remember that most visitors aren’t going to see every slide.

Limit the Number of Slides

Include five or fewer slides within the carousel, as it’s unlikely users will engage with more than that. Limiting the number also helps with discovering the content, and finding the content in the carousel again later.

Provide a Progress Indicator

Indicate how many slides are present, and where the user is within the “progression.” This helps people feel in control.

##Make Sure Slide Content is Legible on Mobile As mobile increasingly demands attention as a force to be reckoned with, optimization carousel’s content for mobile viewing is a top priority. The clearer the text and images, the more likely users are to engage and understand the intended points. That’s why it’s so important to make sure that any text in the slides remain legible on every screen, even when it scaled all the way down to a tiny mobile screen. And you should definitely check a text legibility if reusing artwork from the desktop site for your mobile site.  ##Design Proper Navigation Controls In navigation controls, aim to help people identify the options, and recall them after they have already seen the content in the main slide:

• Ensure that navigation controls exist and appear inside the carousel, not below it or separated by a fold. This avoids issues on both large and small displays. Below there are two examples for desktop sites:
  


• Make links and buttons clearly distinguishable and large enough to decipher and click. Buttons (next / previous and slide selectors) that are tiny, close together, or on top of a busy background are not easy to see or click.
  

• Support swipe gestures for mobile devices. This doesn’t mean traditional carousel controls such as next / previous buttons can’t be implemented, but they should be provided in addition to supporting swipe gestures.
  

#Tips For Auto-Rotation (or Auto-Forwarding) Auto-rotation through the slides in a carousel leads people through the information. But for auto-rotation to work well it requires careful implementation of four details:

• Never use auto-rotation for mobile sites. Users can accidentally open wrong slides when the carousel auto-rotates just as they tap their screen.
• Make sure slides don’t rotate too quickly. Sometimes carousels move too quickly, and users can’t read the information, which is frustrating for them. Of course auto-rotating too slowly will have the opposite problem — users will be bored by slides. You should test for the right timing, or at least estimate how long it might take the average user to read the text and process the images. Consider the possibility of unique rotation times for each slide if information on them require different time to comprehend. If you aren’t sure you can get the timing correct— don’t auto-rotate the carousel.
• Keep users in control (control creates trust). Pause auto-rotation on hover to avoid changing slides the user is likely to be reading or are about to click. Permanently stop auto-rotation after any active user interaction (i.e. click on carousel controls), because a click is an active user request and is a strong indicator of the user’s interests and intent.
• Don’t stop at the last slide. Continue cycling through the slides and displaying which slide is currently selected.

The Best Alternative To Carousel

A common problem with homepage carousel is lack of context: visitors usually has little idea of what the next slide will show or why they should care. As a result, they won’t likely want to flip through them. In an attempt to solve this problem you might consider using a hero image instead of a carousel. Сompared to a carousel, hero image has the following advantages:

• Visitors can focus on the one image rather than dividing their attention among several. And a static hero image may be less likely to distract visitors than a rotating element.
• If designers know they had to choose just one image and a sentiment for it, they may be more likely to choose something that’s better represent a service or products.

You can prioritize your content effectively, eliminate the carousel, and put an effective and useful hero image together with call to action where the carousel was. For example, the following screenshot shows the homepage at Amazon on which designers use a hero image to highlight the top product — Kindle Paperwhite. This hero is attention-grabbing and communicative.

Another example — New Balance announces their latest shoes and prominently displays a fast path to find whatever visitors need.  #Conclusion If people aren’t interacting with your carousel, it might not be a carousel’s pattern fault. Like the rest of your content, carousels need to be *engaging* in order to be effective. Don’t use a carousel just to get additional content on the screen. Keep in mind that a carousel is never better than its content — if the content isn’t relevant and well-curated the experience will never be good. However, if content quality criteria is met, carousels can be a decent way to highlight and expose users to topical site features. Thus, a right answer on the question “Should I use a carousel?” should be: *if it’s good for your users.*