XD Essentials: Carousels

by Nick Babich

posted on 04-10-2017

Carousels, sliders, slideshows — whatever you want to call them — they’re all over the web. Based on the premise of limited space with multiple messages to deliver, carousels are used to showcase services, help sell products, and capture the attention of new visitors. Go to just about any eCommerce or corporate site and you’ll find one on the homepage. On the surface carousels seem like a good idea, but they’ve got their downsides too.

In this article, we take a deep-dive into the pros and cons of homepage carousels, and we take a look at alternatives.

This type of carousel is often used by designers to display featured content on a homepage. Carousels come in many shapes and sizes, but usually a carousel (as discussed in this article) possesses the following traits:

Benefits of Carousels

The greatest benefit of using carousels is that they enable more than one piece of content to occupy the same piece of prime real estate on a homepage. Since more information appears near the top of the page, there may be greater opportunity for people to actually see it. Carousels are also good for sites that targets multiple audiences, as it lets you offer something for everyone. Last but not least, animated carousels make a site look more dynamic; motion changes in a part of the page capture a visitors’ attention (it’s human instinct to be drawn to movement).

Drawbacks of carousels

Despite the popularity of homepage carousels, they aren’t always the best use of space:

Image credit: erikrunyon

Carousels hide content and users have little or no idea of what the next slide will show. Why would a user click through to another slide if they don’t have any idea about what it will show them?

It’s possible to make a homepage carousel more user-friendly through design and interactive features. If you decide to use a carousel on your homepage, consider the following things:

Content is king

Carousels can only ever be as good as their content. Don’t use a carousel if the content isn’t interesting or useful for your visitors. For example, carousels formated in the same way as advertising (when each slide is a totally independent banner advertisement) annoy users most of time rather than guide them to a single clear call to action.

Like the rest of your content, carousels need to be engaging in order to be effective. Visitors come to your site for a reason, and that reason should be in the carousel.

There are also a few important rules that should be mentioned here:

Text should be legible

Slide captions or titles should be designed in such a way that they can be visible against a wide variety of background images. There’s no special technique in this — the visual design you choose for your captions will ultimately limit what background images you can use in order to maintain legibility.

Limit the number of slides

Try to keep the number of slides to to minimum: make sure every piece of content absolutely needs to be there before placing it in a carousel. Include five or fewer slides within the carousel, as it’s unlikely users will engage with more than that.

Use a progress indicator

Since a carousel only shows one items at a time, it’s important for users to see where they are in their viewing progress. Show how many frames are available in carousel, and indicate the current slide among the set. This helps people feel in control.

Make navigation obvious

First and foremost, make it obvious that users can find more content off the screen. This can be a set of arrows, scrollbars, gestural hints, auto-rotation, or something else that makes it obvious to the user that more content exists offscreen. Speaking about controls:

Take accessibility into account

Inaccessible carousels can be a major obstacle for many website visitors. It’s highly recommended to make sure that:

Use auto-forwarding with caution

Auto-forwarding through the slides in a carousel leads people through the information. This works like a timer where the carousel automatically moves onto the next slide after X seconds. It’s usually better to avoid auto-forwarding. Moving UI elements reduce accessibility, particularly for users with motor skill issues who have difficulty clicking something before it’s taken away. But if you still want to use auto-rotating feature, you need to:

Keep in mind that auto-forwarding isn’t recommended on mobile devices because users often scroll quickly, so by the time the carousel changes, the user will likely be below the fold and won’t see the change anyway.

Optimize for mobile usage

Optimizing a carousel’s content for mobile viewing should be a top priority.

3 Effective Alternatives to Homepage Carousels

There are alternatives to a homepage carousel that both perform well and are vastly easier to implement:

Static hero image

A hero image is a good alternative to carousel. A single well-designed hero image—one that looks like it’s part of the site, not an advertisement—is less likely to be ignored than a distracting carousel.

The homepage of Daniella Draper is a good example of a hero image in use. It looks like a natural part of the design and at the same time focuses user attention on a current promotion.


Grid layout allows designer to divide content from the carousel into a few different sections. The key benefit is that all content is visible at any time. This allows users to scan the page more efficiently and find relevant content faster.

Pinstripe Alley uses a grid to feature a few important community events. Notice that the most important information is the most visually prominent.

Video-Based Header

The old saying “a picture is worth more than thousand words” is even more true with video. By adding a layer of interactivity you can greatly increase engagement: video allows people to “feel” a product or service.

Tesla Motors gives customers an idea of what it feels like to drive a Tesla by using video.


A lot of posts has been written about carousels and almost all of them are against this pattern. Despite the public opinion, carousels can be used effectively. The key to their effective use is content. 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.

Topics: Creative Inspiration & Trends, Design

Products: Creative Cloud